【小练习】flex属性

效果图如下:
在这里插入图片描述
源码如下:

<!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>
.sky{
    display: flex;
    width: 200px;
    flex-wrap: wrap;
}
.box-content{
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    width: 50%;
    height: 60px;
}
.icon{
    width: 20px;
    height: 20px;
    display: inline-block;
    background: red;
}


    </style>

</head>
<body>
    <div class="sky">

        <div class="box-content">
            <span class="icon"></span>
            <span>文案1</span>
        </div>
        <div class="box-content">
            <span class="icon"></span>
            <span>文案1</span>
        </div>
        <div class="box-content">
            <span class="icon"></span>
            <span>文案1</span>
        </div>
        <div class="box-content">
            <span class="icon"></span>
            <span>文案1</span>
        </div>

    </div>
</body>
</html>

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/106248160