Flex布局语法

1. 容器中的属性

Flex被称为弹性布局，弹性盒子

display: flex;

display: inline-flex;

display: -webkit-flex; /* Safari */  //Webkit内核的浏览器，必须加上-webkit前缀。

容器中有6个属性

flex-direction

flex-warp

flex-flow

justify-content

align-items

align-centent

第一个是flex-direction，他代表项目的方向

flex-direction: row | row-reverse | column | column-reverse;

row代表的水平方向，起点在左边（默认）

row-reverse 也是水平方向，起点在右边

column  垂直方向 ，起点上面

column-reverse 垂直方向，起点在下面

第二个flex-warp属性， 代表的是换行的规则

  flex-wrap: nowrap | wrap | wrap-reverse;

nowrap 代表不换行（默认）

wrap 代表换行，第一行在上面

wrap-reverse  换行，第一行在下面

第三个flex-flow属性 他是flex-direction和flex-wrap简写

flex-flow:<flex-direction> <flex-wrap>; //两个属性并写在一个flex-flow上面默认值为row  nowrap

第四个justify-content 项目 在主轴上的对齐方式（左右对齐方式）

justify-content: flex-start | flex-end | center | space-between | space-around

flex-start //向左边对齐 （默认）

flex-end //向右对齐

center //居中对齐

space-between //两端对齐  效果图中的 center 和start 和 end 之间距离相等

space-around // 效果图中center  根 start 和 end 的距离相等，也等于start 和 end 距离边框距离的两倍

space-between 的效果

space-around

第五个 align-items 项目在交叉轴上的对齐方式（上下对齐方式）

align-items: flex-start | flex-end | center | baseline | stretch;

flex-start  //交叉轴起点对齐（项目位于容器的开头   垂直对齐开始位置）

flex-end   //交叉轴的终点对齐（项目位于容器的结尾   垂直对齐结束位置）

center    //交叉轴终点对齐（项目位于容器的中心   垂直居中）

baseline   //项目的第一行文字的基线对齐。

stretch //如果项目未设置高度或设为auto，将占满整个容器的高度。（项目被拉伸以适应容器   让子元素的高度拉伸适用父容器 子元素不给高度的前提下）

第六个 align-content 项目中多根轴线的对齐方式。如果只有一根轴线，不起作用。

 align-content: flex-start | flex-end | center | space-between | space-around | stretch;

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。

2.项目属性，设置在项目的属性

order     //排序顺序（数字大小决定）

flex-grow  // 放大比例（数字大小决定）

flex-shrink  //缩小比例（数字大小决定）

flex-basis

flex

align-self

order: <integer>;     //排列顺序。数值越小，排列越靠前，默认为0。

flex-grow: <number>; /* default 0    放大比例，默认为0，即如果存在剩余空间，也不放大。*/   

flex-shrink: <number>; /* default 1  缩小比例，默认为1，即如果空间不足，该项目将缩小。*/ 

flex-basis: <length> | auto; /* default auto   项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/ 

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]  //属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

align-self: auto | flex-start | flex-end | center | baseline | stretch; //除了auto，其他都与align-items属性完全一致。可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。