flex布局与多列布局｜豆包MarsCode AI 刷题flex布局与多列布局 Flex 是 CSS3 的一种布局模

flex布局与多列布局

Flex 是 CSS3 的一种布局模式，主要用于一维布局（水平或垂直），可以有效地分配容器中元素的空间，适应不同屏幕大小。

多列布局是一种用于创建类似于报纸排版的多列文本布局的技术，通过将内容分割为多列，实现流式排版。

特性	Flex布局	多列布局
方向	一维布局（水平或垂直）	二维布局（多列）
子项控制	可单独调整每个子项的对齐和顺序	子项分布自动完成
灵活性	高，可精确控制对齐和伸缩	较低，主要针对文字和简单块元素
应用场景	动态容器布局，弹性盒模型	流式排版，多栏文字分布

flex 实现水平垂直居中

方法一：父容器开启 flex 布局，然后使用 justify-content 和 align-items 实现水平垂直居中

.outer {
 width: 400px;
 height: 400px;
 background-color: #888;
 display: flex;
 justify-content: center;
 align-items: center;
 }
 .inner {
 width: 100px;
 height: 100px;
 background-color: orange;
 }

方法二：父容器开启 flex 布局，随后子元素 margin: auto

.outer {
 width: 400px;
 height: 400px;
 background-color: #888;
 display: flex;
 }
 .inner {
 width: 100px;
 height: 100px;
 background-color: orange;
 margin: auto;
 }

伸缩性

flex-basis
- 概念： flex-basis 设置的是主轴方向的基准长度，会让宽度或高度失效。(主轴横向：宽度失效；主轴纵向：高度失效)
- 作用：浏览器根据这个属性设置的值，计算主轴上是否有多余空间，默认值auto ，即：伸缩项目的宽或高。

flex-grow（伸）
- 概念：flex-grow 定义伸缩项目的放大比例，默认为0，即：纵使主轴存在剩余空间，也不拉伸（放大）。
- 规则：
  - 若所有伸缩项目的 flex-grow 值都为1，则：它们将等分剩余空间（如果有空间的话）。
  - 若三个伸缩项目的 flex-grow 值分别为：1、2、3，则：分别瓜分到： 1/6 、2/6 、 3/6 的空间。
flex-shrink（缩）
- 概念： flex-shrink 定义了项目的压缩比例，默认为1，即：如果空间不足，该项目将会缩小。
- 计算方式：
  - 三个收缩项目，宽度分别为： 200px 、 300px 、 200px ，它们的 flex-shrink 值为：1、2、3
  - 若想刚好容纳下三个项目，需要总宽度为 700px ，但目前容器只有400px ，还差 300px，所以每个人都要收缩一下才可以放下，具体收缩的值，这样计算：
    - 计算分母： (200×1) + (300×2) + (200×3) = 1400
    - 计算比例：项目一： (200×1) / 1400 = 比例值1 项目二： (300×2) / 1400 = 比例值2 项目三：(200×3) / 1400 = 比例值3
    - 计算最终收缩大小：项目一需要收缩：比例值1 × 300 项目二需要收缩：比例值2 × 300 项目三需要收缩：比例值3 × 300

flex复合属性

flex 是复合属性，复合了： flex-grow 、 flex-shrink 、flex-basis 三个属性，默认值为 0 1 auto。

如果写 flex:1 1 auto ，则可简写为： flex:auto

如果写 flex:1 1 0 ，则可简写为： flex:1

如果写 flex:0 0 auto ，则可简写为：flex:none

如果写 flex:0 1 auto ，则可简写为： flex:0 auto —— 即 flex 初始值。

项目排序

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

单独对齐

通过align-self 属性，可以单独调整某个伸缩项目的对齐方式

默认值为 auto，表示继承父元素的 align-items 属性。

多列布局

作用：专门用于实现类似于报纸的布局。

常用属性：

column-count ：指定列数，值是数字。
column-width ：指定列宽，值是长度。
columns ：同时指定列宽和列数，复合属性；值没有数量和顺序要求。
column-gap ：设置列边距，值是长度。
column-rule-style ：设置列与列之间边框的风格，值与 border-style 一致。
column-rule-width ：设置列与列之间边框的宽度，值是长度。
column-rule-color ：设置列与列之间边框的颜色。
coumn-rule ：设置列边框，复合属性。
column-span 指定是否跨列；值: none 、 all 。

flex布局与多列布局 ｜ 豆包MarsCode AI 刷题