初识flex
之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。
flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;
。
flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:
基本使用
我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:
|
|
|
|
display: flex
接下来见证奇迹的时刻,给 .flexbox
添加 display: flex;
如下:
|
|
为了看的清除我清除了元素的 padding 和 margin 并分别设置了背景,我们发现在 flexbox 容器内,所有块元素和行内元素都会变成和父容器高度相同,宽度自适应的方块。
flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向), 上面默认的是 flex-direction: row
.
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
例如我们设置为 row-reverse
|
|
设置为 column
会发现元素竖向排列,而且和父容器宽度相同,高度自适应, 我们可以猜得出 column-reverse
是竖向反序排列。
我们来尝试一种情况,就是当他们的宽度不同时如何排列:
会发现默认的排列方式是靠左边,这个其实也有对应的配置,我们接着看。
flexbox的属性
除了设置元素的排列方式外还可以在 flexbox 容器上面设置下面 5 个属性:
flex-wrap
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
- nowrap(默认值):不换行。
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方。
为了测试,我们给 flexbox 中再添加 3 个 box 看看效果,实际上就是 flex-wrap: nowrap
的默认值。
接下来我们再分别试一下另外两个设置。
flex-flow
flex-flow 属性是 flex-direction 属性和 flex-wrap 属性的简写形式,默认值为 row nowrap。
align-items
align-items属性定义项目在交叉轴上如何对齐。它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
上面我们提到过,如果他们的宽度不同时会偏向一个方向排列,我们可以通过设置 align-items: center
属性让居中显示:
|
|
我们会发现一个现象, align-items: stretch
时候 span 标签是占满了整行(因为设置的是竖直方向), 而如果 align-items 不是 stretch 则只会被自身内容撑开。
justify-content
justify-content属性定义了项目在主轴上的对齐方式。它可能取5个值,具体对齐方式与轴的方向有关。下面假设主轴为从左到右。
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
上面虽然我们让三个 box 在横向(竖直的交叉轴方向) 中间居中了,但是我们要使他们整体竖直居中就需要用到 justify-content: center
|
|
align-content
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
上面的设置已经能解决所有只有一行或者一列的情况,但是当我们的 box 数大于一行的时候就会得到可能不是我们需要的效果,效果如下:
|
|
为了方便查看, 将主轴方向设置为了水平方向,并添加了 4 组 12 个 box.
这可能不是我们想要的结果,我们要的是整体居中,而不是一行一行的居中(这里就像文本一样),添加 align-content:center
后效果如下:
同理,我们如果设置 align-content: flex-start
就会全部挤到左上角, 如果我们设置 align-content: flex-end
就会全部挤到左下角。
这里要注意的是 align-content 是多行情况下的 align-items 的替代属性。
flexbox 的行内和块属性
上面我们都使用的是 display: flex
, 它并没有改变 div 的块元素属性,所以默认占满父容器,我们也可以设置 display: inline-flex
来使其变为行内元素。
flexitem的属性
除了上面的 flexbox 可以添加属性外,我们也可以给 flex item 设置属性:
order
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为 0。
flex-grow
flex-grow 属性定义项目的放大比例,默认为 0,即如果存在剩余空间,也不放大。如果所有项目的 flex-grow 属性都为 1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow 属性为 2,其他项目都为 1,则前者占据的剩余空间将比其他项多一倍。
|
|
上面设置了中间 box 的 flex-grow 为 1 则填充满剩余空间(会Android的朋友很好理解了,这个就类似于权重)。
flex-shrink
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
flex-basis
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。它可以设为跟width或height属性一样的值(比如350px),则项目将占据固定空间。
flex
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。