flex布局是CSS3中的一种布局方式,可以使元素在父容器中自动调整大小和位置。
flex布局属性
flex布局的主要属性有:
flex-direction:设置主轴的方向,可选值有:
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
flex-wrap:设置子元素是否换行,可选值有:
- nowrap(默认值):不换行,子元素在一条线上。
- wrap:换行,子元素在多条线上排列。
- wrap-reverse:换行,子元素按照反向的主轴方向换行。
flex-flow:是flex-direction和flex-wrap的简写属性,默认值为row nowrap。
justify-content:设置子元素在主轴上的对齐方式,可选值有:
- flex-start(默认值):左对齐。
- flex-end:右对齐。
- center:居中对齐。
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:Around每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
align-items:设置子元素在交叉轴上的对齐方式,可选值有:
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline:项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
align-content:设置多根轴线的对齐方式,如果项目只有一根轴线,该属性不起作用。可选值有:
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
align-self:允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,可选值同align-items属性。
代码示例
以下是一个简单的flex布局示例:
<style>
.container {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.item {
flex: 1;
background-color: lightblue;
margin: 10px;
padding: 20px;
text-align: center;
}
</style>
<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布局。子元素(.item
)将自动调整大小和位置。flex-direction: row
表示主轴为水平方向,justify-content: space-between
表示子元素在主轴上左右两端对齐,子元素之间的间隔相等。align-items: center
表示子元素在交叉轴上居中对齐。flex: 1
表示子元素可以扩展以填充可用空间,并且各子元素的大小相等。