Flexbox align-content 属性

2025年1月12日 | 1分钟阅读

CSS3 Flexbox 的 align-content 属性用于修改 flex-wrap 属性的行为。它类似于 align-items，但它对齐的是 flex 行而不是 flex 项。

其可能的值为

stretch: 这是默认值。它指定行拉伸以占据剩余空间。
flex-start: 它指定行被打包到 flex 容器的起始位置。
flex-end: 它指定行被打包到 flex 容器的结束位置。
center: 它指定行被打包到 flex 容器的中心位置。
space-between: 它指定行在 flex 容器中均匀分布。
space-around: 它指定行在 flex 容器中均匀分布，两端各有半个空格。

让我们举一个例子，看看使用 center 值的结果。

请看这个例子

<!DOCTYPE html>
<html>	
<head>
<style>
.flex-container {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-align-content: center;
    align-content: center;
    width: 300px;
    height: 300px;
    background-color: lightpink;
}
.flex-item {
    background-color: brown;
    width: 100px;
    height: 100px;
    margin: 10px;
}
</style>
</head>
<body>
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
</body>
</html>

下一主题CSS 表格隔行变色

Flexbox align-content 属性

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

CSS 教程

CSS 属性

CSS Advance

CSS Design

CSS Questions

杂项

CSS 多选题

面试题

Flexbox align-content 属性

相关帖子

CSS Focus

CSS Header

CSS Flip Image

最佳 CSS 网页安全字体及其搭配

CSS Float Center

CSS Hover Animation

CSS Display Inline

CSS Strikethrough

CSS Circle

Shorthand Property CSS

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器