CSS flex换行|极客教程

CSS flex换行

Flex布局是CSS3中新增的一种布局方式，可以很方便的创建弹性盒子模型，实现页面中各个元素的布局和对齐。在Flex布局中，我们可以使用flex-wrap属性来控制Flex容器中的子元素是如何换行的。

理解Flex布局

在使用Flex布局时，首先需要明确几个概念：

Flex容器（Flex Container）：包含了Flex子元素的父元素，通过设置其display属性为flex或inline-flex来创建Flex容器。
Flex子元素（Flex Items）：Flex容器中的直接子元素，会受到Flex容器的布局控制。
主轴（Main Axis）和交叉轴（Cross Axis）：Flex容器具有主轴和交叉轴的概念，主轴是Flex子元素排列的方向，交叉轴是与主轴垂直的方向。
主轴方向（Main Axis Direction）：主轴的排列方向可以是水平方向（row）或垂直方向（column）。
主轴对齐方式（Main Axis Alignment）：在主轴方向上，Flex子元素的对齐方式。
交叉轴对齐方式（Cross Axis Alignment）：在交叉轴方向上，Flex子元素的对齐方式。

使用`flex-wrap`属性实现Flex换行

在Flex布局中，默认情况下Flex子元素是不会换行的，即使容器的宽度不足以容纳全部子元素也会导致子元素的溢出。这时可以使用flex-wrap属性来控制Flex子元素的换行行为。

`flex-wrap`属性值

flex-wrap属性共有三个属性值，分别是：

nowrap：默认值，表示Flex子元素不换行，会尽量在一行内排列。
wrap：表示Flex子元素可以换行，当一行排列不下时，自动换行。
wrap-reverse：表示Flex子元素可以换行，且从原来方向的相反方向开始排列。

示例

首先，我们创建一个Flex容器，并设置flex-wrap属性为wrap，来实现Flex子元素的换行。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flex Wrap</title>
<style>
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        width: 300px; /** 设置容器宽度 **/
        border: 1px solid #ccc;
        padding: 10px;
    }
    .flex-item {
        width: 100px; /** 设置子元素宽度 **/
        height: 100px; /** 设置子元素高度 **/
        background: #f0f0f0;
        margin: 5px;
    }
</style>
</head>
<body>
<div class="flex-container">
    <div class="flex-item">1</div>
    <div class="flex-item">2</div>
    <div class="flex-item">3</div>
    <div class="flex-item">4</div>
    <div class="flex-item">5</div>
    <div class="flex-item">6</div>
    <div class="flex-item">7</div>
    <div class="flex-item">8</div>
</div>
</body>
</html>