什么是 Flexbox？
Flexbox 是一种用于布局的 CSS3 属性。它可以让我们更方便地实现各种复杂的布局效果，而不需要使用传统的浮动和定位方式，同时也可以自适应不同的屏幕大小和设备类型。
Flexbox 的基本概念包括：
- Flex 容器（Flex Container）：包含了一组 Flex 项目（Flex Item）的容器。
- Flex 项目（Flex Item）：容器内的每个子元素都被称为 Flex 项目。
- 主轴（Main Axis）：Flex 容器的主要方向，可以是水平方向（row）或垂直方向（column）。
- 交叉轴（Cross Axis）：与主轴垂直的方向。
实现悬挂式布局
悬挂式布局是一种常见的页面布局方式，通常用于展示文章或新闻等内容。在这种布局中，文章标题和摘要会悬挂在图片上方，同时还会显示一些额外的信息，如发布时间、作者等。
下面我们将使用 Flexbox 实现一个简单的悬挂式布局，代码如下：
-- -------------------- ---- -------
---- ----------------
---- --------------------
---- ----------------
-------------
-----------
---- -------------
----------------------------
------------------
------
------
-------- -------------------- ---- ------- -------- - -------- ----- ------------ ------- ---------------- ------- ---------- ----- - ------ - ------ ------ ------- ------ ----------------- ----------------------------------- ---------------- ------ ------------- ----- - -------- - ----- -- - --- - - ------- -- - ----- - ----------- ----- -------- ----- ---------------- -------------- -
首先，我们将 .wrapper 设置为 Flex 容器，并使用 align-items 和 justify-content 属性将其内部的 Flex 项目居中对齐。同时，为了让内容自适应不同的屏幕大小，我们还将 flex-wrap 属性设置为 wrap。
接下来，我们将图片和内容分别放置在两个 Flex 项目中。图片的宽度和高度可以根据实际需要进行调整，同时使用 background-image 和 background-size 属性设置图片的背景。内容部分则使用 flex: 1 属性占据剩余的空间。
最后，我们使用 display: flex 和 justify-content: space-between 属性将信息部分的两个元素分别放置在左右两侧，同时使用 margin-top 属性设置其与内容之间的间距。
总结
通过本文的介绍，我们了解了 Flexbox 的基本概念和使用方法，并使用实例代码演示了如何使用 Flexbox 实现悬挂式布局。希望本文可以对大家了解和学习 Flexbox 有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/655c588ad2f5e1655d672807