Flex盒模型布局的基本操作及使用

什么是flex布局？

Flexible Box 模型，通常被称为 flexbox，即弹性盒模型，是一种一维的布局模式，是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。它既可以应用在pc端，也可以应用在移动端。flex盒模型是W3C在2019年提出的一种新的方案。

怎样将普通盒子变成弹性盒子？

给父容器加上display-flex
默认在盒子中的子元素是左右排列的，当子元素不写宽高时，宽度由内容决定，高度由跟随父容器（和普通盒子相反）。

flex的布局方式

flex-direction用来控制子项整体的布局方向，语法是加到父容器上的。
flex-direction属性值为：
row — 默认值：显示为行，从左向右横向排列
row-reverse —从右向左横向排列
column — 垂直由上向下排列
column-reverse — 垂直由下向上排列
如果子元素的总宽度大于父容器的时候，父元素的弹性优先级高于总宽度，子元素变小。当子元素的内容已经达到最小宽高的时候就会出现溢出的现象。
flex-wrap 用来控制弹性盒子中的换行操作
默认是 no-wrap 不换行
wrap — 换行（折行）
wrap-reverse — 反向换行

弹性盒子中子项的对齐方式

justify-concent 决定了主轴方向上子项的对齐和分布方式。
属性值：
flex-start — 默认值，起始位置对齐
flex-end — 从结束位置对齐
center — 子项都从中心位置对齐
space-between 两端对齐，空白区域从中间进行性分配，如下图：

space-around —— around环绕的意思，从两端分散，中间空白区域等于两端区域的总和，如下图：

space-evenly —— 两端及中间等宽，匀称对齐，如下图：

align-items 每一行中子元素的对齐方式
stretch —— 默认值
flex-start —— 顶对齐（在没有高度的时候由内容决定）
flex-end —— 底对齐
flex-center —— 中心对齐

align-content和justify-content 是相反的操作，侧轴对齐方式，（最少两行才能看出效果，多行的对齐方式，默认情况下元素有几行就把父容器分为几部分）取值和justify-content 相同。

作用到flex子项上的css属性

flex-grow —— grow扩展的意思，默认值为0，1为占满，0.5为占满空隙的二分之一，以此类推，0.2为占空隙的五分之一

flex-shrink —— 收缩，默认值为1，当值越大收缩的比例就越大（大小跟正常比例1去比较的）

flex-basis —— 设置或检索弹性盒伸缩基准值，一个具体值

flex是一种复合写法，例：
①flex-grow ②flex-shrink ③flex-basis（复合写法的顺序）
flex：1 ＝ flex：1.1.0
flex：0 ＝ flex：0.1.0

align-self —— 对某一个元素进行操作，跟align-items很像，区别在于align-items 对容器内所有的内容操作，一个整体操作，一个单独操作。