本笔记主要用于本人备忘,如要查询具体API还请上网查询.

以往网页布局主要实现方式是div+position+float,当flex出现之后让网页布局变得简单起来

一.什么是flex布局

flex布局中文翻译过来就是弹性布局,用来盒模型提供最大的灵活性

二.flex布局如何实现弹性布局

那么flex是如何实现弹性布局的呢?具体方法是当你给一个盒子设置flex属性的时候,此时会将在盒子设置为一个容器,并将盒子内的子元素全部设置为容器成员,称为flex项目.
同时容器中存在两个轴:一条水平的主轴和一条水平的交叉轴.同时规定了轴的开始位置与结束位置.
flex就是通过改变主轴的位置和项目的位置来进行各种方式的布局的.

三.容器的属性

flex-direction //主轴和交叉轴的方向(正排或者倒排)
flex-wrap  //轴线是否换行
flex-flow  //flex-direction和flex-wrap属性的简写
justify-content  //主轴的对其方式
align-items  //交叉轴的对其方式
align-content //多轴线的轴线对其方式

3.1flex-direction属性

他可能有四个值

row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

3.2flex-wrap属性

nowrap（默认）：不换行。
wrap：换行，第一行在上方。
wrap-reverse：换行，第一行在下方。

3.3flex-flow

前两个属性的简写

3.4justify-content属性

flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

3.5align-items属性

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

3.6align-content属性

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

四.项目的属性

order  //定义项目的排列序列.数值越小排列越靠前
flex-grow  //定义项目的放大比例,如有剩余空间也不放大
flex-shrink  //定义项目的缩小比例,即如果空间不足,该项目将缩小
flex-basis  //定义项目占据主轴空间的大小,即项目大小
flex  //flex属性是flex-grow, flex-shrink 和 flex-basis的简写
align-self  //定义单个项目与其他项目不一样的对其方法

flex布局