深入了解 JavaScript 中的 Flexbox 布局模型

前言

Flexbox（Flexible Box）布局模型是一种用于设计弹性、可响应且高度自适应的网页布局的现代 CSS 技术。它提供了一种更加直观和便捷的方式来对齐和分布容器内的元素。本文将详细介绍 JavaScript 中 Flexbox 的所有主要属性，并通过代码案例演示它们的用法。

Flex容器属性

1.display

• 描述：指定一个元素应该生成的框的类型，将其设置为 flex 或 inline-flex 将其变为 Flex 容器。
• 值：flex | inline-flex

不设置flex属性：

// 这里不展示css样式
<div class="box">
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
</div>

将box盒子设置为Flexbox布局模型：

.box{
      display: flex;
 }

2.flex-direction

• 描述：定义了主轴的方向。
• 值：row | row-reverse | column | column-reverse
• 默认主轴方向为x轴（row）

修改主轴方向为y轴(column)：

• 主轴为垂直方向，起点在上沿。

.box{
      display: flex;
      flex-direction: column;
}

修改主轴方向(row-reverse):

• 主轴为水平方向，起点在右端。

.box{
      display: flex;
      flex-direction: row-reverse;
}

修改主轴方向（column-reverse）:

• 主轴为垂直方向，起点在下沿。

.box{
      display: flex;
      flex-direction: column-reverse;
}

3.flex-wrap

• 描述：定义了项目在容器中是否换行。
• 值：nowrap | wrap | wrap-reverse
• 默认值:nowrap(不换行)

wrap:

• 换行，第一行在上方。

nowrap:

• 不换行，高度不变，横向压缩

wrap-reverse:

• 换行，第一行在下方。

4.justify-content

• 描述： 定义了项目在主轴上的对齐方式。
• 值： flex-start | flex-end | center | space-between | space-around | space-evenly

flex-start

• 项目在主轴起点对齐。

flex-end

• 项目在主轴终点对齐。

center

• 项目在主轴居中对齐

space-between

• 项目在主轴上平均分布，首尾两端贴边。

space-around

• 项目在主轴上平均分布，每个项目两侧有相等的空白。

space-evenly

• 项目在主轴上平均分布，每个项目两侧和首尾两端的空白相等。

5.align-items

• 描述： 定义了项目在交叉轴上的对齐方式。
• 值： stretch | flex-start | flex-end | center | baseline

stretch

• 项目在交叉轴上拉伸以适应容器（默认值）。如下Gif图

flex-start

• 项目在交叉轴起点对齐。

flex-end

• 项目在交叉轴终点对齐。

center

• 项目在交叉轴中居中对齐。

baseline

• 项目在交叉轴上以基线对齐。

补充：基线

基线（baseline）通常被用来对齐项目在交叉轴上的位置。基线是文字或行内元素的底部边缘，包括字符的下沿或行内元素的基线。 当项目在交叉轴上以基线对齐时，它们的基线会对齐，从而使它们在垂直方向上对其。这种对齐方式常用于包含文字或行内元素的容器中，以确保它们在垂直方向上以可读的方式对齐。 它可以在网页设计中用于垂直居中文本，使得不同行的文本在垂直方向上对齐。此外，基线对齐还可以用于其他类型的元素，例如图像、表格等。

看下面案例：(Hello的字体大小为24px,World的字体大小为16px)

不加该属性：

加该属性：

6.align-content

• 描述： 定义了多根轴线的对齐方式，仅在项目换行时有效。
• 值： stretch | flex-start | flex-end | center | space-between | space-around

stretch

• 多根轴线在交叉轴上平分容器的高度，使得它们的高度相等，从而填满整个容器。(默认值)

3个：

12个：

21个：

flex-start

• 多根轴线在交叉轴上起点对齐，即它们的起点对齐于容器的交叉轴起点。

flex-end

• 多根轴线在交叉轴上终点对齐，即它们的终点对齐于容器的交叉轴终点。

center

• 多根轴线在交叉轴上居中对齐，即它们相对于容器的交叉轴中点居中。

space-between

• 多根轴线在交叉轴上平均分布，首尾两端贴边。

space-around

• 多根轴线在交叉轴上平均分布，每个轴线两侧有相等的空白。

Flex 项目属性

• Flex 项目属性用于控制单个 Flex 项目的行为和样式。

1.order

• 描述： order 属性定义了项目的排列顺序。数值越小，项目越靠前。

• 值： 整数

.b1 {
    background-color: blue;
    order: 1;  // 蓝色盒子第二个展示
 }

 .b2 {
    background-color: pink;
    order: 2;  // 粉色盒子第三个展示
 }

 .b3 {
    background-color: red;
    order: 0; // 红色盒子第一个展示
 }

<div class="box">
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
</div>

效果：

2.flex-grow

• 描述： flex-grow 属性定义了项目的放大比例。决定在空间分配时，项目放大的程度。

• 值： 正整数

.b1 {
   background-color: blue;
   order: 1;
   flex-grow: 2;  /*蓝色盒子将占用的可用空间*/
}

<div class="box">
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
</div>

不加该属性：

加上该属性：

检查：

效果：

flex-shrink

• 描述： flex-shrink 属性定义了项目的缩小比例。决定在空间不足时，项目缩小的程度。

• 值： 正整数

.b2 {
   background-color: pink;
   flex-shrink: 4;  /*粉色盒子将以4倍的速度缩小*/
}

<div class="box">
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
    <div class="b1">A</div>
    <div class="b2">B</div>
    <div class="b3">C</div>
</div>

缩小前：

粉色盒子缩小后：

4.flex-basis

• 描述： flex-basis 属性定义了在分配多余空间之前，项目占据的主轴空间。

• 值： 长度值 | auto

.b2 {
   background-color: pink;
   flex-basis: 300px;
}

再加三个盒子：

5.flex

• 描述： flex 属性是 flex-grow, flex-shrink, 和 flex-basis 的缩写形式。

• 值： none | <flex-grow> | <flex-shrink> | <flex-basis>

案例就不展示了。

6.align-self

• 描述： align-self 属性允许单个 Flex 项目覆盖其容器的 align-items 属性。

• 值： auto | stretch | flex-start | flex-end | center | baseline

效果和上述介绍过的是一样的，这里就不再展示。

留言

整理不易，如果觉得有帮助的话，还请点个赞哦。♥(ˆ◡ˆԅ)