弹性盒模型，flex布局

弹性盒模型

弹性盒子是css3的一种新布局模式，由容器（父元素）和项目（子元素）组成。

弹性盒子是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒模型的目的：提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白区间。

设置弹性盒子：display:flex或inline-flex; 区别：flex独占一行；inline-flex占据自己应该占据的位置，有点像inline-block，不支持margin:auto。

容器属性

1.flex-direction 确定主轴和方向

row 默认，从左到右row-rever 从右到左column 从上到下column-rever 从下到上

2.flex-wrap 规定项目是否换行

nowrap 默认，不换行wrap 换行，交叉轴从上到下wrap-rever 换行，第一行在下，交叉轴从下到上

3.flex-flow 复合属性，flex-direction和flex-wrap组成的复合属性

row nowrap 默认，从左到右不换行

4.justify-content 项目在主轴上的对齐方式

flex-start 默认，主轴起点对齐flex-end 主轴终点对齐center 主轴居中对齐space-between 主轴上项目两端对齐，项目之间间隙平分空白space-around 社交主轴上的项目两侧间隔相等

530字日记大全.align-content 多行项目在交叉抽（与主轴垂直）上的对齐方式，不要和align-items共存

stretch 默认，不设置项目高度的时候，占满平分整个交叉轴flex-start 交叉轴起点对齐flex-end 交叉轴终点对齐center 交叉轴居中对齐space-between 交叉轴上项目两端对齐，项目之间间隙平分空白space-around 交叉轴上项目两侧间隔相等

6.align-items 单行项目在交叉轴上的对齐方式

stretch 默认，不设置高度（竖直时）或宽度(水平时)占满整个交叉轴flex-start 交叉轴的起点对齐flex-end 交叉轴的终点对齐center 交叉轴的中游戏cp名间对齐baline 文字基线对齐

项目属性

1.flex-grow 设置项目的扩大比例

0 默认，不扩大1 项目扩大填满容器，值为1时占一份，值为2时占两份，不支持负值

2.flex-shrink 设置项目的收缩比例

1 默认，当容器宽度不够时，项目等比例缩小0 不缩小2,3…n 值越大缩小得越多

3.flex-basis 设置项目初始长度

auto 默认，项目没有设置宽度的时候，默认内容撑开宽度0 不设社区书记置初始值number 规定项目的初始长度

4.flex 复合写法flex:flex-grow flex-shrink flex-basis

auto 相当于1 1 autonone 相当于0 0 auto1 相当于1 1 0initial 相当于0 1 auto

5.align-lf 单独控制交叉轴一个项目的对齐方式

auto 默认值，继承父容器的align-items其他属性值与align-items一样

6.order 规定项目在主轴上的排列顺序

0 默认，根据项目先后排列整数，可为负值，数值越小排名越靠前

以上为个人理解，如有不当之处请指我的歌声里 简谱正！