CSS 弹性框初学者指南 - 第一部分

2025-05-24

CSS 弹性框初学者指南 - 第一部分

CSS 弹性布局模块（Flexbox）是一种有助于设计灵活布局的 Web 布局模型。它允许容器内的项目根据屏幕尺寸自动对齐。

在本文中，我将介绍 Flexbox 的主要属性，并展示它们的工作原理。第一部分将介绍影响 Flex 容器的属性，第二部分将介绍影响 Flex 项目的属性。

当使用 flexbox 时，项目将沿着两个轴显示，即主轴和横轴。

主轴，顾名思义，就是项目显示的主要轴线。默认情况下，主轴是水平的。

交叉轴垂直于主轴，其方向取决于主轴的方向。默认情况下，交叉轴是垂直的。

带有弹性项目和显示主轴和横轴的线条的弹性盒容器图

要开始使用 flexbox，您必须首先声明一个容器，并在其中添加一些 div 作为示例。

<div class="container">
   <div class="item">1</div>
   <div class="item">2</div>
   <div class="item">3</div>
   <div class="item">4</div>
</div>
Enter fullscreen mode Exit fullscreen mode

要使容器灵活，必须将容器的显示设置为 flex。我们还将为容器内的项目添加一些样式。

.container{
display: flex;
}

.item {
  background-color: #f5f;
  border: 2px solid #0000;
  padding: 2rem;
  font-size: 2rem;
}
Enter fullscreen mode Exit fullscreen mode

容器显示设置为弹性

flexbox的主要属性有：

  • 弹性方向
  • 弹性包裹
  • 弹性流
  • 内容对齐
  • 对齐项目
  • 对齐内容

弹性方向

flex-direction 属性指示 flexbox 容器内项目的布局方向。

它有四个值：

  • 排
  • 行反转
  • 柱子
  • 列反转

1.行

行值是默认值，它将从左到右水平对齐项目。

    .container{
    display: flex;
     flex-direction: row;
    }
Enter fullscreen mode Exit fullscreen mode

flex 方向设置为 row

2. 行反转

row-reverse 值将从右到左水平对齐项目。

 .container{
    display: flex;
    flex-direction: row-reverse;
 }
Enter fullscreen mode Exit fullscreen mode

Flex 方向设置为行反转

3.列

列值将从上到下垂直对齐项目。

  .container{
    display: flex;
    flex-direction: column;
  }
Enter fullscreen mode Exit fullscreen mode

Flex 方向设置为列反转

4.列反转

column-reverse 值将从下到上垂直对齐项目。

  .container{
    display: flex;
    flex-direction: column-reverse;
  }
Enter fullscreen mode Exit fullscreen mode

Flex 方向设置为列反转

柔性包装

如果您有很多项目并且它们都出现在容器溢出的同一行上，您将使用 flex-wrap 属性来指定容器是否应该包装。

1.包装

wrap 值指定项目应拆分为多行，以防止溢出。任何可能导致溢出的元素都将被放入新行。

  .container{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
  }
Enter fullscreen mode Exit fullscreen mode

Flex wrap 设置为包裹

2.Nowrap

这是默认值，如果使用的话，将把项目保留在一行中。

 .container{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
 }
Enter fullscreen mode Exit fullscreen mode

Flex wrap 设置为 no wrap

弹性流

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

.container{
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
Enter fullscreen mode Exit fullscreen mode

代码如下，而不是上面的代码

.container{
display: flex;
flex-flow: row wrap;
}
Enter fullscreen mode Exit fullscreen mode

内容对齐

此属性用于沿先前使用 flex-direction 指定的方向对齐弹性容器的项目。

1.Flex-start

这是默认值，将项目与容器的开头对齐。

  .container{
    display: flex;
    justify-content: flex-start;
  }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为弹性开始

2.Flex-end

此值将使项目与容器的末尾对齐。

  .container{
    display: flex;
    justify-content: flex-end;
  }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为弹性结束

3.中心

此值将使项目与容器的中心对齐。

 .container{
    display: flex;
    justify-content: center;
  }
Enter fullscreen mode Exit fullscreen mode

内容居中

4. 空间环绕

此值将使项目均匀分布在行中，并在项目周围留有空格。

 .container{
    display: flex;
    justify-content: space-around;
 }
Enter fullscreen mode Exit fullscreen mode

内容对齐设置为左右留出空间

5.间隔均匀

该值将在两个项目之间添加相等的间距。

 .container{
    display: flex;
    justify-content: space-evenly;
 }
Enter fullscreen mode Exit fullscreen mode

Justif 内容设置为均匀分布

6.Space-between

此值将沿线均匀显示项目。第一个元素将位于行首，最后一个元素将位于行尾。

 .container{
    display: flex;
    justify-content: space-between;
 }
Enter fullscreen mode Exit fullscreen mode

内容对齐设置为

对齐项目

此属性用于沿垂直于主轴的横轴对齐弹性项目。

为了更好地演示此属性，我将容器高度设置为 200px，背景颜色设置为黑色。

1.拉伸

这是默认值，将拉伸项目以填充容器。

 .container{
    display: flex;
    align-items: stretch;
 }
Enter fullscreen mode Exit fullscreen mode

对齐项目设置为拉伸

2.Flex-start

此值将使项目与容器顶部对齐。

 .container{
    display: flex;
    align-items: flex-start;
 }
Enter fullscreen mode Exit fullscreen mode

对齐项目设置为弹性开始

3.Flex-end

此值将使项目与容器的底部对齐。

 .container{
    display: flex;
    align-items: flex-end;
 }
Enter fullscreen mode Exit fullscreen mode

对齐项目设置为 flex end

4.中心

此值将使项目与容器的中心对齐。

 .container{
    display: flex;
    align-items: center;
 }
Enter fullscreen mode Exit fullscreen mode

将项目对齐设置为居中

对齐内容

此属性用于对齐弹性行。仅当您将容器设置为包裹flex-wrap: wrap并且您有多行弹性项目时，此属性才适用。

为了更好地演示此属性，我将高度设置为 500px，并将 flex-wrap 属性设置为 wrap。

1.拉伸

这是默认值。它将拉伸现有线条以占据剩余空间。

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: stretch;
 }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为拉伸

2.Flex-start

该值将在容器的开始处显示弹性线。

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
 }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为弹性开始

3.Flex-end

该值将显示容器底部的线条。

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: flex-end;
  }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为 flex end

4.中心

该值将显示容器中心的线条。

 .container{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
 }
Enter fullscreen mode Exit fullscreen mode

内容对齐设置为居中

5. 空间环绕

该值将使线条均匀分布，并且线条周围留有空间。

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-around;
    }
Enter fullscreen mode Exit fullscreen mode

内容对齐设置为周围空间

6.Space-between

此值将在容器中均匀分布行。第一行位于容器的开头，最后一行位于结尾。

    .container{
      display: flex;
      flex-wrap: wrap;
      align-content: space-between;
    }
Enter fullscreen mode Exit fullscreen mode

对齐内容设置为

这是我计划撰写的关于 CSS 弹性框的两篇系列文章的第一篇。如果您有任何补充或疑问，请在评论区留言。

感谢阅读！

文章来源：https://dev.to/chrissiemhrk/a-beginners-guide-to-css-flexbox-part-one-29j1
Devto 翻译
PREV
如何写出好的提交信息
NEXT
2021 年 Dockerfile 的 21 个最佳实践