flex布局指令详解

flex布局的优势

相较于传统的盒模型，使用flex不仅让代码拥有更清晰的结构，还大幅减少了布局代码的书写量。基于传统盒模型的布局，通常设置display和position以及float属性来完成布局，这样虽然也能实现大部分的布局样式，但其布局代码往往让人难以琢磨，可读性也很不友好。而基于flex的布局则完美的结局了这些问题，下面我们就一起来探究flex布局，你就能明白为什么flex布局为什么这么受欢迎了。

flex基本概念

flex是flex container的缩写，称作弹性盒模型，flex正如其名，天生就很灵活，因此使用flex布局能够简单高效的完成各种布局样式。
使用flex布局，要设置元素的display为flex,或者inline-flex，设置完成后，其子元素自动成为容器元素(flex-item)

flex属性详解

在flex容器上一共有两个轴，分别为主轴(main axis)和交叉轴(cross axis)，主轴既可以是水平方向也可以是垂直方向，交叉轴是与主轴垂直的方向，通过设置flex-direction属性，我们可以自由改变容器主轴的方向。

flex容器有以下属性，熟练的使用这些属性，任何flex布局都难不倒你了。

flex-direction

该属性设置flex容器主轴的方向，共有四个个值

• column； 垂直方向为主轴
• column-reverse； 垂直方向-逆序
• row； 设置水平方向为主轴
• row-reverse； 水平方向-逆序

justify-content

设置主轴方向上子容器的对齐方式，共有五个值

• flex-start; 子容器从主轴开始向结束方向对齐
• flex-end；子容器从主轴结束向开始对方向齐
• center; 子容器居中对齐
• space-between; 两端对齐，项目之间的间隔都相等。
• space-around; 每个项目两侧的间隔相等
  

align-items

设置交叉轴方向上子容器的对齐方式，共有五个值

• flex-start; 子容器从主轴开始向结束方向对齐
• flex-end；子容器从主轴结束向开始对方向齐
• center; 子容器居中对齐
• baseline; 项目的第一行文字的基线对齐。
• stretch; 设置子元素拉伸，默认为真个容器高度
  

flex-wrap

在子容器宽度大于父极元素宽度的情况下，设置子容器是否自动向下换行。有下面三个取值

• nowrap; 默认情况，不换行
  
• wrap; 换行
  
• wrap-reverse; 换行-逆序排列
  

align-centent

在设置flex-wrap属性为wrap或者wrap-reverse，的前提下，容器有多根轴线，此时align-content属性将决定几个这几根轴线的对齐方式，有一下6种取值

• flex-start：与交叉轴的起点对齐。
• flex-end：与交叉轴的终点对齐。
• center：与交叉轴的中点对齐。
• space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
• space-around：每根轴线两侧的间隔都相等。
• stretch（默认值）：轴线占满整个交叉轴。
  

flex-flow

使用flex-flow属性可以同时设置flex-direction和flex-wrap属性，使用方式，默认情况flex-flow: row nowrap。