Flex 布局(Flexbox)是一种用于在容器中布局子元素的弹性布局模型。它提供了在水平或垂直方向上对子元素进行对齐、分配空间的一种方式,以便更有效地设计和管理页面布局。
以下是 Flex 布局中常用的属性:
一、容器属性(作用于父元素,即容器)
1.display:flex
用于定义一个容器是一个 Flex 容器。取值为 flex。
.container {
display: flex;
}
2.flex-direction:
定义主轴的方向(子元素排列的方向)。
可选值:row(默认值,水平方向)、row-reverse(水平方向,反向排列)、column(垂直方向)、column-reverse(垂直方向,反向排列)。
.container {
flex-direction: row;
}
3.justify-content:
定义了子元素在主轴上的对齐方式。
可选值:
flex-start(默认值,靠近主轴起点对齐)
flex-end(靠近主轴终点对齐)
center(居中对齐)
space-between(平均分配项目之间的空间,但没有在首尾两侧留下额外的空间)
space-around(平均分配项目之间的空间,同时在首尾两侧也留有一半的空间)
space-evenly(用于在主轴上均匀分布子元素,同时保留首尾两端的空白间隔。)
.container {
justify-content: center;
}
4.align-items:
定义了子元素在交叉轴上的对齐方式。
可选值:
flex-start: 交叉轴的起点对齐。
flex-end: 交叉轴的终点对齐。
center: 交叉轴的中点对齐。
baseline: 子元素的基线对齐。
stretch: 默认值,子元素被拉伸以适应容器。
.container {
align-items: center;
}
5.align-self:
用于定义单个子元素在交叉轴上的对齐方式,覆盖 align-items 的值。
可选值flex-start(默认值,靠近主轴起点对齐)、flex-end(靠近主轴终点对齐)、center(居中对齐)、space-between(两端对齐,子元素之间等距分布)、space-around(子元素两侧均匀分布)。
.item {
align-self: flex-start;
}
二、项目属性(作用于子元素,即项目)
1.order:
定义子元素的排列顺序。数值越小,越靠近主轴起点。
默认值为 0。
.item {
order: 1;
}
2.flex-grow:
定义子元素的放大比例,用于分配剩余空间。
默认值为 0,即不放大。
.item {
flex-grow: 1;
}
3.flex-shrink:
定义子元素的缩小比例,用于收缩溢出空间。
默认值为 1。
.item {
flex-shrink: 0;
}
4.flex-basis:
定义子元素在分配多余空间之前的基础大小。
默认值为 auto,即由内容决定。
.item {
flex-basis: 50%;
}
5.flex:
flex 是 flex-grow、flex-shrink 和 flex-basis 的缩写。
默认值为 0 1 auto。
.item {
flex: 1 0 50%;
}
这些属性提供了灵活的布局选项,使得设计者可以更好地控制子元素的排列和分布。你可以根据具体的布局需求使用这些属性。