CSS flexbox弹性布局

2019-07-26 · 大约 500 个字 · 预计 3 分钟读完

Web前端 · CSS

Web前端 · CSS · flex · flexbox

初识flex

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

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

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

基本使用

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

1
2
3
4
5
6
7
<body>
    <div class="flexbox">
        <div class="flexitem">我是 DIV 标签内容</div>
        <p class="flexitem">我是 P 标签内容</p>
        <span class="flexitem">我是 SPAN 标签内容</p>
    </div>
</body>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.flexbox{
    width: 600px;
    height: 200px;
    margin: 50px auto;
    background: bisque;
}

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

display: flex

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

1
2
3
4
5
6
7
.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

1
2
3
4
5
6
7
8
.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 属性让居中显示：

1
2
3
4
5
6
7
8
9
.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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
.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 数大于一行的时候就会得到可能不是我们需要的效果，效果如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
.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，则前者占据的剩余空间将比其他项多一倍。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
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。