在 CSS Flexbox 中设置项目的固定宽度

要设置 CSS Flexbox 中项目的固定宽度，我们将了解两种不同的方法。当您希望某些特定项目具有固定宽度（即使有可用空间）时，这很有用。

在本文中，我们有三个用 div 容器包裹的 div 项目。我们的任务是在 CSS Flexbox 中为项目设置固定宽度。

在 CSS Flexbox 中设置项目固定宽度的几种方法

以下是设置 CSS Flexbox 中项目固定宽度的几种方法，我们将在本文中结合分步解释和完整的示例代码进行讨论。

使用 flex-basis 属性设置固定宽度

在这种设置 CSS Flexbox 中项目固定宽度的方法中，我们使用了 flex-basis 属性以及 flex-grow 和 flex-shrink 属性。我们还可以使用 CSS flex 属性，它是我们使用的所有三个属性的简写属性。

  • 我们使用了 container 类使容器成为 Flexbox 容器。
  • 为了设计 Flex 项目，我们设置了它的 背景颜色 和文本 颜色 属性，设置了 内边距 和 外边距 以在框之间留出距离，并使用 CSS 文本对齐 属性将文本居中。
  • 为了设置项目的固定宽度，我们使用了 "flex-basis: 200px;" 指定 Flex 项目的固定宽度，以及 flex-shrink 和 flex-grow，它们分别不允许 Flex 项目缩小和扩展其宽度。

示例

这是一个完整的示例代码，它实现了上述步骤，用于使用 CSS flex-basis 属性在 CSS Flexbox 中设置项目的固定宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .container {
            display: flex;
        }
        .items {
            flex-grow: 0;
            flex-shrink: 0;
            flex-basis: 200px;
            padding: 20px;
            background-color: #071952;
            color: white;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>
        Setting a Fixed Width for Items in CSS Flexbox
    </h3>
    <p>
        In this example, we have used CSS <strong>flex-
        basis</strong> property to set a fixed width for  
        items in CSS flexbox.
    </p>
    <div class="container">
        <div class="items">Item 1</div>
        <div class="items">Item 2</div>
        <div class="items">Item 3</div>
    </div>
</body>
</html>

使用 min-width 属性设置固定宽度

在这种设置 CSS Flexbox 中项目固定宽度的方法中，我们使用了 CSS min-width 属性。它设置元素的最小宽度。

  • 我们使用了与第一种方法相同的方法来创建 Flex 容器并设计 Flex 项目。
  • 然后，我们使用了 "min-width: 200px;" 属性，该属性设置其最小宽度，从而设置 Flex 项目的固定宽度。

示例

这是一个完整的示例代码，它实现了上述步骤，用于使用 CSS min-width 属性在 CSS Flexbox 中设置项目的固定宽度。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        .container {
            display: flex;
        }
        .items {
            min-width: 200px;
            padding: 20px;
            background-color: #071952;
            color: white;
            margin: 5px;
            text-align: center;
        }
    </style>
</head>
<body>
    <h3>
        Setting a Fixed Width for Items in CSS Flexbox
    </h3>
    <p>
        In this example, we have used CSS <strong>min-
        width</strong> property to set a fixed width for  
        items in CSS flexbox.
    </p>
    <div class="container">
        <div class="items">Item 1</div>
        <div class="items">Item 2</div>
        <div class="items">Item 3</div>
    </div>
</body>
</html>

结论

在本文中，我们了解了如何在 CSS Flexbox 中设置项目的固定宽度。我们使用了两种方法：使用 flex-basis 和 flex-grow 以及 flex-shrink，或者简单地使用 flex 简写属性，以及使用 CSS min-width 属性。

更新于: 2024年10月4日

3K+ 阅读量

开启您的 职业生涯

通过完成课程获得认证

开始学习
广告