CSS3布局神器 - Flexbox

display:flex是CSS3的新特性，是一个强大的布局神器。
在传统的布局中，通常使用浮动float、position，虽然能很好进行布局，但自从接触flex后，对前端的布局来说简直就是一种解放。

上图为 flex在各浏览器和设备上的兼容性问题，可见除了 IE浏览器外基本都支持了这一特性。不过即使这样也不用担心，还记得 postcss的 autoprefixer插件吗？结合 webpack即可解决兼容问题。

使用flex只需在父元素上定义display:flex,然后子级的所有元素都具有了flex功能。
index.html

<div class="box">
    <div class="box-item">1</div>
    <div class="box-item">2</div>
    <div class="box-item">3</div>
    <div class="box-item">4</div>
    <div class="box-item">5</div>
</div>
复制代码

index.css

.box { display:flex; }
.box-item { margin:5px; width:100px; height:100px; background:red; }
复制代码

现在.box以及子元素都具备了flex特性，可以通过相应特性进行个性化布局，接下来将逐一介绍每一个特性。

flex术语图示

flex的两根轴

主轴水平方向
交叉轴垂直于主轴

这些属性应用在父级元素上

flex-direction

row 设置主轴为水平（默认从左到右）
row-reverse 设置主轴为水平（从右到左）
column 设置主轴为垂直（默认从上到下）
column-reverse 设置主轴为垂直（从下到上）

flex-wrap

nowrap 不自动换行（默认）
wrap 自动换行
wrap-reverse 从下到上开始换行

flex-flow

是flex-direction和flex-wrap的简写属性

justify-content

控制主轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 使项目之间的间隔相等

align-items

控制单行交叉轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中 baseline 基线对齐
stretch 默认撑满整个容器高度

align-content

控制 多行交叉轴的对齐方式
flex-start 左对齐
flex-end 右对齐
center 居中
space-between 两端对齐
space-around 使项目之间的间隔相等

注意：如果垂直方向没有设置高度，那么align-items和align-content会失效

---

下面的几个属性是用于单个项目里面

align-self

覆盖align-items而在单独项目生效例子：align-self:flex-start;

order

改变项目位置，数值越小越靠前，可以是负数 例子：order:-1;

flex-grow

设置放大比例（无单位）例子：flex-grow:2;

flex-shrink

设置当空间不足时的收缩比例（无单位）例子：flex-shrink:2;

flex-basis

设置初始大小（有单位） 例子：flex-basis:20%;

flex

是flex-grow、flex-shrink、flex-basis的简写属性

• 单值（选其中之一）
  一个无单位数(): 它会被当作flex-grow的值。
  一个有效的宽度(width)值: 它会被当作 flex-basis的值。
  关键字none, auto,或initial.
  例子：flex:auto;
• 双值
  第一个值必须为flex-grow。
  第二个值可以是flex-shrink或者flex-basis

例子：flex:2 2;

• 三值
  flex-grow>
flex-shrink>
flex-basis>
例子：flex:1 1 auto

参考文档

• 使用盒模型
• flex简写属性