CSS Flexbox 是一种非常有用的前端技术，它可以帮助我们实现基于固定宽度和百分比的布局。在本文中，我们将深入探讨 Flexbox 的一些重要概念，并提供示例代码，以帮助您更好地理解。
什么是 CSS Flexbox？
CSS Flexbox 是一种用于设计灵活和响应式布局的强大工具。它允许我们按照我们的期望自动调整元素的大小和位置。使用 Flexbox，您可以轻松地对元素进行排列，并使它们在容器中自动对齐。
使用 CSS Flexbox，您可以实现以下常见布局：
- 水平和垂直居中
- 等高列布局
- 两栏布局
- 多列布局
- 瀑布流布局等
Flexbox 的基本概念
在 Flexbox 中，我们使用以下术语：
Flex Container：拥有 Flexbox 布局的父级容器。
Flex Items：Flex Container 内的子元素。
Main Axis：Flex Container 的主轴。在默认情况下，这是水平轴。
Cross Axis：Flex Container 的交叉轴。在默认情况下，这是垂直轴。
Flex Direction 属性：确定 Flex Container 内 Flex Items 的布局方向。默认为 row（水平）方向。
Flexbox 属性：
- flex-grow： 定义 Flex Items 如何放大以填充剩余空间。
- flex-shrink：定义 Flex Items 如何缩小以适应容器尺寸。
- flex-basis：定义 Flex Items 的初始大小。
- flex：是 flex-grow，flex-shrink 和 flex-basis 属性的组合。可以在一个声明中设置这三个属性。
实现基于固定宽度的布局
我们可以使用 flex 属性来实现基于固定宽度的布局。在以下示例代码中，我们设置了 flex-basis 属性为固定的值，并将 flex-grow 和 flex-shrink 属性设置为 0。这样，当父容器的宽度变化时，Flex Items 不会随之而变化，而是保持它们的固定宽度。
-- -------------------- ---- ------- ---------- - -------- ----- ---------- ----- - ----- - ----------- ------ -- ----- -- ---------- -- ------------ -- -
实现基于百分比的布局
要实现基于百分比的布局，我们可以将 flex-basis 属性设置为一个百分比值。如下所示：
-- -------------------- ---- ------- ---------- - -------- ----- - ----- - ----------- ---- -- ----- --- -- ---------- -- ------------ -- -
这将使 Flex Items 占据容器宽度的 25%。这种方法非常适合创建响应式布局，因为 Flex Items 将随着父容器的宽度而自动调整。
实用示例
下面是一个完整的示例，展示了如何使用 Flexbox 实现基于固定宽度和百分比的布局。
HTML 代码：
<div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="item">4</div> </div>
CSS 代码：
-- -------------------- ---- -------
---------- -
-------- -----
---------- -----
-
----- -
----------- ------ -- ----- --
---------- --
------------ --
------------- -----
-------------- -----
-
-- ------ ------ -- --
------------------- -
------------- --
-
------ ----------- ------ -
----- -
----------- ---- -- ----- --
-
-在这个例子中，我们创建了一个包含四个 Flex Items 的 Flex Container。我们使用 flex-wrap 属性将它们放置在一行上，如果父容器太小，它们将换到下一行。
我们使用 flex-basis 属性将 Flex Items 的宽度设置为 200px，但我们还将其设置为 flex-grow 和 flex-shrink 属性为 0，这样当窗口大小改变时，Flex Items 不会改变大小。
最后，我们使用 @media 查询，以便在屏幕尺寸较小的时候，将 Flex Items 的宽度设置为响应式宽度。
结论
使用 CSS Flexbox，我们可以轻松实现基于固定宽度和百分比的布局。Flexbox 是一种非常强大的工具，它在设计灵活和响应式布局方面非常有用。使用本文中提供的示例代码和概念，您可以更好地理解 Flexbox 的工作方式，并开始使用它来开发您的下一个项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66fb88aa44713626015e2e38