在 UI（用户界面）设计和前端开发领域，flex 通常指的是 Flexbox（弹性盒子布局模型），它是一种用于为盒状模型提供最大灵活性的布局模式。以下为你详细介绍：
基本概念
Flexbox 旨在提供一种更高效的方式来布局、对齐和分配容器内项目之间的空间，即使它们的大小是未知的或动态的。使用 Flexbox 布局的主要思想是让容器有能力改变其项目的宽度、高度和顺序，以最佳方式填充可用空间。
相关术语
- Flex 容器（Flex Container）：应用
display: flex或display: inline-flex属性的父元素，它定义了一个 Flex 布局的上下文。 - Flex 项目（Flex Item）：Flex 容器的直接子元素，它们会根据 Flexbox 的规则进行布局。
- 主轴（Main Axis）：Flex 项目排列的主要方向，可以是水平（默认）或垂直。
- 交叉轴（Cross Axis）：与主轴垂直的轴。
关键属性
容器属性
display：定义一个元素为 Flex 容器。
.container {display: flex; /* 块级 Flex 容器 *//* 或者使用 display: inline-flex; 行内级 Flex 容器 */
}
flex-direction：指定主轴的方向，决定 Flex 项目的排列方向。
.container {flex-direction: row; /* 默认值，水平从左到右排列 *//* 还可以使用 row-reverse、column、column-reverse */
}
flex-wrap：控制 Flex 项目是否换行。
.container {flex-wrap: nowrap; /* 默认值，不换行 *//* 还可以使用 wrap、wrap-reverse */
}
justify-content：定义 Flex 项目在主轴上的对齐方式。
.container {justify-content: flex-start; /* 默认值，项目从主轴起点开始排列 *//* 还可以使用 flex-end、center、space-between、space-around、space-evenly */
}
align-items：定义 Flex 项目在交叉轴上的对齐方式。
.container {align-items: stretch; /* 默认值，项目拉伸以填充交叉轴 *//* 还可以使用 flex-start、flex-end、center、baseline */
}
align-content：定义多行 Flex 项目在交叉轴上的对齐方式，当flex-wrap为wrap或wrap-reverse时生效。
.container {align-content: stretch; /* 默认值，多行项目拉伸以填充交叉轴 *//* 还可以使用 flex-start、flex-end、center、space-between、space-around */
}
项目属性
flex-grow：定义项目的放大比例，默认为 0，表示不放大。
.item {flex-grow: 1; /* 项目将按比例放大以填充剩余空间 */
}
flex-shrink：定义项目的缩小比例，默认为 1，表示当空间不足时项目会缩小。
.item {flex-shrink: 0; /* 项目不会缩小 */
}
flex-basis：定义项目在分配多余空间之前的初始大小，默认为auto。
.item {flex-basis: 200px; /* 项目初始宽度为 200px */
}
flex：是flex-grow、flex-shrink和flex-basis的简写属性。
.item {flex: 1 1 auto; /* 等价于 flex-grow: 1; flex-shrink: 1; flex-basis: auto; */
}
align-self：允许单个项目覆盖align-items属性，定义该项目在交叉轴上的对齐方式。
.item {align-self: center; /* 该项目在交叉轴上居中对齐 */
}
应用场景
- 导航栏布局：可以轻松实现导航项的水平或垂直排列，并且能够自适应不同屏幕尺寸。
- 卡片布局：方便地控制卡片的排列和间距，使页面布局更加美观。
- 表单布局：快速实现表单元素的对齐和分布。
案例
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"/><title>Title</title><style>.box {width:400px;height:400px;border:1px solid black;margin:auto;display:flex;/*flex-direction:row;flex-wrap:wrap-reverse;*/ /* nowrap,wrap, wrap-reverse */flex-flow: row wrap-reverse;justify-content:space-evenly;align-items:baseline;align-content:space-evenly;}.box>div{width:100px;height:100px;background:pink;border:1px solid red;}.box div:nth-child(1) {padding-top:10px;order:3;flex-grow:1;}.box div:nth-child(2) {padding-top:15px;order:5;flex-grow:2;}.box div:nth-child(3) {flex-shrink:0;}.box div:nth-child(4) {padding-top:20px;order:0;}.box div:nth-child(5) {flex-shrink:2;}</style></head><body><!--容器container：水平轴和垂直轴main axiis, cross axis起始位置：main start, cross start结束位置：main end, cross end默认按主轴排序main sizecross size可以设置主轴为上下flex-direction:决定主轴的方向row:水平方向，左端起点row-reverse:水平方向，右端起点column:垂直方向，由上到下column-reverse:垂直方向，由下到上flex-wrap:nowrapwrap: 换行，第一行在上方wrap-reverse: 换行，第一行在下方flex-flow;flix-direction属性和flex-wrap属性的简写justify-content:主轴上的对齐方式 flex-start:起点对齐flex-end:终点对齐center:居中space-between:两端对齐，间隔相等space-around:每个项目间隔相等，间隔比变宽那个距离大一倍space-evenly:项目与项目之间，项目与边框之间间隔相等align-items:交叉轴上对齐方式flex-start:起点对齐flex-end:终点对齐center: 居中baseline:项目的第一行文字的基线对齐strech(默认值):如果项目未设置高度或设置为auto，将占满整个容器的高度align-content:定义多跟轴线的对齐方式，如果只有一根轴线，该属性不起作用flex-start:flex-endspace-aroundspace-evenlyItem：order:项目的排列顺序，值越小，越靠前flex-grow： 项目的放大比例flex-shrink： 项目的缩小比例flex-basis：在分配多余空间之前，项目占据主轴空间flex： flex-grow flex-shrink flex-basis,后两个可选align-self： 单个项目与其他项目有不同的对齐方式，可覆盖align-items--><div class="box"><div>1</div><div>2</div><div>3</div><div>4</div><div>5</div><div>6</div></div></body>
</html>
![[Qwerty Learner]为键盘工作者设计的单词记忆与英语肌肉记忆锻炼软件](https://lizilong.oss-cn-hangzhou.aliyuncs.com/typora/1704168780.png)
