flex弹性盒子

了解弹性盒子

display：flex;  通过给父盒子添加flex属性，来控制盒子的位置和排列方式

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

容器属性(6 个):	项目属性（6个）
flex-direction 主轴方向	order
flex-wrap 主轴换行方式	flex-grow
flex-flow 符合形式	flex-shrink
justify-content 主轴对齐方式	flex-basis
align-items 交叉轴对齐方式	flex
align-content 多根主轴对齐方式	align-self

flex-direction 决定主轴方向

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

flex-wrap 换行

用法  flex-wrap:wrap/nowrap/wrap-reverse;

wrap 换行    no-wrap 不换行   

wrap-reverse      伸缩项目无法容纳时，自动换行，方向和正常wrap相反

justify-content 定义项目在主轴上的对齐方式【使用的多】

    flex-stsrt    左侧对齐

    center       居中对齐

    flex-end     终点对齐

    space-between 两端对齐

    space-around 空白间距均分在项目两侧

    space-evenly  项目两端间距相等

align-content属性起作用的条件【针对多行主轴】（垂直方向）

对父元素设置自由盒属性display:flex;

并且设置排列方式为横向排列flex-direction:row; （默认值）

设置换行，flex-wrap:wrap;

   flex-stsrt    顶部对齐

    center       居中对齐

    flex-end     底部对齐

    stretch

    space-between 两端对齐

    space-around 空白间距均分在项目两侧

align-items 项目在交叉轴上对齐方式【针对单个主轴】

    

语法：align-items:flex-end 属性值：

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

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

center：交叉轴的中点对齐。

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

stretch（默认值）：如果项目未设置高度或设为 auto，项目将占满整个容器的高度。

order 控制伸缩项目的出现顺序

数值越小，越靠近主轴起点

flex-grow 放大比例 / flex-shrink 缩小比例

面试题：flex:1 1 auto 是什么意思

flex：是flex-grow，flex-shrink和flex-basis的简写 flex-grow：定义项目的的放大比例； flex-shrink：定义项目的缩小比例； flex-basis： 定义在分配多余空间之前，项目占据的主轴空间（main size），浏览器根据此属性计算主轴是否有多余空间，

• 默认值为auto，即 项目原本大小；

• tranform：rotate3D( 0/1 ,y,z,deg);

• 数据类型：布尔值（true 1/false 0）

所以flex属性的默认值为：0 1 auto （不放大会缩小） flex为none：0 0 auto （不放大也不缩小） flex为auto：1 1 auto （放大且缩小）