前端flex布局心得

最新推荐文章于 2022-03-14 20:03:08 发布

肖哒哒啊

最新推荐文章于 2022-03-14 20:03:08 发布

阅读量223

点赞数

分类专栏：前端文章标签： css css3

本文链接：https://blog.csdn.net/qq_38618788/article/details/110776642

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>
    <title>test-indexOf</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        div {
            display: flex;
            /* flex-direction属性决定主轴的方向    flex-direction: row | row-reverse | column | column-reverse; */
            flex-direction: row;
            /* flex-wrap是否换行排列  flex-wrap: nowrap | wrap | wrap-reverse; */
            flex-wrap: wrap;
            /*justify-content属性定义了项目在主轴上的对齐方式。 justify-content: flex-start | flex-end | center | space-between | space-around; */
            justify-content: center;
            /*align-items属性定义项目在交叉轴上如何对齐 align-items: flex-start | flex-end | center | baseline | stretch; */
            align-items: center;
            /*align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。 align-content: flex-start | flex-end | center | space-between | space-around | stretch; */
            align-content: flex-start;
        }

        span {
            width: 100px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>

<body>
    <div>
        <span>
            1
        </span>
        <span>
            2
        </span>
        <span>
            3
        </span>
        <span>
            4
        </span>
        <span>
            5
        </span>
        <span>
            6
        </span>
    </div>
</body>

</html>