flex弹性布局的理解和使用

flex定义:

Flex是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性

作用:
   它能够更加高效方便的控制元素的对齐、排列
   可以自动计算布局内元素的尺寸，无论这个元素的尺寸是固定的还是动态的
   控制元素在页面的布局方向
   按照不同于DOM所指定排序方式对屏幕上的元素重新排序

flex概念:

采用Flex布局的元素，称为Flex容器（flex container），简称”容器”。它的所有子元素自动成为容器成员，称为Flex项目（flex item），简称”项目”

• 默认水平方向为主轴（main axis）

• 默认垂直方向为交叉轴、侧轴

• 项目默认沿主轴排列

flex 的属性：

1、flex-direction [决定主轴的方向]:

/* 调整主轴的方向 row水平方向为主轴 */
flex-direction: row;
/* 主轴为水平方向，起点在左端/右端 */
flex-direction: row-reverse;
/* 主轴为垂直方向 */
flex-direction: column;
/* 主轴为垂直方向，起点在上沿/下沿 */
flex-direction: column-reverse;

2、flex-wrap如何换行:

/* （默认）：不换行 */
flex-wrap: nowrap;
/* 换行，第一行在上方 */
flex-wrap: wrap;
/* 换行，第一行在下方 */
flex-wrap: wrap-reverse;

3、flex-flow 主轴方向和换行属性复合写法:

/* 默认主轴是x轴 不换行排列  */
flex-flow: row nowrap;
/*主轴是x轴  换行排列*/
flex-flow: row wrap;
/* 主轴是y轴 换行排列 */
flex-flow: column wrap;
/* 主轴是y轴 不换行排列 */
flex-flow: column nowrap;

4、justify-content: 设置主轴元素的排列：

/* （默认值）：左对齐 */
justify-content: flex-start;
/* 右对齐 */
justify-content: flex-end;
/*居中 */
justify-content: center;
/*  两端对齐 剩余的空间 平均分配 */
justify-content: space-between;
/* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
justify-content: space-around;
/* 间距相等 */
justify-content: space-evenly;

                                        

5、align-items: 设置侧轴元素的排列（单行）：

/* 单行侧轴 */
/* 交叉轴的中点对齐 */
align-items: center;
/* 交叉轴的起点对齐 */
align-items: flex-start;
/* 交叉轴的终点对齐 */
align-items: flex-end;
/* 项目的第一行文字的下基线对齐 */
align-items: baseline;
/* （默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度 */
align-items: stretch;

                                       

6、align-content:设置侧轴元素的排列（多行）：

/* 多行侧轴排列  使用  align -content */
align-content: center;
align-content: flex-start;
align-content: flex-end;
align-content: space-between;
align-content: space-around;
align-content: space-evenly;

7、项目上的属性——子元素的属性：

/* 定义项目的排列顺序。数值越小，排列越靠前，默认为0 */
order: 1;
/* 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。主要作用是：分配剩余空间的 */
flex-grow: 1;
/* 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。主要作用是做缩小空间用的  0 没有空间也不缩小 */
flex-shrink: 2;
/* 交叉轴上的对齐方式，允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性 */
/* flex-start | flex-end | center | baseline | stretch */
/* align-self: flex-end; */
align-self: center;
/*定义在分配多余空间之前，项目占据的主轴空间;是放大缩小比例前生效的宽高 类似我们设置的宽高*/
flex-basis:auto; 
/* 复合属性，代表flex-grow, flex-shrink和flex-basis的简写，后两个属性可选，默认值为0 1 auto */
/*放大缩小默认值复合写法*/
flex: 2;