CSS flexbox弹性布局

初识flex

之前我们写布局都是基于浏览器的盒模型,通过浮动的方式来排列界面的,这种方式有很多浏览器的 bug 和困扰我们的问题, 而 flexbox 的出现彻底解决了这些之前被人们诟病的问题。

flexbox 是基于两个坐标轴来实现的, 类似于 Android 中的线性布局 LinearLayout, 如果我们要使一个容器成为 flexbox 就需要设置 display: flex;

flex 容器内部的元素称为 flex item, 水平轴称为 main axis, 竖直轴称为 cross axis, 大致布局如下:

基本使用

我们先来定义一个 flexbox 容器, 在里面放几个 flexitem:

<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

.flexitem{
    background:brown;
    color:white;
}

display: flex

接下来见证奇迹的时刻,给 .flexbox 添加 display: flex; 如下:

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
    display: flex;
}

为了看的清除我清除了元素的 padding 和 margin 并分别设置了背景,我们发现在 flexbox 容器内,所有块元素和行内元素都会变成和父容器高度相同,宽度自适应的方块。

flex-direction

flex-direction属性决定主轴的方向(即项目的排列方向), 上面默认的是 flex-direction: row.

  • row(默认值):主轴为水平方向,起点在左端。
  • row-reverse:主轴为水平方向,起点在右端。
  • column:主轴为垂直方向,起点在上沿。
  • column-reverse:主轴为垂直方向,起点在下沿。

例如我们设置为 row-reverse

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
    display: flex;
    flex-direction: 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 属性让居中显示:

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
    display: flex;
    flex-direction: column;
    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

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

align-content

align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

  • flex-start:与交叉轴的起点对齐。
  • flex-end:与交叉轴的终点对齐。
  • center:与交叉轴的中点对齐。
  • space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
  • space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
  • stretch(默认值):轴线占满整个交叉轴。

上面的设置已经能解决所有只有一行或者一列的情况,但是当我们的 box 数大于一行的时候就会得到可能不是我们需要的效果,效果如下:

.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}

为了方便查看, 将主轴方向设置为了水平方向,并添加了 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,则前者占据的剩余空间将比其他项多一倍。

div.flexitem {
    background:brown;
    order: 2;
    flex-grow: 1;
}

p.flexitem{
    background: yellow;
    color:black;
    order: 1;
}

span.flexitem {
    background: green;
    order: 3;
}

上面设置了中间 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。