Flex布局

方便自己使用，没有参考价值
coderWhy的学习视频

1. 概念

1. flex container ：flex 容器

• 开启了flex布局的元素就是 flex container
• flex 容器的设置只对直接子元素起作用
• 设置元素为flex容器：

display: flex;

2. flex item：直接子元素

• flex container的直接子元素叫做flex item
  • flex 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的剩余空间
}
.item2{
	flex-grow: 2;	// 得到2/3的剩余空间
}

• 如果元素设置有max-width或者max-heigh，就算得到剩余空间，元素拉伸后也不会大于max值
  

4. flex-shrink：压缩比例

• 作用：当子元素的宽度之和大于主轴尺寸时，为了能在主轴方向放下所有元素，需要设置压缩哪一个元素，压缩多少
• 默认值为1，
• 设置为0，不压缩
• 如果所有子元素设置的值都一样且不为0，则会平均分配压缩的尺寸

// 所有子元素在主轴方向超出尺寸为3
.item1{
	flex-shrink: 1;	// 分担1/3的压缩尺寸
}
.item1{
	flex-shrink: 2;	// 分担2/3的压缩尺寸
}

• 如果子元素有min-width或min-height，无论要压缩多少，最小只能压缩到min的大小

5. flex-basis：基础尺寸

• 默认值为auto
• 比width增加了个功能
• 作用：元素中有内容需要完整展示，元素会突破 flex-basis设置的尺寸，占用主轴剩余空间，压缩其他可压缩的子元素，完整的显示内容
• 现阶段只知道单个的英语单词是需要完整展示的内容

flex-basis: 120px;

6. gap：子元素在主轴和交叉轴上的间距

3. 简写（缩写）

1. 设置主轴方向和是否换行

• 是 flex-direction和 flex-wrap两个属性的缩写

flex-flow: column wrap;	// 设置flex-direction为column ，换行属性设置为wrap
flex-flow: wrap;	// 没设置flex-direction使用默认值row ，换行属性设置为wrap

2. flex：子元素在父元素中占比

• flex 属性是 flex-grow（伸缩比例）、flex-shrink（收缩比例）、flex-basis（基础尺寸）的简写。
• 当设置 flex: n 时（n 为数字），默认等价于 flex-grow: n; flex-shrink: 1; flex-basis: 0%。

<div class="flex-container">
  <div class="item-1">占比1</div>
  <div class="item-2">占比2</div>
  <div class="item-3">占比3</div>
</div>
<style>
/* 父容器设置为flex布局 */
.flex-container {
  display: flex; /* 启用flex布局 */
  width: 100%; /* 父容器宽度（可根据需求调整，如100%或固定值） */
  height: 100px; /* 示例高度，可按需调整 */
}

.item-1 {
  flex: 1; /* 占比1（flex-grow: 1） */
}

.item-2 {
  flex: 2; /* 占比2（flex-grow: 2） */
}

.item-3 {
  flex: 3; /* 占比3（flex-grow: 3） */
}
<style>