深入解析flex-end

GQYWX • 2025-04-12 01:13 • 编程

一、基本概念

flex-end 是指在 Flex 布局下，使弹性容器（flex container）中的子项（flex item）靠近主轴 (main axis) 的结束位置（end）。

需要注意的是，主轴的方向由 flex-direction 决定，所以 flex-end 的结束位置也会随之改变。

当弹性容器中所有的子项都设置 align-self:flex-end 时，则它们都会集中在容器的结束位置。

二、应用实例

以下代码展示了如何使用 flex-end 将一个文本框放在 Flex 容器的右下角：

  <div style="display: flex; width: 300px; height: 200px; border: 1px solid black; justify-content: flex-end; align-items: flex-end;">
    <input type="text" style="margin: 10px;">
  </div>

解释：

将 div 元素设置为 Flex 容器，然后把 justify-content 属性设置为 flex-end，这样容器里的子项就会放在主轴的结束位置。然后再把 align-items 属性设置为 flex-end，子项就会放在交叉轴的结束位置。

三、flex-wrap 与 flex-flow

flex-wrap 属性决定如果一条轴线放不下所有的子项，是否允许容器换行，并指定换行方式。

flex-flow 属性是 flex-wrap 和 flex-direction 的简写形式。

以下代码演示如何使用 flex-wrap 和 flex-flow 与 flex-end 结合使用：

  <div style="display: flex; flex-wrap: wrap-reverse; width: 400px; justify-content: flex-end; align-items: flex-end; border: 1px solid black;">
    <div style="flex: 0 0 150px; background-color: red; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: blue; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: green; height: 50px;"></div>
    <div style="flex: 0 0 150px; background-color: purple; height: 50px;"></div>
  </div>

解释：

将 div 设置为 Flex 容器，然后把子项的 flex-wrap 属性设置为 wrap-reverse，这样子项就会在轴线上从右往左排列，并在容器的下方换行。

最后，再将 justify-content 属性设置为 flex-end，子项就会放在主轴的结束位置。再把 align-items 属性设置为 flex-end，子项就会放在交叉轴的结束位置。

四、flex-grow 和 flex-shrink

flex-grow 属性决定子项放大的比例，flex-shrink 属性决定子项缩小的比例。

以下代码演示如何使用 flex-grow 和 flex-end 结合使用：

  <div style="display: flex; width: 500px; height: 200px; border: 1px solid black; justify-content: flex-end; align-items: flex-end;">
    <div style="flex: 1; background-color: red;"></div>
    <div style="flex: 2; background-color: blue;"></div>
    <div style="flex: 1; background-color: green;"></div>
  </div>

解释：

将 div 设置为 Flex 容器，然后把子项的 flex-grow 属性设置为 1 和 2 和 1，这样第二个子项会比其他两个子项宽一倍。最后，再将 justify-content 属性设置为 flex-end，子项就会放在主轴的结束位置。再把 align-items 属性设置为 flex-end，子项就会放在交叉轴的结束位置。

五、order 属性

order 属性定义了容器中子项的排列顺序。默认情况下，子项按照它们在 HTML 中出现的顺序排列，但可以使用 order 属性来改变这个顺序。

以下代码演示了如何使用 order 属性与 flex-end 结合使用：

  <div style="display: flex; width: 400px; height: 200px; border: 1px solid black; align-items: flex-end;">
    <div style="background-color: red; height: 50px; width: 100px; order: 2;"></div>
    <div style="background-color: blue; height: 50px; width: 100px; order: 1;"></div>
    <div style="background-color: green; height: 50px; width: 100px; order: 3;"></div>
  </div>

解释：

将 div 设置为 Flex 容器，然后把子项的 order 属性先后设置为 2、1 和 3，这样子项会按照 order 值的大小从小到大排列。

最后，再将 align-items 属性设置为 flex-end，子项就会放在交叉轴的结束位置。

原创文章，作者：GQYWX，如若转载，请注明出处：https://www.506064.com/n/368686.html