Flex布局
方便自己使用，没有参考价值
coderWhy的学习视频
1. 概念
1. flex container ：flex 容器
- 开启了
flex布局的元素就是flex container flex 容器的设置只对直接子元素起作用- 设置元素为flex容器：
display: flex;
2. flex item：直接子元素
flex container的直接子元素叫做flex itemflex item的布局将受flex container属性的设置来控制和布局flex item不再严格区分块级和行内级元素flex item默认情况是包裹内容的，但是可以设置高度和宽度
3. 主轴和副轴
副轴官方的名字是交叉轴，为了好理解我就叫他副轴
- 主轴和副轴互相是垂直的
- 子元素会按照主轴的方向排列，如果子元素加起来的尺寸超过了主轴的尺寸，子元素压缩自身的宽度，全部按照主轴的方向放置，既不会自动换行也不会溢出容器（像一堆傻子挤在一行）
- 只有当设置可以换行后，子元素超过主轴尺寸的部分会按照副轴的方向换行
2. 容器的属性
1. flex-direction：主轴的方向
- 主轴的方向默认：从左到右，也就是行的方向
flex-direction: row; /* 默认值，从左到右 */
flex-direction: row-reverse; /* 从右到左 */
flex-direction: column; /* 从上到下 */
flex-direction: column-reverse; /* 从下到上 */
交叉轴
交叉轴的方向是跟随主轴的方便改变的，交叉轴垂直于主轴，且指向页面内容的方向
2. flex-wrap：换行
flex-wrap
flex-wrap: nowrap; /* 默认值，不换行 */
flex-wrap: wrap; /* 换行 */
3. 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; /* 两端对齐，但和起点与终点之间有距离，距离是子元素之间的距离 */
4. align-item：子元素沿交叉轴方向的对齐方式
- 把所有的子元素看成是一个整体去排列
align-items: flex-start; /* 默认值：从交叉轴起点开始（子元素有设置高度的情况下） */
align-items: flex-end; /* 对齐到交叉轴的终点 */
align-items: center; /* 居中 */
align-items: baseline; /* 文字基准线对齐 */
align-items: stretch; /* 子元素没有设置高度，或设置高度为auto时，align-item的默认值，拉伸元素至填充交叉轴 */
5. align-content：在多行的情况下，子元素在交叉轴方向的对齐方式
- 这个设置很少用
- 把每一行看成是一个元素，多行就是多个元素，设置这些元素在交叉轴方向上的排列方式
align-content: stretch; /* 默认值：在子元素没有高度的情况下拉伸后填充整个交叉轴方向 */
align-content: flex-start; /* 对齐到交叉轴的起点 */
align-content: flex-end; /* 对齐到交叉轴的终点 */
align-content: center; /* 交叉轴方向居中 */
align-content: space-between; /* 两端与起点和终点对齐，行间距相同 */
align-content: space-around; /* 两端对齐，但和起点与终点之间有距离，距离是行间距的一半 */
align-content: space-evenly; /* 两端对齐，但和起点与终点之间有距离，距离与行间距相同 */
3. flex item 子元素的属性
1. order：优先级
- 默认值为0
- 数字越小，优先级越高，优先级越高在容器中的排列中越靠前
order: 1;
2. align-self：设置自己在交叉轴上的位置
- 只改变自己的位置，与其他子元素无关
align-self: flex-end;
3. flex-grow：子元素如何拉伸
- 默认值为0
- 在主轴上有剩余空间时，flex-grow属性才有效
- 属性作用是子元素如何瓜分主轴上剩余的空间
元素本身的 flex-grow属性值除以 主轴方向上所有子元素的flex-grow的和
.item1{flex-grow: 1; // 得到1/3的剩余空间
}
.item1{flex-grow: 2; // 得到2/3的剩余空间
}
- 如果元素设置有
max-width或者max-heigh，就算得到剩余空间，元素拉伸后也不会大于max值
4. flex-shrink：压缩比例
- 作用：当子元素的宽度之和大于主轴尺寸时，为了能在主轴方向放下所有元素，需要设置压缩哪一个元素，压缩多少
- 默认值为1，
- 设置为0，不压缩
- 如果所有子元素设置的值都一样且不为0，则会平均分配压缩的尺寸
// 所有子元素在主轴方向超出尺寸为3
.item1{flex-grow: 1; // 分担1/3的压缩尺寸
}
.item1{flex-grow: 2; // 分担2/3的压缩尺寸
}
- 如果子元素有min-width或min-height，无论要压缩多少，最小只能压缩到min的大小
5. flex-basis：基础尺寸
- 默认值为auto
- 比
width增加了个功能 - 作用：元素中有内容需要完整展示，元素会突破 flex-basis设置的尺寸，占用主轴剩余空间，压缩其他可压缩的子元素，完整的显示内容
- 现阶段只知道单个的英语单词是需要完整展示的内容
flex-basis: 120px;
3. 简写（缩写）
1. 设置主轴方向和是否换行
- 是
flex-direction和flex-wrap两个属性的缩写
flex-flow: column wrap; // 设置flex-direction为column ，换行属性设置为wrap
flex-flow: wrap; // 没设置flex-direction使用默认值row ，换行属性设置为wrap