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

- main axis :flex盒子的主轴,默认为横向,可通过
flex-direction
进行改变,主轴的方向决定了项目的排列方向
- cross axis:flex盒子的交叉轴,主轴的对应垂直交叉方向,当主轴为横向,其为垂直方向,相反亦如此转变
- main start - main end:主轴的默认排列方向
- cross start - cross end:交叉轴的默认排列方向
定义弹性盒子方式:display:flex
flex container 即弹性盒子父级元素的方法
- flex-direction,容器里的排列方向

1 2 3 4 5 6
| .container { flex-direction:row row-reverse column column-reverse; }
|
- row,默认方向,水平向右
- row-reverse,水平向左
- column,垂直向下
- column-reverse,垂直向上
- flex-wrap,改变弹性盒子子项是否可以换行

1 2 3 4 5
| .container { flex-wrap: nowrap wrap wrap-reverse; }
|
- nowrap,默认值,不换行
- wrap,换行
- wrap-reverse,反方向换行
- flex-flow,以上两种的简写方法,例子如下
1 2 3
| .container { flex-flow: column wrap; }
|
- 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°的样子
- 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,对应交叉轴中的元素的基线进行对齐,即其中文字底部为基准,没有文字以元素底部为基准
- 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,相对于交叉轴,两边元素距边缘等于相邻元素的一半,其他等距离隔开对齐
- gap 间隙
gap 可以用来设置对应相邻元素的间隙,包括上下左右

1 2 3 4
| .container { ... gap:20px 10px; }
|
gap 可以设置一个值,也可以两个,一个值时,该值表示包括上下左右的间隙,两个值时,第一个值表示上下间隙,第二个表示左右间隙