31.2弹性容器上的样式_主轴——H5C3

最新推荐文章于 2024-07-25 02:11:29 发布

StudiousTiger

最新推荐文章于 2024-07-25 02:11:29 发布

阅读量94

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/m0_45067620/article/details/107827697

版权

Tiger の HTML&CSS 专栏收录该内容

46 篇文章 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>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .a{
            width: 800px;
            border: 10px red solid;
            /* 设置ul为弹性容器 */
            display: flex;

            /*flex-wrap 设置弹性容器中的元素是否自动行 
                可选值：
                        nowrap          默认值  元素不会自动换行
                        wrap            元素自定换行（沿着副轴方向换行）
                        wrap-reverse    沿着副轴的反方向换行


            flex-flow  是wrap和direction的简写属性
            */
            /* flex-wrap: wrap; */
            /* flex-flow: row wrap;   横向排列和换行*/

            /* justify-content:  符合分配主元素中的空白区域
                    -可选值：
                            flex-start      元素沿着主轴的起边排列
                            flex-end        元素沿着主轴的终边排列
                            center          元素居中排列
                            space-around    空白平均分布在各个弹性元素两侧
                            space-between   空白均匀分布到元素间
                            space-evenly    空白平均分布在各个元素的单侧（兼容性不是特别好）
             */
            /* justify-content: flex-start; */
            /* justify-content: space-around; */
            /* justify-content: space-evenly; */
            /* justify-content: space-between; */
        }
        .a li{
            width: 200px;
            height: 100px;
            background-color: #bbffcc;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
            flex-shrink: 0;
        }
        .a li:nth-child(2){
            background-color: pink;
        }
        .a li:nth-child(3){
            background-color: orange;
        }
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
31.2弹性容器上的样式_主轴——H5C3

<!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> *{ mar
复制链接

扫一扫

专栏目录