flex布局父项常见属性flex-wrap

最新推荐文章于 2025-06-20 14:32:47 发布

_XinXinM_

最新推荐文章于 2025-06-20 14:32:47 发布

阅读量2.3k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/binbinhxx/article/details/111940392

介绍了flex-wrap属性用于设置子元素是否换行。在flex布局中，默认子元素不换行，若装不下会缩小子元素宽度以放入父元素内，若要换行需使用特定设置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

flex-wrap 设置子元素是否换行
默认情况下，项目都排在一条线（轴线）上，flex-wrap属性定义，flex布局中默认是不换行的。
在这里插入图片描述
flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 它的所有子元素自动成为容器成员 */
            display:flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */
            flex-wrap:nowrap;
            /* flex-wrap: wrap; */
        }
        div span {
            width: 150px;
            height:100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <!-- <span>5</span> -->


    </div>
</body>
</html>

在这里插入图片描述

flex布局中，默认子元素是不换行的，要换行得用：


 flex-wrap: wrap;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            /* 它的所有子元素自动成为容器成员 */
            display:flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* flex布局中，默认子元素是不换行的，如果装不开，会缩小子元素的宽度，放到父元素里面 */
            /* flex-wrap:nowrap; */
            flex-wrap: wrap;
        }
        div span {
            width: 150px;
            height:100px;
            background-color: purple;
            color: #fff;
            margin: 10px;
        }
    </style>
</head>

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <!-- <span>5</span> -->


    </div>
</body>
</html>

在这里插入图片描述