Flex弹性盒布局

1.传统网页布局

传统网页布局的解决方案是基于盒状模型，依赖 display属性 + position属性 + float属性。使用的属性如下：

/*-------下面是依次说到的属性---------*/
/*盒模型*/
padding:0
border:0
margin:0
width:0
height:0

/*display属性*/
display:inline|block|inline-block|none|inherit
/*position属性*/
position:static|relative|absloute|fixed|inherit
/*float属性*/
float:none|left|right|inherit

/*-------下面是常见的常见及解决方案---------*/
/*水平居中*/
#main{
  margin:0 auto
}
/*内边距和边框不增加其宽度*/
box-sizing:content-box|border-box|inherit
/*浏览器窗口比元素的宽度还要窄，出现滚动条*/
max-width:960px
/*清除浮动*/
clear:none|left|right|both|inherit

/*----下面是常见的布局类型，完整网页会运用其一种或多种--------*/
/* 
1.传统布局
2.相对绝对布局
3.浮动布局
4.百分比宽度布局
5.媒体查询 
*/

2.什么是Flex弹性盒布局？有什么意义？

display:flex;/*W3C 2012年第5次草案及以后的候选推荐标准*/
display:flexbox;/*W3C 2011年第2次草案提出，已过时*/
display:box;/*W3C 2009年第1次草案提出，已过时*/

Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 没错，只需记住display:flex就是弹性盒布局，意义是能简单实现布局，如：垂直居中。

3.兼容性根本不是事

注意：设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

4.Flex基本概念

采用Flex布局的元素，称为Flex容器（flex container），简称"容器"。 它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称"项目"。 容器默认存在两根轴：主轴和交叉轴， 项目默认占据两个空间：主轴空间和交叉轴空间。

5.容器属性

容器属性一共有6个，分别是：

flex-direction flex-wrap flex-flow justify-content align-items align-content

1）flex-direction属性 flex-direction属性决定项目的排列方向。

/**下图依次所对应的属性**/
flex-direction:row（左到右）
flex-direction:row-reverse（右到左）
flex-direction:column（上到下）
flex-direction:column-reverse（下到上）

2）flex-wrap属性 flex-wrap属性定义，如果一条轴线排不下，如何换行。

flex-wrap:nowrap（不换行）
flex-wrap:wrap（换行，从上到下）
flex-wrap:wrap-reverse（换行，从下到上）

3）flex-flow属性 flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

flex-flow: <flex-direction> || <flex-wrap>

4）justify-content属性 justify-content属性定义项目在主轴上的对齐方式。

/**下图依次所对应的属性**/
justify-content:flex-start（左对齐）
justify-content:flex-end（右对齐）
justify-content:center（居中）
justify-content:space-between（两端对齐，项目之间的间隔都相等）
justify-content:space-around（项目之间的间隔都相等）

5. align-items属性 align-items属性定义项目在交叉轴上的对齐方式。

/**下图依次所对应的属性**/
align-items:flex-start（上对齐）
align-items:flex-end（下对齐）
align-items:center（居中）
align-items:stretch（项目被拉伸以适应容器）
align-items:baseline（项目的第一行文字的基线对齐）

6）align-content属性 align-content属性定义多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

/**下图依次所对应的属性**/
align-items:flex-start（上对齐）
align-items:flex-end（下对齐）
align-items:center（居中）
justify-content:space-between（两端对齐，项目之间的间隔都相等）
justify-content:space-around（项目之间的间隔都相等）

6.项目属性

项目属性一共有6个，分别是：

order flex-grow flex-shrink flex-basis flex align-self

1）order属性 order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order:<integer>

2）flex-grow属性 flex-grow属性定义项目的放大比例，默认为0。

flex-grow:<integer>

3）flex-shrink属性 flex-shrink属性定义项目的缩小比例，默认为1。

flex-shrink:<integer>

4）flex-basis属性 flex-basis属性定义项目占据的主轴空间。

flex-basis:60px

5）flex属性 flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

flex:<flex-grow> || <flex-shrink> || <flex-basis>

6）align-self属性 align-self属性定义项目单独在交叉轴上的对齐方式。

/**下图依次所对应的属性**/
align-items:flex-start（上对齐）
align-items:flex-end（下对齐）
align-items:center（居中）
align-items:stretch（项目被拉伸以适应容器）
align-items:baseline（项目的第一行文字的基线对齐）

总结一下： 1.容器属性使用： flex-flow决定方向和换行 justify-content决定主轴对齐方式 align-items决定单根轴线的交叉轴对齐方式 align-content决定多根轴线的交叉轴对齐方式 2.项目属性使用： order决定排序顺序 flex决定项目的缩放比例 align-self决定单个的交叉轴对齐方式

剩下的就是要靠自己去实战了！