学习笔记：flex布局知识点及常用布局归纳整理

传统布局方式基于盒状模型（display + position + float ），能解决大部分布局问题，但对于一些特殊的复杂布局以及垂直居中布局，显然 flex 布局（弹性布局）拥有更大的优势。熟悉掌握 flex 布局及拥有一套常用的布局总结，能帮助我们高效的进行前端开发。

阮一峰 flex 布局博客：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool

新旧 flex 布局兼容性写法：https://www.w3cplus.com/css3/using-flexbox.html

---

一、浏览器兼容性

来自阮一峰的网络博客

flex 布局对于大部分浏览器兼容性较好，主要问题在于不支持10以下的 IE 浏览器版本，如果你的项目对于兼容性要求较高，需要兼容旧版浏览器，建议慎用 flex 布局。但它对移动端的兼容性较好，本人也主要将其用在移动端的开发上。

二、基本概念

（1）盒状模型

如上图所示，盒子模型由 margin、border、padding、content 四部分组成，再结合 display（block 块状元素、inline 内联元素、inline-block 内联块状元素），position （relative 相对定位、absolute 绝对定位、fixed 固定定位），float 浮动对页面进行布局。

（2）flex 弹性布局

采用 flex 布局的容器称为 flex 容器（flex container），当一个元素采用 flex 布局后，它的子元素将自动成为容器成员（flex item）。

如下图所示，flex 容器默认存在2根轴线，主轴（main axis，默认为横轴）和交叉轴（cross axis，默认为纵轴），flex 布局所有的属性都围绕这2条轴线上的元素如何布排进行设定。

来自阮一峰的网络博客

总结：盒状模型通过元素与自身、元素与父元素、元素与屏幕的定位来实现页面布局，而 flex 布局则打破了这种模式，它是对 flex 容器进行主轴、交叉轴的布局设定，使其内部所有的元素都遵循这种设定进行布局。无疑，采用 flex 布局方案能以更少的代码量和效率实现更复杂的布局要求（不考虑旧版浏览器兼容情况下）。

三、常用属性

（1）容器（flex container）属性：6个

1、flex-direction，决定主轴上元素的排布方向，有4种取值

row：默认值，主轴为水平方向且起点在左端

row-reverse：主轴为水平方向且起点在右端

column：主轴为垂直方向且起点在上方

column-reverse：主轴为垂直方向且起点在下方

2、flex-wrap，定义换行方式，当一条轴线放不下时如何换行，有3种取值

nowrap：默认值，不换行

wrap：换行

wrap-reverse：换行且第一行在下方

3、flex-flow，是flex-direction属性和flex-wrap属性的简写形式，默认值为 row nowrap（主轴在横轴，不换行）

4、justify-content，定义了子元素在主轴上的对齐方式，有5种取值（排布与主轴方向有关，下面假设主轴为横轴）

flex-start ：默认值，左对齐，从左至右按顺序排列

flex-end：右对齐，从右至左按顺序排列

center：居中排列

space-between：两端对齐，最左与最右的元素与容器边界无间隔，元素与元素间的距离相等

space-around：等距对齐，元素两侧间隔相等，元素与元素之间的距离是最两端元素与容器边界距离的2倍，

来自阮一峰的网络博客

5、align-items，定义在交叉轴上的项目如何对齐，有5种取值。

flex-start：以交叉轴的起点对齐

flex-end：以交叉轴的终点对齐

center：以交叉轴的中点对齐

strench：如果项目未设置高度或设置为 auto，将占满整个容器

baseline：以项目第一行文字的基线对齐

来自阮一峰的网络博客

6、align-content，定义了多根轴线的对齐方式，有6种取值。（当轴线只有一条时，该属性不起作用）

flex-start：与交叉轴的起点对齐

flex-end：与交叉轴的终点对齐

center：与交叉轴的中点对齐

space-between：与交叉轴两端对齐，轴线之间的间隔相等

space-around：轴线之间的间隔相等，轴线间的距离是轴线与交叉轴起点、交叉轴终点距离的两倍。

stretch：默认值，轴线占满整个交叉轴

（2）项目（flex item）属性：6个

1、order，定义项目的排列顺序，数值越小，排列越靠前，默认都为0

2、flex-grow，定义项目的放大比例，默认都为0，即使有剩余空间也不放大。如果都设为1，则所有项目将等分空间。如果有一个项目设为2而其它项目设为1，则该项目占据的空间是其它项目的2倍。

3、flex-shrink，定义了项目的缩小比例，默认都为1， 既当空间不足时，所有项目都将等比例缩小。如果设为0，则当空间不足时，该项目也不缩小。

4、flex-basis，定义项目占据的主轴空间，浏览器根据这个属性计算是否有多余空间。默认值为 auto，即项目本来的大小，也可设置固定空间。

5、flex，是 flex-grow、flex-shrink 和 flex-basis 的简写，默认为0 1 auto。该属性有2个快捷值，auto（1 1 auto）和 none（0 0 auto），建议优先使用这2个属性，而不是单独写3个分离的属性，因为浏览器会推算相关值。

6、align-self，允许单个项目能够有和其它项目不一样的对齐方式，可覆盖 align-items 属性。默认值为 auto，表示继承父元素的 align-items 属性。

四、常用布局总结

在开展一些前端项目时，会发现很多页面布局都是相似和重复的，此时若把公共布局样式都抽离出来，需要时再调用，对于减少代码量、提高效率和后续修改都是非常有利的。以下为平时总结的一些通用布局代码（父元素调用）：

//上下左右居中

.box-center {

  display: flex;

  justify-content: center;

  align-items: center;

}

// item 两端对齐（左右两端不留空间）

.item-between{

  display: flex;

  justify-content: space-between;

}

//item 两端对齐且上下居中（主轴在横轴）

.lr-bettem{

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}

//item 从左到右排列，且上下居中（主轴在横轴）

.lr-start{

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

  align-items: center;

}

//item 从左到右排列，上下不居中

.lr-start2{

  display: flex;

  flex-direction: row;

  justify-content: flex-start;

}

//item从右到左排列，且上下居中

.lr-end {

display: flex;

flex-direction: row;

justify-content: flex-end;

align-items: center;

}

// item 上下两端对齐（主轴在纵轴）

.ud-bettem{

  display: flex;

  flex-direction: column;

  justify-content: space-between;

}