二、flex弹性布局
2.1 flex弹性概念
弹性盒子是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间,收缩以适应更小的空间。
主轴和交叉轴如图下图:
2.2 flex容器属性
2.2.1 flex-direction
flex-direction 属性用来决定主轴的方向(即项目的排列方向),属性的可选值如下:
值 | 描述 |
---|---|
row | 默认值,主轴沿水平方向从左到右 |
row-reverse | 主轴沿水平方向从右到左 |
column | 主轴沿垂直方向从上到下 |
column-reverse | 主轴垂直方向上从下到上 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承此属性的值 |
2.2.2 flex-wrap
flex-wrap 属性用来设置当弹性盒子的子元素(项目)超出父容器时是否换行,属性的可选值如下:
值 | 描述 |
---|---|
nowrap | 默认值,表示项目不会换行 |
wrap | 表示项目会在需要时换行 |
wrap-reverse | 表示项目会在需要时换行,但会以相反的顺序 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
换行时,会根据父容器的高度进行等分,而不是紧贴着。
注意:
flex布局不太适合进行多行布局的
2.2.3 flex-flow
[flex-direction][flex-wrap]
是flex-wrap和flex-direction的简写,先写方向,再写是否换行
2.2.4 juestify-content(主轴对齐)
justify-content 属性用于设置弹性盒子中元素在主轴(横轴)方向上的对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
flex-start | 默认值,左对齐 |
flex-end | 右对齐 |
center | 居中 |
space-between | 两端对齐,项目之间的间隔是相等是 |
space-around | 每个项目两侧的间隔相等 |
space-evenly | 子项之间的间距都是等价的 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
2.2.5 align-item(每一行的对齐方式)
align-items 属性用来设置弹性盒子中元素在侧轴(纵轴)方向上的对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
stretch | 默认值,项目将被拉伸以适应容器 |
center | 项目位于容器的中央 |
flex-start | 项目位于容器的顶部 |
flex-end | 项目位于容器的底部 |
baseline | 项目与容器的基线对齐 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
2.2.6 align-content(整体的对齐方式)
align-content 属性与 justify-content 属性类似,可以在弹性盒子的侧轴还有多余空间时调整容器内项目的对齐方式,属性的可选值如下:
值 | 描述 |
---|---|
stretch | 默认值,项目将被拉伸以适应容器 |
center | 项目在容器内居中排布 |
flex-start | 项目位于容器的顶部排列 |
flex-end | 项目位于容器的底部排列 |
space-between | 多行项目均匀分布在容器中,其中第一行分布在容器的顶部,最后一行分布在容器的底部 |
space-around | 多行项目均匀分布在容器中,并且每行的间距(包括离容器边缘的间距)都相等 |
initial | 将此属性设置为属性的默认值 |
inherit | 从父元素继承属性的值 |
2.3 flex-grow扩展比例
flex-grow:默认值是0,表示不占用剩余的空白空隙扩展自己的宽度
- 如果比例值为1或大于1,就占满剩余的所有空间
- 若出现多个div,则按flex-grow的值进行等比分配
2.4 flex-shrink收缩比例
flex-shrink:默认值是1,表示flex容器空间不足时,元素的收缩比例
值 | 描述 |
---|---|
flex-shrink:1 | 自动收缩,跟容器大小相同 |
flex-shrink:0 | 不进行收缩 |
flex-shrink:0.5 | 收缩移出比例的0.5 |
多个div时:父容器:500px,A:300px,B:400px
- flex-shrink:1;A占300-3/7,B占400-4/7.
- A-flex-shrink:2;B-flex-shrink:1;A占300-6/10,B占400-4/10
2.5 flex-basis
flex-basis:默认值是auto,指定了flex元素在主轴方向上的初始大小,覆盖了原来的高度或宽度
值 | 描述 |
---|---|
0 | 最小宽度 |
auto | 自适应内容 |
200px | 固定大小 |
100% | 自适应父容器 |
2.6 flex
flex是flex-grow
、flex-shrink
和flex-basis
的缩写
参数说明如下:
flex-grow
:(必填参数)一个数字,用来设置项目相对于其他项目的增长量,默认值为 0;flex-shrink
:(选填参数)一个数字,用来设置项目相对于其他项目的收缩量,默认值为 1;flex-basis
:(选填参数)项目的长度,合法值为 auto(默认值,表示自动)、inherit(表示从父元素继承该属性的值) 或者以具体的值加 “%”、“px”、“em” 等单位的形式。
值 | 描述 |
---|---|
1 | flex-grow:1,flex-shrink:1,flex-basis:0%; |
0 | flex-grow:0,flex-shrink:1,flex-basis:0%; |
auto | flex-grow:1,flex-shrink:1,flex-basis:auto; |
1 0 50% | flex-grow:1,flex-shrink:0,flex-basis:50%; |
<style>
.flex {
display: flex;
flex-flow: row wrap;
align-items: flex-end;
border: 1px solid #CCC;
}
.flex div {
width: 60px;
height: 60px;
border: 1px solid black;
}
.flex div:nth-child(2) {
flex:0;
}
.flex div:nth-child(4) {
flex:1 1 auto;
}
</style>
<body>
<div class="flex">
<div>A</div><div>B</div><div>C</div><div>D</div><div>E</div>
</div>
</body>
2.7 order及align-self
2.7.1 order
order默认值为0,改变某一个flex子项的排序位置
2.7.2 align-self
align-self默认值是auto,控制单独某一个flex子项的垂直对齐方式
align-self:auto;默认与父容器的align-items的样式对应,与align-item的属性一致