Flex弹性布局

1.背景:

页面布局中,各个组件需求不同,需要高效方便控制元素对齐,排列等形式

有时需要随大盒子的变化来改变元素的具体位置,但相对位置不需改变(狭义)

2.Flex概念:

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

3.Flex的优点

4.Flex 的属性：

(1)  flex-direction  (决定主轴的方向)

(2)  flex-wrap  (换行)

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

(4)  justify-content  (设置主轴元素的排列)

(5)  align-items  (设置侧轴元素的排列（单行）) 

(6)  align-content   (设置侧轴元素的排列（多行）) 

5.Flex属性详情:

(1)  flex-direction  (决定主轴的方向)
1.flex-direction: row;     调整主轴的方向 row水平方向为主轴
2.flex-direction: row-reverse;    主轴为水平方向，起点在左端/右端
3.flex-direction: column;   主轴为垂直方向
4.flex-direction: column-reverse;   主轴为垂直方向，起点在上沿/下沿

(2)  flex-wrap  (换行)

1.flex-wrap: nowrap;    换行，第一行在上方
2.flex-wrap: wrap-reverse;    换行，第一行在下方
3.flex-wrap: wrap-reverse;     换行，第一行在下方

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

1.flex-flow: row nowrap;     默认主轴是x轴 不换行排列
2.flex-flow: row wrap;   主轴是x轴 换行排列
3.flex-flow: column wrap;   主轴是y轴 换行排列
4.flex-flow: column nowrap;   主轴是y轴 不换行排列

(4)  justify-content  (设置主轴元素的排列)

1.justify-content: flex-start;   左对齐
2.justify-content: flex-end;    右对齐
3.justify-content: center;   居中
4.justify-content: space-between;   两端对齐 剩余的空间 平均分配
5.justify-content: space-around;    每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍
6.justify-content: space-evenly;     间距相等

(5)  align-items  (设置侧轴元素的排列（单行）) 

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

(6)  align-content   (设置侧轴元素的排列（多行）) 

1.align-content: center;
2.align-content: flex-start;
3.align-items: flex-end;
4.align-content: space-between;
5.align-content: space-around;
6.align-content: space-evenly;

(7)   项目上的属性----子元素的属性

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

6.Flex的注意事项

1. 子元素是依赖容器的元素，想要控制子元素排列，依靠的是父级容器

2. 设置父元素为弹性盒，子元素的float将失效

3. 切记不要把flex与浮动布局或定位布局一起使用

4. 使用display:flex;其子元素将块状化