flex布局

flex布局

flex布局定义

• 传统布局兼容性好但是不能自适应，更适合移动端开发。
• flex布局意为"弹性布局"，用来为盒状模型提供最大的灵活性。能更好地适应移动端。

flex布局父级常见属性（display：flex；）

1. flex-direction设置主轴的方向

属性值	说明
row	主轴方向由左向右（默认值）
row-reverse	从右往左
column	从上到下
colmn-reverse	从下到上

2. justify-content设置主轴上的子元素排列方式

属性值	说明
flex-start	沿主轴方向依次排列
flex-end	沿着主轴尾部排列
center	在主轴居中对齐
space-around	评分剩余空间
space-between	先两边贴边在平分剩余空间（important）

3.flex-wrap设置子元素是否换行

属性值	说明
nowrap	不换行（默认值）
wrap	换行

4.align-items设置侧轴上的子元素的排列方式（单行）

属性值	说明
flex-start	默认值从上到下
flex-end	从下到上
center	挤在一起居中（垂直居中）
stretch	拉伸(拉伸，但是子盒子不要给高度)

5.align-content设置侧轴上子元素的排列方式（多行）

属性值	说明
flex-start	默认值在侧轴的头部开始排列
flex-end	沿着侧轴尾部排列
center	在侧轴居中显示
space-around	子项在侧轴平分剩余空间
space-between	子项在侧轴先两边贴边，在平分剩余空间（important）
stretch	设置子项高度平分父级元素

注：单行找align-items,多行找align-content

6. flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex布局子级常见属性

1.flex子元素分配剩余空间，用flex来表示占多少份。将盒子平均分为若干等分。
2. align-self控制子项自己在侧轴上的排列方式(允许单个项目有与其他项目不一样的对齐·方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素相当于strech。)
3. order属性定义项目的排列顺序（数值越小，排列越靠前，默认为0）.