CSS篇-05 Flex布局基础讲解（三、换行对齐的理解，以及伸缩项的排序）

本文链接：https://blog.youkuaiyun.com/weixin_44552302/article/details/103637467

本文介绍了CSS Flex布局中关于换行和伸缩项排序的知识点。首先，讨论了`flex-wrap`属性，用于控制是否换行以及换行方式。接着，讲解了`align-content`属性，它在换行后如何调整内容的对齐方式。最后，阐述了`order`属性的作用，允许改变伸缩项的默认排序顺序。

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

默认不会换行

<style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
            width: 600px;
            height: 500px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
        }
        li{
            width: 300px;
            height: 100px;
            background-color: skyblue;
        }
        li:nth-child(2){;
            background-color: yellowgreen;
        }
        li:nth-child(3){
            width: 500px
            background-color: teal;
        }
    </style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>

这里把ul盒子设置为了弹性盒子
但注意，li设为了300px，500px（为了体现等比压缩），而ul才600px。
但默认不换行，若超出，会自动等比压缩所有压缩项
在这里插入图片描述

一、换行flex-wrap:;

取值

nowrap（默认）不换行，等比压缩伸缩项
wrap 放不下则换行
wrap-reverse 换行且反转
在容器中加上CSS代码

flex-wrap: wrap;

在这里插入图片描述
有没有发现这中间咋空着这么大一块呢

因为换行会触发另一个属性，align-content:;其属性默认为stretch，即拉伸
即换行后，要填满整个弹性盒子，这里是两行：
在这里插入图片描述
（所以容器一般都不设置高）

二、设置换后的对齐方式 align-content:;（换行才触发）

取值：

stretch 默认
flex-start 换行后与侧轴起始对齐
flex-end
center 整体对齐侧轴中点
space-between 侧轴两端对齐
space-around

三、order:; 伸缩项的排序

默认取值都是0，不设置时按照代码顺序

设值后按照值的从小到大排列

        li{
            width: 100px;
            height: 100px;
            background-color: skyblue;
        }
        li:nth-child(1){
            order:3;
        }
        li:nth-child(2){
            background-color: yellowgreen;
            order:2;
        }
        li:nth-child(3){
            background-color: teal;
            order:1;
        }