欢迎使用CSDN-markdown编辑器

【前端工程师系列】弹性布局盒子FlexBox

标签（空格分隔）： css flex

弹性布局主要应用到移动端页面，比如在微信端，移动浏览器。在移动端布局的选择上：流式布局>浮动>定位。

入门@理解知识

假定HTML结构如下：

<div class="box">
<div class="item">200</div>
<div class="item">400</div>
<div class="item">200</div>
</div>

容器布局

行内元素用inline-flex

.box{
display: flex;//display: inline-flex
}

容器的属性

控制容器内元素的排列方向

flex-direction：容器内项目的排列方向

.box {
flex-direction: row | row-reverse | column | column-reverse;
}

在线实例

align-items: 容器内项目的垂直对齐方式

.box {
align-items: stretch | flex-start | flex-end | center | baseline ;
}

flex-direction 容器内元素水平对齐方式

.box {
justify-content: flex-start | flex-end | center | space-between | space-around;
}

容器内元素属性

当排列完子元素还有剩余空间，通过flex-basis设置子元素的宽度，通过flex-grow扩张；

当排列完子元素没有剩余空间时，通过flex-shrink收缩

flex-basis：分配剩余空间前占据的空间，相当于宽度

.item {
flex-basis: auto | <length>; /* default auto */
}

flex-grow：扩张比例

.item{
flex-grow: <number>;
}

flex-shrink：收缩比例 当剩余空间为负数时，宽度和flex-grow 或者flex-basis都不会起作用

比如剩余空间为-200，如果没有定义收缩比，则按照 三个子元素的宽度为200，400，200，200n+400*2n+200n=400确定收缩比为1/3

如果定义了收缩比，则按照收缩比计算，比如1，100，1。计算的宽度为200n+400*100n+200=400 ，计算得到收缩比n为：1/101。

按照情况2的方式计算，元素2的宽度400-400*100*（1/101） 几乎为0。这个时候元素2没有空间了，肯定不行的。那怎么办？假定元素2要能显示完整内容占据的最小宽度是28.16，则只能收缩掉400-28.16=371.84。剩余28.16按它们的比例收缩给其他两个元素：200-28.16*1/2=185.92。元素宽度为28.16， 其他两个元素占的宽度为185.92。

在线例子

.item{
flex-shrink: <number>;
}

flex 是 flex-grow，flex-shrink，flex-basis 的简写

.item{
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

语法解析：一个值的话，比如flex:1, 这里的1指的是flex-grow; 而如果是flex: 200px 指的就是flex-basis。三个值的话可以这么写：flex: 200px 1 100。这三个值分别是flex-basis,flex-grow, flex-shrink。

进阶@常见问题&工具

一般在实际写Flex的时候要考虑浏览器的不同和各种兼容写法，肯定是要用到库的。一般比较常用的是bourbon。

//todo

具体请看代码&文档

实战@TODO