zoukankan      html  css  js  c++  java
  • FlexItem 多行测试

    flex:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Flex</title>
    <style type="text/css">
    html, body {
        width: 100%;
    }
    .flex-container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 80%;
        margin: auto;
    }
    .flex-container {
        background-color: #F0f0f0;
    }
    .flex-container .flex-item{
        padding: 20px;
        background-color: #B1FF84;
    }
    </style>
    </head>
    <body>
    <div class="flex-container">
    <div class="flex-item">01</div>
    <div class="flex-item">02</div>
    <div class="flex-item">03</div>
    <div class="flex-item">04</div>
    <div class="flex-item">05</div>
    <div class="flex-item">06</div>
    <div class="flex-item">07</div>
    <div class="flex-item">08</div>
    <div class="flex-item">09</div>
    <div class="flex-item">10</div>
    <div class="flex-item">11</div>
    <div class="flex-item">12</div>
    <div class="flex-item">13</div>
    <div class="flex-item">14</div>
    <div class="flex-item">15</div>
    <div class="flex-item">16</div>
    </body>
    </html>
  • 相关阅读:
    第三周学习笔记
    质量属性
    第四周学习
    逻辑回归
    架构的概念
    第二周总结
    线性回归
    十步走-阅读笔记六
    十步走-阅读笔记五
    P2633 Count on a tree
  • 原文地址:https://www.cnblogs.com/exesoft/p/10793183.html
Copyright © 2011-2022 走看看