前端flex布局

flex布局

一. 主轴对齐方式（x轴）

1.display属性
display:flex | inline-flex

设置flex布局
flex：设置为块级元素，占宽度的100%；
inline-flex：设置为为行级块元素，由内容撑开;

2.flex-direction属性
flex-direction:row | row-reverse | column | column-reverse;

flex排列方式布局 ;
默认为row：水平排列，从左到右;
row-reverse：水平排列，从右到左;
column：竖直排列，从上到下;
column-reverse：竖直排列，从下到上;

3.flex-wrap属性
flex-wrap:nowrap | wrap ｜wrap-reverse

flex布局是否换行 ;
默认为nowarp：不换行;
wrap：换行,第一行在上方（正向换行）;
wrap-reverse：换行，第一行在下方

4.flex-flow属性
flex-flow:row nowrap;

flex-direction和flex-wrap的结合体，第一个元素为flex-direction的元素第二个为flex-wrap的元素

5.justify-content属性
justify-content:flex-start | flex-end | center | space-between | space-around

规定flex对齐方式
flex-start：默认值，左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间间隔相等，与边框无间隔
space-around：两端对齐，项目之间间隔比上面大一倍，与边框有间隔

二. 交叉对齐方式（Y轴）

6.align-items属性
align-items:flex-start | flex-end | center | baseline | stretch

规定flex对齐方式
flex-start：默认值，上对齐
flex-end：下对齐
center：垂直居中
baseline：文字基线对齐（不常用）
stretch：默认值，如果未设置高度则自动撑满容器

三. 多行交叉轴对齐方式（多行Y轴）

6.align-content属性
align-content:flex-start | flex-end | center | space-between | space-around| stretch

定义了多行的对齐方式，如果项目只有一行则不会生效，需要配合flex-wrap:wrap;来使用
flex-start：默认值，上对齐
flex-end：下对齐
center：垂直居中
space-between：两端对齐上下相等（无边距）
space-around：两端对齐上下相等（有边距）
stretch：如果未设置高度则自动撑满容器

四. 项目的属性

1.order属性
order:;

定义了项目的排列顺序，数值越小越靠前
order:-1

2.flex-grow属性
flex-grow:;

定义了项目的放大比例，如果全部为1则平分剩余空间；
flex-grow:1;平分空间

3.flex-shrink属性
flex-shrink:;

定义了项目的缩小比例，空间不足时等比例缩小；
flex-grow:1;平分空间

4.flex-basis
flex-shrink:/auto;

定义了项目在主轴上的空间，等同于width/height

5.align-self
align-self:auto | flex-start | flex-end | center | baseline | stretch

定义每个独立项目的对齐方式，不继承父类；

6.flex
等同于flex-grow/flex-shrink/flex-basis的缩写

flex:1;即等分剩余空间；