flex 属性值

智.

已于 2022-06-13 11:29:15 修改

阅读量159

点赞数

文章标签： html 前端

于 2022-05-27 15:56:23 首次发布

本文链接：https://blog.csdn.net/m0_67186884/article/details/125005579

版权

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge">

    <title>Document</title>

    <link rel="stylesheet" href="">

    <script src=""></script>

    <style>

        * {

            margin: 0;

            padding: 0;

        }

        ul {

            width: 80%;

            height: 600px;

            background-color: #df6921;

            margin: 40px auto;

            list-style: none;

            /* 弹性布局 */

            display: flex;

            /* 调整主轴的方向  row 水平方向为主轴 */

            /* flex-direction: row; */

            /* flex-direction: row-reverse; */

            /* flex-direction: column; */

            /* flex-direction: column-reverse; */

            /* 主轴的排列方式 */

            /* justify-content: flex-start; */

            /* justify-content: flex-end; */

            /* justify-content: center; */

            /* space-bettween  两端对齐 剩余的空间 平均分配 */

            /* justify-content: space-between; */

            /* justify-content: space-evenly; */

            /* justify-content: space-around; */

            /* flex-wrap: nowrap; */

            /* flex-wrap: wrap; */

            /* flex-flow: column wrap; */

            /* flex-direction: column; */

            /* justify-content: flex-end; */

            /* justify-content: flex-end; */

            /* 侧轴 */

            /* align-items: center; */

            /* align-items: flex-start; */

            /* align-items: flex-end; */

            justify-content: center;

            /* align-items: center; */

            /* align-items: baseline; */

            align-items: stretch;

        }

        li {

            width: 200px;

            height: 80px;

            margin-bottom: 5px;

            margin-left: 5px;

            background-color: #33886f;

            text-align: center;

            color: white;

        }

        li:nth-of-type(1) {

            font-size: 30px;

            /* height: auto; */

        }

        span {

            width: 200px;

            height: 80px;

            margin-bottom: 5px;

            margin-left: 5px;

            background-color: #08f557;

            text-align: center;

            color: white;

        }

    </style>

</head>

<body>

    <ul>

        <li>1</li>

        <li>2</li>

        <li>3</li>

        <li>4</li>

    </ul>

</body>

</html>