zoukankan      html  css  js  c++  java
  • Html5 之弹性布局

    编写代码

    <!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>
            .box{
                 612px;
                /* height: 904px; */
                border: orangered 1px solid;
                /* margin: 0px; */
                display:flex;
                flex-wrap:wrap;
                flex-direction: row;
                justify-content: center;
                align-items: center;
                /* box-sizing:content-box; */
                padding: 1px;
                
                
            }
            .box div{
                
                 200px;
                height: 200px;
                background-color: pink;
                border:black 1px solid;
                border-radius: 10px;
                text-align: center;
                line-height: 200px;
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                box-sizing:content-box;
                margin: 1px;
                
    
            }
        </style>
    
    </head>
    <body>
        <div class="box">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
    
        </div>
    
    </body>
    </html>
    

    运行结果

  • 相关阅读:
    22 有序化模块
    21模块
    Day20 继承
    Day19 约束
    面向对象 成员
    面向对象01
    内置函数、匿名函数、递归、二分法
    生成器函数 推导式
    Unity3D 实现方块跑酷
    day30-2018-12-3-进程
  • 原文地址:https://www.cnblogs.com/d534/p/15144113.html
Copyright © 2011-2022 走看看