关于前端:样式篇-Flex弹性盒子布局建议收藏

一、引言

传统的 CSS 布局根本是 div + css 布局，依赖盒子模型，通过 position、float、display 等形式实现，然而对于一些非凡布局，就不太容易实现，比方垂直居中布局。

2009 年，W3C 提出了一种新的计划 —-Flex 布局，能够简便、残缺、响应式地实现各种页面布局。目前大部分浏览器都曾经反对 Flex 属性。

我也始终在应用 Flex，然而有的属性也只是会用，只知其一; 不知其二，甚至有的属性就没用过，比方: order、flex-grow等。写这篇文章的目标次要还是做个总结与梳理，加深印象。

二、什么是 Flex 布局

Flex 是 Flexible Box 的缩写，意为 ” 弹性布局 ”。

CSS 弹性盒子布局是 CSS 的模块之一，定义了一种针对用户界面设计而优化的 CSS 盒子模型。在弹性布局模型中，弹性容器的子元素能够在任何方向上排布，也能够“弹性伸缩”其尺寸，既能够减少尺寸以填满未应用的空间，也能够膨胀尺寸以防止父元素溢出。子元素的程度对齐和垂直对齐都能很不便的进行操控。通过嵌套这些框（程度框在垂直框内，或垂直框在程度框内）能够在两个维度上构建布局。—— MDN

三、基本概念

3.1、容器

采纳 Flex 布局的元素，称为 Flex 容器（flex container），简称 ”容器 “。它的所有子元素主动成为容器成员，称为 Flex 我的项目（flex item），简称 ” 我的项目 “，也叫flex 元素。

3.2、两根轴线

Flex 的两根轴线，别离是 主轴 和穿插轴 ，能够简略了解为 程度 和竖直 两个方向。默认状况下 主轴 对应的是 程度方向 ， 穿插轴 对应的是 竖直方向 ，然而这个对应关系是能够批改的（通过flex-direction 属性），很多状况下咱们也的确要批改，具体怎么批改上面会讲到。

3.3、起始线和终止线

之前咱们个别都默认文档书写时从左到右的，然而 Flex 没有左右的概念，默认状况下，flex-direction的属性值为 row，意思就是主轴为程度方向，起始线（也就是终点）在右边。flex-direction 属性还有其余属性值，这里先不列举，前面具体说。

四、CSS属性

4.1、应用 Flex 布局

指定一个元素为 Flex 容器非常简单。

.box {display: flex;}

行内元素也能够指定为 Flex 容器。

.box {display: inline-flex;}

Webkit内核的浏览器。

.box{
  display: -webkit-flex; /* Safari */
  display: flex;
}

留神，设为 Flex 布局当前，子元素的 float、clear 和 vertical-align 属性将生效。

4.2、容器的属性

容器能够设置上面 6 个属性：

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

先初始化一下咱们的页面

/* HTML */
<div class="container">
    <div class="item">one</div>
    <div class="item">two</div>
    <div class="item">three</div>
</div>

/* CSS */
.container {
    width: 800px;
    height: 400px;
    margin: 100px auto;
    border: 1px dashed #00f;
}
.item {
    border: 1px solid #000;
    text-align: center;
}

此时咱们的页面是这样的

flex-direction属性

flex-direction属性能够让咱们更改 flex 元素的排列方向（即主轴的方向），它有四个值。

.box {
  flex-direction: row | row-reverse | column | column-reverse;
  /* row（默认）:  主轴为程度方向，终点在左端。*/
  /* row-reverse:  主轴为程度方向，终点在右端。*/
  /* column:  主轴为竖直方向，终点在下面。*/
  /* column-reverse:  主轴为竖直方向，终点在上面。*/
}

留神，当主轴为程度方向时，对应的穿插轴就为竖直方向，反之亦然。

嗯。。。还是看成果吧，首先把容器设置为 flex 容器

.container {
  ...
  display: flex;
}

而后再设置 flex-direction 属性。

成果就不一一展现了，太占中央，放一张比照的效果图。

这样就很清晰了，可能有人曾经留神到了，我的项目在穿插轴方向上都被拉伸了，这是因为有另一个属性的作用，它是align-items，它的作用是管制容器内我的项目在穿插轴上的排列形式，前面会介绍，这里先不具体说。

flex-wrap属性

默认状况下，我的项目都排在一条线（又称 ” 轴线 ”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
  /* nowrap（默认）:  不换行 */
  /* wrap:  换行，第一行在后面 */
  /* wrap-reverse:  换行，第一行在前面 */
}

还是要写一写，首先把下面的 flex-direction 属性改成默认的，或者删除掉，当初成果是这样的

而后，咱们给容器内的我的项目设置宽度，使内容宽度超过容器的宽度

.item {
  width: 300px;  /* 每个我的项目宽度为 300px，总共是 900px */
  ...
}

能够看到，每个我的项目宽度设置为 300px，曾经超过容器宽度的 800px 了，然而我的项目并没有换行，而是被压缩在一行了，接下来看看 flex-wrap 的作用，还是展现比照图。

比照看起来就很明了了，nowrap其实就是默认的属性值，不换行，压缩在容器内展现，wrap和 wrap-reverse 都是换行，然而不同行的展现程序不同。

flex-flow属性

能够将两个属性 flex-direction 和 flex-wrap 组合为简写属性 flex-flow。第一个指定的值为 flex-direction，第二个指定的值为 flex-wrap。默认值为：row nowrap

justify-content属性

justifity-content属性定义了我的项目在主轴上的对齐形式。

justify-content: flex-start;       /* 默认值，左对齐 */
justify-content: flex-end;         /* 右对齐 */
justify-content: center;           /* 居中 */
justify-content: space-between;    /* 两端对齐，我的项目之间的距离都相等（首个元素在终点，开端元素在起点）*/
justify-content: space-around;     /* 平均排列每个元素
                                      每个元素四周调配雷同的空间 */
justify-content: space-evenly;     /* 平均排列每个元素
                                      每个元素之间的距离相等 */

还是看比照图吧

其中 space-around 和space-evenly要分分明，两个都是均匀分布，区别在于容器两端与元素之间的间隔是否相等。

align-items属性

align-items属性定义了我的项目在穿插轴上的对其形式，下面讲 flex-direction 属性的最初说到了这个属性，当初就一起来看看。

align-items: flex-start;   /* 元素向穿插轴的终点对齐 */
align-items: flex-end;     /* 元素向穿插轴的起点对齐 */
align-items: center;       /* 元素在穿插轴居中对齐。*/
align-items: baseline;     /* 我的项目的第一行文字的基线对齐 */
align-items: stretch;      /* 默认，如果我的项目未设置高度或设为 auto，将占满整个容器的高度。*/

能够看到当属性值为 stretch 的时候和一开始的成果是一样的，因为这是默认的属性值。

align-content属性

align-content属性定义了多根轴线在穿插轴上的对齐形式。是 轴线 的对齐形式，不是 我的项目。

align-content: flex-start;     /* 与穿插轴的终点对齐 */
align-content: flex-end;      /* 与穿插轴的起点对齐 */
align-content: center;        /* 在穿插轴居中对齐 */
align-content: space-between; /* 与穿插轴两端对齐，轴线之间的距离均匀散布 */
align-content: space-around;   /* 每根轴线两侧的距离都相等 */
align-content: space-evenly;  /* 均匀分布，两端与每条轴线之间间隔相等 */
align-content: stretch;   /* 默认，轴线占满整个穿插轴 */

这里有个须要留神的中央，当内容高度（也可能是宽度）不固定的时候，align-content默认属性值是 stretch，也就是充斥穿插轴的长度，这时候设置align-items 能够看出成果。

然而如果 align-content 设置为其余属性，align-items设置的属性可能就“生效”了。其实不是生效，因为给 align-content 设置除了 stretch 的属性后，每个主轴的内容高度（也可能是宽度）就被压缩了，这时候再设置 align-items 当然就看不出什么成果了。

最初还是看下比照图

4.3、我的项目的属性

我的项目能够设置上面几个属性

order
flex-grow
flex-shrink
flex-basis
flex
align-self

order属性

order属性定义我的项目（元素）的排列程序。数值越小，排列越靠前，默认为 0。

还是先批改一下页面代码

/* HTML */
<div class="container">
  <div class="item item1">one</div>
  <div class="item item2">two</div>
  <div class="item item3">three</div>
</div>

/* CSS */
.container {
  width: 800px;
  height: 400px;
  margin: 100px auto;
  border: 1px dashed #00f;
  display: flex;
  align-items: flex-start;
}
.item {
  width: 200px;
  margin: 20px 0;
  border: 1px solid #000;
  text-align: center;
}

当初成果是这样

减少 CSS 代码

.item1 {order: 3}

.item2 {order: 2}

.item3 {order: 1}

能够看到，排列程序产生了变动，order值越小，排列越靠前，还能够为正数。

flex-grow属性

flex-grow属性定义我的项目的放大比例，默认为 0，即如果存在残余空间，也不放大。

先复原一下代码，别离增加代码

/* 给所有我的项目都设置为 1 */
.item {flex-grow: 1;}

/* 只给 item1 设置 */
.item1 {flex-grow: 1;}

/* 只给 item1 和 item2 设置 */
.item1 {flex-grow: 1;}
.item2 {flex-grow: 1;}

而后看下比照

能够看到如果只给一个元素设置 flex-grow 大于 0 的属性，那个这个元素会占据残余空间。

如果给多个元素设置雷同的 flwx-grow 属性，那么这些元素会平分残余空间。

还有一种状况我没列举，给不同元素设置不同大小的 flex-grow 属性，这时候会依据 flex-grow 的大小调配不同大小的空间。

下面说的都是在容器有残余空间的状况下，如果我的项目充斥了容器，name 设置 flex-grow 是没成果的。

flex-shrink属性

flex-shrink属性指定了 flex 元素的膨胀规定。flex 元素仅在默认宽度之和大于容器的时候才会产生膨胀，其膨胀的大小是根据 flex-shrink 的值，默认为 1。

.container {width: 400px;  /* 容器宽度小于我的项目宽度之和 */}
.item1 {flex-shrink: 2;}

能够看到第一个元素被压缩的水平是其余两个的 2 倍。这是因为 flex-shrink 默认值为 1，第一个元素咱们设置为 2。

flex-basis属性

flex-basis属性指定了 flex 元素在主轴方向上的初始大小。如果不应用 box-sizing 扭转盒模型的话，那么这个属性就决定了 flex 元素的内容盒（content-box）的尺寸。

当咱们设置为 auto 时，就是应用我的项目原本的宽度。

flex属性

flex属性是 flex-grow, flex-shrink 和 flex-basis 的简写，默认值为0 1 auto。后两个属性可选。

有几种写法：

单值语法

• 一个不带单位的数值，会被当做 flex-grow 的属性值。
• 一个无效的宽度值（如：10px），会被当做 flex-basis 的属性值。
• 关键字 none，auto 或initial。

双值语法

第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。第二个值必须为以下之一：

• 一个无单位数：它会被当作 <flex-shrink> 的值。
• 一个无效的宽度值（如：10px），会被当做 flex-basis 的属性值。

三值语法

• 第一个值必须为一个无单位数，并且它会被当作 <flex-grow> 的值。
• 第二个值必须为一个无单位数，它会被当作 <flex-shrink> 的值。
• 第三个值必须为一个无效宽度值，它会被当作 <flex-basis> 的值。

flex: auto;  /* 相当于 flex: 1 1 auto */
flex: none;  /* 相当于 flex: 0 0 auto */

align-self属性

align-self属性能够设置单个我的项目与其余我的项目不一样的对齐形式，能够笼罩 align-items 属性，默认值为 auto，示意继承父元素的align-items 属性。

align-self的属性值和 align-items 是一样的，只不过多了一个auto。

上图中给容器设置了 align-items: flex-start;，而后独自给第一个元素设置了align-self: flex-end; 能够看到该元素和其余的元素排列形式不同。

ok，概念和语法的货色大略就说这么多，也参考了很多材料，有什么补充和谬误之处还请斧正，非常感谢！！！

感觉有用的话能够点赞 + 珍藏哦！

参考资料：

• MDN – CSS 弹性盒子布局
• 阮一峰 – Flex 布局教程：语法篇