flex-wrap align-content详解

最新推荐文章于 2024-07-25 21:38:25 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2024-07-25 21:38:25 发布

阅读量1k

点赞数

分类专栏： css系列（精通精通）

本文链接：https://blog.csdn.net/qq_37805832/article/details/108644204

版权

css系列（精通精通）专栏收录该内容

48 篇文章 0 订阅

订阅专栏

<!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 type="text/css">
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 600px;
            height: 600px;
            border: 1px solid #000;
            margin: 100px auto;
            display: flex;
            /*
            1.默认情况下如果伸缩容器的一行放不下所有的伸缩项, 那么系统会自动等比压缩所有的伸缩项
            2.在伸缩容器中有一个叫做flex-wrap属性, 专门用于控制放不下是否需要换行的
            默认的取值: flex-wrap 不换行
            wrap: 放不下就换行 而不是等比压缩
            wrap-reverse: 放不下就换行 , 以行为单位进行反转
            */
           /*flex-wrap: nowrap;/*默认的,不换行。*/
           flex-wrap: wrap;/*放不下就换行 而不是等比压缩*/
           /*flex-wrap: wrap-reverse;/*放不下就换行 , 以行为单位进行反转*/
           /*在伸缩容器中有一个叫做align-content的属性, 是专门用于设置换行之后的对齐方式的
            注意点: 只有伸缩项发生了换行这个属性才有效*/
            /*align-content: flex-start;/*换行之后和侧轴的起点对齐, 一行接一行*/
            /*align-content: flex-end;/* 换行之后和侧轴的终点对齐, 将所有换行之后的内容当做一个整体来操作*/
            /*align-content: center;/*换行之后和侧轴的中点对齐*/
           /* align-content: space-between;/*换行之后在侧轴上两端对齐*/
           /*align-content: space-around;/*换行之后在侧轴上环绕对齐*/
           align-content: stretch;/*以行为单位进行拉伸, 拉伸的部分以空白填充, 保证拉伸之后所有的行加起来能够填满侧轴*/
        }
        ul>li{
            width: 300px;
            height: 100px;
            line-height: 100px;
            text-align: center;
            font-size: 30px;
            background: red;
        }
        ul>li:nth-child(2){
            background: green;
        }
        ul>li:nth-child(3){
            background: blue;
        }
</style>
</head>
<body>
<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
</ul>
</body>
</html>