CSS flex 属性
CSS Flex 属性
简介
CSS Flex 是一组新的布局属性,能够让容器的子元素在可用空间内更加自由地分布,并允许更好的响应式设计。使用 Flex 属性,设计者能够更好地控制元素的尺寸、位置、间隔和排序。
Flex 容器
要使用 Flex 属性,需要先将 Flex 属性应用于容器。使用 Flex 容器,需要设置以下属性:
display: flex
: 将容器设为 Flex 布局。flex-direction: row/column
: 设置容器主轴的方向。justify-content: flex-start/end/center/space-between/space-around
: 定义在容器中的子元素沿着主轴的对齐方式。align-items: flex-start/end/center/baseline/stretch
: 定义在容器中的子元素沿着副轴的对齐方式。align-content: flex-start/end/center/space-between/space-around/stretch
: 定义当多个行或列同时存在的情况下,沿着副轴的堆叠方式。
Flex 元素
在 Flex 容器中的元素被称为 Flex 元素,这些元素可以设置以下属性:
order
: 定义元素排列的顺序。数值越小,越靠前。默认值为 0.flex-grow
: 定义元素在剩余空间中的拉伸程度。默认值为 0.flex-shrink
: 定义元素在空间不足时的收缩程度。默认值为 1.flex-basis
: 定义元素在分配容器空间之前分配的空间。默认值为 auto.flex
: 等同于 flex-grow、flex-shrink 和 flex-basis 这三个属性的值。默认值为 0 1 auto.align-self
: 允许单个元素与其他元素不一样的对齐方式。默认值为 auto.
示例
以下是一个在 Flex 容器中使用的示例:
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
}
在以上的示例中,容器沿着主轴的方向是水平的,子元素之间的间隔是采用了 space-between
的方式进行排列的。每个子元素都采用了 flex: 1
的属性,因此它们将在剩余的空间中均分。同时,在副轴方向,子元素的对齐方式是居中的。