zoukankan      html  css  js  c++  java
  • grid 布局 属性示例

    <!DOCTYPE html>
    <html lang="zh">
    
        <head>
            <meta charset="UTF-8" />
            <meta name="viewport" content="width=device-width, initial-scale=1.0" />
            <meta http-equiv="X-UA-Compatible" content="ie=edge" />
            <title>grid 布局 属性示例</title>
            <style type="text/css">
                * {
                    margin: 0;
                    padding: 0;
                }
                
                .container {
                    display: grid;
                    /*列布局*/
                    grid-template-columns: 1fr 2fr;
                    /*行布局*/
                    grid-template-rows: 100% 100%;
                    /*列间距*/
                    grid-column-gap: 15px;
                    /*行间距*/
                    grid-row-gap: 15px;
                    /*行轴对齐方式*/
                    justify-items: stretch;
                    /*列轴对齐方式*/
                    align-items: stretch;
                    
                    /*网格总大小小于网格容器大小时,网格容器内的网格行轴对齐方式*/
                    justify-content:center;
                    /*网格总大小小于网格容器大小时,网格容器内的网格列轴对齐方式*/
                    align-content:center;
                }
                .item{
                    text-align: center;
                    /*沿着行轴对齐grid item 里的内容*/
                    justify-self:stretch;
                    /*沿着列轴对齐grid item 里的内容*/
                    align-self: center;
                }
                
                .item-1 {
                    background: #008000;
                }
                
                .item-2 {
                    background: #808080;
                }
                
                .item-3 {
                    background: gold;
                }
                
                .item-4 {
                    background: pink;
                }
                
                .item-5 {
                    background: yellow;
                }
                
                .item-6 {
                    background: #FFD700;
                }
            </style>
        </head>
    
        <body>
            <div class="container">
                <div class="item item-1">1</div>
                <div class="item item-2">2</div>
                <div class="item item-3">3</div>
                <div class="item item-4">4</div>
                <div class="item item-5">5</div>
                <div class="item item-6">6</div>
            </div>
        </body>
    
    </html>
  • 相关阅读:
    C#多线程的简单理解
    CSS中图片水平垂直居中方法小结
    浅析JavaScript的prototype
    记kkpager分页控件的使用
    面试必问的 volatile
    观察者模式——从JDK到Spring
    Java 内存模型都不会,就敢在简历上写熟悉并发编程吗
    工厂模式,就这一篇搞定
    JVM解毒——类加载子系统
    JVM解毒——JVM与Java体系结构
  • 原文地址:https://www.cnblogs.com/mengfangui/p/9243606.html
Copyright © 2011-2022 走看看