flexbox布局_Web 和移动端需要掌握的布局方式 Flexbox

Flexbox 布局是一维布局方式，也就是说它会按照 row(行)或者 column(列)对容器中的子元素进行布局。移动端也存在这种布局方式，比如：Android 中的 FlexboxLayout，iOS 中的 yoga(https://github.com/facebook/yoga/tree/master/YogaKit)。几乎所有的平台都会支持这种布局方式，说明它一定有自己的布局优势。

Flexbox 布局是通过 CSS 中的属性 display：flex 来控制的，布局时需要指定一个容器 flex container，然后把要布局的元素放到容器中，这些元素被称为 flex item。我们看一下 MDN 上的一张图：

Flexbox 会把整个布局按两根轴(主轴(main axis)，与主轴交叉的轴(cross axis))来布局。最外层为容器，容器内部为 item。整个布局思路就是按照不同的轴对 item 进行布局。

比如我们想实现下面这种效果：

想实现上面这种布局方式，可以嵌套 2 个 flex 容器：

总之，Flexbox 其实是一种通过一个容器来控制它内容元素的布局方式，容器具有一些属性来控制它内部的元素该如何布局，内部元素也有一些属性来控制元素本身的布局方式。我们一起看看这些属性：

作用于「容器」上的属性

flex-direction: 布局方向，决定子元素要按照什么方向进行布局，也就是「主轴」的方向，主轴的方向不等于 x 轴，这一点需要初学者注意；

.container {    display: flex;    flex-direction: row;    #row 主轴就是 X 轴的方向(默认)    #row-reverse 主轴的相反方向    #column 主轴方向为 Y 轴    #column-reverse 主轴的相反方向}

flex-wrap: 定义子元素「超出」容器后该如何布局;

.container {     display: flex;     flex-direction: row;     flex-wrap: no-wrap | wrap | wrap-reverse; }

flex-flow: 为 flex-direction | flex-wrap 的复合，比如：

flex-flow: row wrap;

justify-content: 「主轴」的对齐方式；

.container {     display: flex;     flex-direction: row;     flex-wrap: wrap;     /* 主轴的对齐方式*/     justify-content:flex-start | flex-end | center | space-between | space-around;}

align-items: 定义交叉轴的对齐方式;

 .container {    display: flex;    flex-direction: row;    /* 交叉轴的方向 */   align-items: center | flex-start | flex-end | stretch | baseline;}

align-content: 如果存在多行，将对多行进行对齐，如果只有一行将不起作用，它会影响 align-items 的对齐方式；

.container {    display: flex;    flex-direction: row;    flex-wrap: wrap;    align-content: flex-start | flex-end | center | stretch | space-around | space-between;}

flex-item 的属性

flex-item 也有自己的属性，通过这些属性可以单独控制自己该如何布局。

order : 控制显示顺序，默认值为 0，可以设置负数和整数。设置第3个孩子的 order 为 -1，其它的孩子都为 0，所以第三个孩子将排到第一个。

span:nth-child(3) {    background-color: #FFC988;    order: -1;}

flex-grow : 表示当容器存在「剩余空间」时，该如何分配剩余空间，默认值为 0，也就是说不会分配剩余空间。它的值为整数，是分配的比例。把第3个元素的 flex-grow 设置成 1，由于其它元素均为 0，那么剩余空间都将会全部分配给第三元素。

 span:nth-child(3) {      background-color: #FFC988;      flex-grow: 1;      order: -1;  }

flex-shrink : 当容器空间不足时该如何缩小子元素，默认值为 1。如果设置为 0，即使容器空间不足，也不会缩小；

flex-basic ：它表示占用的最小空间，计算剩余空间会利用这个值来计算。

span:nth-child(3) {     background-color: #FFC988;     flex-grow: 1;     flex-shrink: 0;     flex-basis: 150px;     order: -1; }

flex ：为 flex-grow, flex-shrink, flex-basic 的混合值，默认为0 1 auto；

align-self : 对齐方式，它默认继承自父元素的 align-items 值，可通过这个属性来修改这个值。设置第三个元素对齐方式为居中对齐。

span:nth-child(3) {    background-color: #FFC988;    flex-grow: 1;    flex-basis: 150px;    align-self: center;}

至此，flexbox 布局就介绍完了，我认为整个布局思路就是围绕轴、容器和子元素进行的，通过设置容器的属性来控制整个容器内部子元素该如何布局，子元素可以单独通过自己的属性来控制自己该如何布局。

周末写了下网站首页，使用 flexbox 进行布局，效果如下：

如果你还没有掌握 flexbox 布局，文末的文章都是我精心挑选出来的，足够你学好 flexbox 布局。

我建了个微信群，供大家交流，欢迎加入一块学习前端

大家加油！！！

参考：

https://www.w3.org/TR/css-flexbox/https://css-tricks.com/snippets/css/a-guide-to-flexbox/https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexboxhttp://www.ruanyifeng.com/blog/2015/07/flex-grammar.htmlhttp://www.ruanyifeng.com/blog/2015/07/flex-examples.htmlhttps://zellwk.com/blog/simple-form-with-flexbox/

推荐阅读：

第3天 - Web UI 布局方式(二)Position

第2天 - Web UI 布局(一) 流式布局

图解前端