前面我们记录了几种常用的水平垂直的布局方式,其中就有我们今天要详细记录的布局方式,flex弹性盒子布局,下面我们就聊聊flex布局。
同样的代码只展示有变化的,重复代码不再重复展示。
一、Flex布局是什么,基本概念?
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。
比如
.box{
display:flex;
}
采用Flex布局的元素,称为Flex容器(container),称为”容器”。它的所有子元素自动成为容器成员,称为Flex项目(item),称为”项目”。
下面借用别人一张图展示
容器默认存在两根轴:
-
水平的主轴(main axis):主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;
-
垂直的交叉轴(cross axis)。交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿主轴排列。单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
二、 容器的属性
详细记录各项属性之前,先展示基础样式代码及效果
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
</div>
.box{
width: 500px;
height: 200px;
padding: 10px;
border: 1px solid red;
display: flex;
}
.item{
width: 50px;
height: 50px;
color: white;
font-size: 1.4rem;
text-align: center;
line-height: 50px;
margin: 1px 1px;
background: #1f1dff;
}
默认的布局方式,由于子元素是div以及自身属于块级元素,所以独立占据一行,下面我们给外层盒子添加 display:flex看看效果:
.box {
display: flex;
}
下面就详细看看每一个属性
2.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向,默认为row)
它可能有4个值:
-
row(默认值):主轴为水平方向,起点在左端。
-
row-reverse:主轴为水平方向,起点在右端。
-
column:主轴为垂直方向,起点在上沿。
-
column-reverse:主轴为垂直方向,起点在下沿。
2.2 flex-wrap属性
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行
它有三个值。
1)nowrap(默认):不换行
2)wrap:换行,第一行在上方
3)wrap-reverse:换行,第一行在下方
2.3 flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。效果查看 上方各自的效果,这里不再展示
2.4 justify-content属性
justify-content属性定义了项目在主轴上的对齐方式。
它可取5个值:
具体对齐方式与轴的方向有关,这里以主轴为从左到右为例
-
flex-start(默认值):左对齐
-
flex-end:右对齐
-
center:居中
-
space-between:两端对齐,项目之间的间隔都相等。
-
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
2.5 align-items属性
align-items属性定义项目在交叉轴上如何对齐
它可取5个值:
具体的对齐方式与交叉轴的方向有关,这里以交叉轴从上到下为例
-
stretch(默认):如果项目未设置高度或设为auto,将占满整个容器的高度
-
flex-start:交叉轴的起点对齐
-
flex-end:交叉轴的终点对齐
-
center:交叉轴的中点对齐
-
baseline: 项目的第一行文字的基线对齐
2.6 align-content属性
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性与align-items属性效果相同
该属性可取6个值:
-
flex-start:与交叉轴的起点对齐。
-
flex-end:与交叉轴的终点对齐。
-
center:与交叉轴的中点对齐。
-
space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
-
space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
-
stretch(默认值):轴线占满整个交叉轴。
三、项目的属性
3.1 order的属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
<div class="box">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
<div class="item item-4">-1</div>
<div class="item item-5">5</div>
<div class="item item-6">6</div>
<div class="item item-7">7</div>
<div class="item item-8">8</div>
<div class="item item-9">9</div>
<div class="item item-10">10</div>
</div>
.item-1{
order: 1;
}
.item-2{
order: 2;
}
.item-3{
order: 3;
}
.item-4{
order: -1;
}
3.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
<div class="box">
<div class="item item-1">1</div>
<div class="item item-2">2</div>
<div class="item item-3">3</div>
</div>
.item-1{
flex-grow: 1;
}
.item-2{
flex-grow: 2;
}
.item-3{
flex-grow: 3;
}
如果所有项目的flex-grow属性都为1,将等分剩余空间。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将是他项的2倍。
3.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。负值对该属性无效
3.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
示例中默认宽度为60px
flex-basis:70px
它可以设为跟width或height属性一样的值(比如70px),则项目将占据固定空间。
3.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
flex:none | flex-shrink | flex-basis
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值。
3.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
.item-1{
align-self: flex-start;
}
.item-2{
align-self: center;
}
.item-3{
align-self: flex-end;
}
可取6个值,除了auto,其他都与align-items属性完全一致。
在开发项目当中最常用的就是下面的属性,定义盒子的整体布局
.box{
display: flex;
justify-content: center;
align-content: center;
}
注意,所有设为Flex布局以后,其子元素的float、clear和vertical-align等属性将失效。