31.3弹性容器上的样式_副轴——H5C3

最新推荐文章于 2024-07-25 11:52:08 发布

StudiousTiger

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量75

点赞数

文章标签： css html html5 css3

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

版权

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: 600px;
            height: 800px;
            border: 10px red solid;
            /* 设置ul为弹性容器 */
            display: flex;
            flex-wrap: wrap;

            /* align-items:   元素在副轴上符合对齐（元素间的关系）
                    可选值：
                        stretch         默认值，将每一行的元素的高度设置为同样的值
                        flex-start      沿着副轴的起边对齐
                        flex-start      沿着副轴的终边对齐
                        center          居中对齐
                        baseline        基线对齐(字体大小一样时，和flex-start的效果一样
            */
            /* align-items:stretch; */
            /* align-items: flex-start; */
            /* align-items: flex-end; */
            /* justify-content: center; */
            /* align-items: center;   水平，垂直居中对齐
            justify-content: center; */
            align-items: baseline;

            /* 
             align-content   副轴空白空间分布——和justify-contende 的可选值类似
                    -可选值：
                            flex-start      元素沿着主轴的起边排列
                            flex-end        元素沿着主轴的终边排列
                            center          元素居中排列
                            space-around    空白平均分布在各个弹性元素两侧
                            space-between   空白均匀分布到元素间
                            space-evenly    空白平均分布在各个元素的单侧（兼容性不是特别好）
             */
             align-content: space-evenly;
        }
        .a li{
            width: 200px;
            /* height: 100%; */
            background-color: #bbffcc;
            font-size: 50px;
            text-align: center;
            line-height: 100px;
        }
        .a li:nth-child(1){
            /* align-self :   用来覆盖当前弹性元素上的align-items */
            /* 单独设置第一个li元素沿着主轴的终边排列 */
            align-self: flex-end;
        }
        .a li:nth-child(2){
            background-color: pink;
        }
        .a li:nth-child(3){
            background-color: orange;
        }
        .a li:nth-child(4){
            background-color: yellow;
        }
        .a li:nth-child(5){
            background-color: chocolate;
        }
    </style>
</head>
<body>
    <ul class="a">
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
        <li>3
            <div>3</div>
            <div>3</div>
        </li>
        <li>1</li>
        <li>2
            <div>2</div>
        </li>
    </ul>
</body>
</html>

StudiousTiger

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
31.3弹性容器上的样式_副轴——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
复制链接

扫一扫

专栏目录