flex box 以及 flex container

flex box

flex box适用于组件一些小型布局，而非整体页面，主要思想是能让容器改变其宽度和高度，从而更好填充可用空间以适应设备尺寸，并防止溢出，但是，缺乏灵活性，在面对方向更改，大小，伸缩等方面有欠缺，不适合大型复杂项目

flex的相关讲解

开局先来张图😏

1. main axis ：flex盒子的主轴，默认为横向，可通过flex-direction进行改变，主轴的方向决定了项目的排列方向
2. cross axis：flex盒子的交叉轴，主轴的对应垂直交叉方向，当主轴为横向，其为垂直方向，相反亦如此转变
3. main start - main end：主轴的默认排列方向
4. cross start - cross end：交叉轴的默认排列方向

定义弹性盒子方式：display:flex

flex container 即弹性盒子父级元素的方法

1. flex-direction，容器里的排列方向
   

1
2
3
4
5
6

.container { 
   flex-direction:row 
                  row-reverse 
                  column 
                  column-reverse; 
}

• row，默认方向，水平向右
• row-reverse，水平向左
• column，垂直向下
• column-reverse，垂直向上

2. flex-wrap，改变弹性盒子子项是否可以换行
   

1
2
3
4
5

.container { 
   flex-wrap:  nowrap 
               wrap 
               wrap-reverse; 
}

• nowrap，默认值，不换行
• wrap，换行
• wrap-reverse，反方向换行

3. flex-flow，以上两种的简写方法，例子如下

1
2
3

.container { 
 flex-flow: column wrap; 
}

4. justify-content，定义了主轴方向的排列方式
   当主轴为水平方向时：
   

1
2
3
4
5
6
7
8
9
10
11
12
13
14

.container { 
   justify-content:  flex-start
                     flex-end 
                     center 
                     space-between 
                     space-around 
                     space-evenly 
                     start 
                     end 
                     stretch
                     safe 
                     unsafe
                     ...; 
}

• start | flex-start，两者的定义有所区别，但是实际使用没区别，都是从头开始，另外 flex-start 的兼容性好些
• end | flex-end，同第1条一样，实际使用没区别，但是从尾部开始
• center，居中操作
• stretch，拉伸以填充容器，遵守最小宽度/最大宽度
• space-between | space-around | space-evenly ，都会每行均匀分布，区别在于 space-between 两端元素贴近边缘，space-around两边的元素距离边缘会是相邻元素的一半距离，space-evenly 则会是两边的元素距离边缘完全等同相邻元素距离
• safe，注意浏览器支持，保证你容器的内容不溢出造成数据丢失，与前面类似 start 的值搭配使用
• unsafe，同样注意浏览器支持，与类似 start 的值进行搭配，无论如何都遵守给定的对齐方式

当主轴为垂直方向时，则会相对应竖直处理，即上图旋转90°的样子

5. align-items，交叉轴的默认对齐行为
   简单理解，弹性容器下的直接子元素统为整体进行调整位置，居上，居中，居下等等
   

1
2
3
4
5
6
7
8
9
10

.container { 
   align-items:stretch 
               flex-start 
               flex-end 
               center 
               baseline 
               safe 
               unsafe 
               ...;
}

• stretch，拉伸以填充容器，遵守最小宽度/最大宽度
• flex-start，向交叉轴顶部对齐
• flex-end，向交叉轴底部对齐
• center，对应交叉轴的中间对齐
• baseline，对应交叉轴中的元素的基线进行对齐，即其中文字底部为基准，没有文字以元素底部为基准

6. align-content，交叉轴的内容对齐
   注意，align-content 的优先级高于 align-items，并且只有设置了类似 flex-wrap：wrap 运行换行的代码才得以生效
   

1
2
3
4
5
6
7
8
9
10
11

.container { 
   align-content: flex-start 
                  flex-end 
                  center 
                  space-between 
                  space-around 
                  stretch 
                  safe 
                  unsafe
                  ...; 
}

• flex-start，相对于交叉轴顶部对齐
• flex-end，相对于交叉轴底部对齐
• center，相对于交叉轴中间对齐
• space-between，相对于交叉轴，两边元素贴近边缘，其他等距离隔开对齐
• space-around，相对于交叉轴，两边元素距边缘等于相邻元素的一半，其他等距离隔开对齐

7. gap 间隙
   gap 可以用来设置对应相邻元素的间隙，包括上下左右
   

1
2
3
4

.container {
   ...
   gap:20px 10px;
}

gap 可以设置一个值，也可以两个，一个值时，该值表示包括上下左右的间隙，两个值时，第一个值表示上下间隙，第二个表示左右间隙