Flex 布局

讲在前面的话：你好，我是itchao，欢迎来到我关于flex布局的笔记整理，该文章如有问题敬请指正。写该文章目的有两个，其一是记录整理Flex相关知识点，其二是希望能帮助更多的人。笔记整理自：阮一峰的网络日志：Flex 布局教程 ：语法篇，谢谢阮一峰大神的优质文章，让我学到了很多知识，想了解更多 Flex 布局，可直接访问该链接。

1. Flex 布局基本概念

• Flex 布局（弹性布局）
• 采用 Flex 布局的元素，称为 Flex 容器。Flex 容器的所有子元素，称为 Flex 项目
• 容器默认两个轴：水平的主轴和垂直的交叉轴
• 主轴：main start 开始位置 （左侧），main end 结束位置（右侧）
• 交叉轴：cross start 开始位置（头部），cross end 结束位置（底部）
• 项目默认沿主轴排列，即水平方向排列

2. 容器属性

• 容器属性共6个

1. flex-direction

   • 作用：决定主轴方向（即项目排列方向）

   • 可选参数：

     • row（默认值）：主轴为水平方向，起点在左端
     • row-reverse：主轴为水平方向，起点在右端
     • column：主轴为垂直方向，起点在上沿
     • column-reverse：主轴为垂直方向，起点在下沿

2. flex-wrap

   • 作用：决定换行方式（一行排不完的情况）

   • 注意：默认情况中，项目都排列在一条轴线

   • 可选参数：

     • nowrap（默认）：不换行
     • wrap：换行，第一行在上方
     • wrap-reverse：换行，第一行在下方

3. flex-flow

   • 作用：flex-direction和flex-wrap的简写
   • 默认值：row nowrap

4. justify-content

   • 作用：决定项目在主轴上对齐方式

   • 可选参数：具体对齐方式由主轴方向决定 ( flex-direction 可改变主轴方向 ) 。下面假设主轴为从左到右

     • flex-start（默认值）：左对齐（开始位置 main start）
     • flex-end：右对齐（结束位置 main end）
     • center： 居中对齐
     • space-between：两端对齐，项目之间的间隔都相等
     • space-around：每个项目两侧的间隔相等（项目与项目间隔 = 项目与边框间距的2倍）

5. align-items

   • 作用：决定项目在交叉轴上对齐方式

   • 可选参数：具体对齐方式由交叉轴方向决定 ( 主轴改变后交叉轴即改变 ) 。下面假设交叉轴从上到下

     • flex-start：上对齐（开始位置 cross start）
     • flex-end：下对齐（结束位置 cross end）
     • center：居中对齐
     • baseline: 项目的第一行文字的基线对齐
     • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

6. align-content

   • 作用：决定多根轴线的对齐方式。

   • 注意：如果项目只有一根轴线，该属性不起作用

   • 可选参数：

     • flex-start：交叉轴的起点对齐
     • flex-end：交叉轴的终点对齐
     • center：交叉轴的中点对齐
     • space-between：交叉轴两端对齐，轴线之间的间隔平均分布
     • space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍
     • stretch（默认值）：轴线占满整个交叉轴

3. 项目属性

• 项目属性共6个

1. order

   • 作用：决定项目的排列顺序
   • 特点：数值越小，排列越靠前
   • 注意：默认值为0

2. flex-grow

   • 作用：决定项目的放大比例

   • 特点：

     • 若所有项目 flex-grow 都为1，当有剩余空间时，则等分剩余空间
     • 若一个项目 flex-grow 为2，其他项目 flex-grow 为1，则前者占据剩余空间是后者的2倍

   • 注意：默认值为0，即如果存在剩余空间，也不放大

3. flex-shrink

   • 作用：决定项目的缩小比例

   • 特点：

     • 若所有项目的flex-shrink都为1，当空间不足时，则都等比例缩小
     • 若一个项目的flex-shrink属性为0，其他项目flex-shrink都为1，则空间不足时，前者不缩小

   • 注意：

     • 默认值为1，即若空间不足时，该项目将缩小
     • 负值对该属性无效

4. flex-basis

   • 作用：决定在分配多余空间前，项目占据的主轴空间（main size）

   • 注意：

     • 浏览器根据这个属性，计算主轴是否有多余空间
     • 默认值为auto，即项目的本来大小
     • 可以设为width或height属性一样的值（如200px），则项目将占据固定空间

5. flex

   • 作用：flex-grow, flex-shrink 和 flex-basis的简写

   • 注意：

     • 默认值为0 1 auto。后两个属性可选值
     • 该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)
     • 建议优先使用该属性，因为浏览器会自动推算相关值

6. align-self

   • 作用：允许单个项目有与其他项目不一样的交叉轴对齐方式，可覆盖align-items属性

   • 注意：默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

   • 可选参数：具体对齐方式由交叉轴方向决定 ( 主轴改变后交叉轴即改变 ) 。下面假设交叉轴从上到下

     • auto：继承父元素的align-items属性，如果没有父元素，则等同于stretch
     • flex-start：上对齐（开始位置 cross start）
     • flex-end：下对齐（结束位置 cross end）
     • center：居中对齐
     • baseline: 项目的第一行文字的基线对齐
     • stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

写在最后的话：希望这篇文章能帮助你了解些 Flex 相关知识，下篇文章见！

自我谏言：

• 不要自我怀疑！
• 不要自我设限！
• 好好踏实努力！
• 成为更好的人！

俗话说目标是灯塔，而这是我的灯塔：我一定要成为非常优秀的前端开发工程师！争取早日成为全栈大佬！

itchao

2021年12月23日15:07:42