flex 居中向下平铺

 

 示例

HTML

<ul class="box">
        <li class="b-title">
            <img src="200x200.jpg" class="img">
            <h2>显示标题1</h2>
            <p>文字描述发大水 </p>
        </li>
      ....

 

 

CSS

    .box {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
        }

        .b-title {
            border: 1px solid red;
            height: 200px;
            width: 200px;
        }

        .img {
            width: 150px;
            height: 150px;
        }

        li {
            text-align: center;
            margin: 10px 0;
        }