前端学习之路14-CSS-flex布局

前一部分略微谈论了一下flex布局。本篇详细介绍一下flex的用法

引入

.box{
  display: flex;
}

属性

属性	选项	含义
flex-direction	row | row-reverse | column | column-reverse;	决定主轴的方向（即项目的排列方向）
flex-wrap	nowrap | wrap| wrap-reverse	如果一条轴线排不下，如何换行
flex-flow		属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
justify-content	flex-start | flex-end | center | space-between | space-around;	项目在主轴上的对齐方式
align-items	flex-start | flex-end | center | space-between | space-around	stretch
align-content		定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

项目属性

属性	选项	含义
order	int	排列顺序，类似Android的权重 数值越小，排列越靠前，默认为0。
flex-grow	int	flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink		项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-basis		在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
flex		flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选
align-self	auto | flex-start | flex-end | center | baseline | stretch	允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

flex的flex-grow类似Android中的权重。flex:1 => weigh=1000

图片实例参考，菜鸟教程或者阮一峰博客内容。

为什么使用flex？
对于有app开发经验的开发来说，使用css进行布局要掉头发，随着css的发展，web技术也发生了不少变化，问道为什么使用flex，可以想一想如果不用会损失什么。

1. 布局繁琐。延续老的布局技术栈，使用table标签或者使用css的table来布局。
2. table 比其他html标签占更多的字节。造成下载时间延迟，占用服务器更多的流量资源（代码冗余）。
3. table 会阻挡浏览其渲染引擎的渲染顺序，会延迟页面的生成速度，让用户等待时间更久。
4. 灵活性差，一旦设计确定，后期很难通过CSS让它展现新的面貌。
5. 不利于搜索引擎抓取信息，直接影响到网站的排名。
   在css3里，推荐使用css的display: table进行布局，但是仍然有使用不方便的地方，比如要实现居中，等分排列，周围排列的布局。这一类的问题在flex中有非常简单的实现方式，用css解决的不用繁多的div来增加代码量。