zoukankan      html  css  js  c++  java
  • css3伸缩布局中justify-content详解

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>CSS3伸缩布局</title>
        <style>
            body {
                margin: 0;
                padding: 0;
                font-family: '微软雅黑';
                background-color: #F7F7F7;
            }
    
            ul {
                margin: 0;
                padding: 0;
                list-style: none;
            }
    
            .wrapper {
                 1024px;
                margin: 0 auto;
            }
    
            .wrapper > section {
                min-height: 300px;
                margin-bottom: 30px;
                box-shadow: 1px 1px 4px #DDD;
                background-color: #FFF;
            }
    
            .wrapper > header {
                text-align: center;
                line-height: 1;
                padding: 20px;
                margin-bottom: 10px;
                font-size: 30px;
            }
    
            .wrapper section > header {
                line-height: 1;
                padding: 10px;
                font-size: 22px;
                color: #333;
                background-color: #EEE;
            }
    
            .wrapper .wrap-box {
                padding: 20px;
            }
    
            .wrapper .brief {
                min-height: auto;
            }
    
            .wrapper .flex-img {
                 100%;
            }
    
            /*全局设置*/
            section ul {
                /*把所有ul指定成了伸缩盒子*/
                display: flex;
                
                /*这里只是一个小的测试*/
                /*flex-direction: row-reverse;*/
            }
    
            section li {
                 200px;
                height: 200px;
                text-align: center;
                line-height: 200px;
                margin: 10px;
                background-color: pink;
            }
    
            .flex-start ul {
                justify-content: flex-start;
            }
    
            .flex-end ul {
                justify-content: flex-end;
            }
    
            .center ul {
                justify-content: center;
            }
    
            .space-around ul {
                justify-content: space-around;
            }
    
            .space-between ul {
                justify-content: space-between;
            }        
        </style>
    </head>
    <body>
        <div class="wrapper">
            <header>CSS3-伸缩布局详解</header>
    
            <!-- 简介 -->
            <section class="brief">
                <header>justify-content</header>
                <div class="wrap-box">
                    <p>主轴方向对齐,可以调整元素在主轴方向上的对齐方式,包括flex-start、flex-end、center、space-around、space-between几种方式</p>
                </div>
            </section>
    
            <!-- 分隔线 -->
            <section class="flex-start">
                <header>flex-start</header>
                <div class="wrap-box">
                    <p>起始点对齐</p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </section>
    
            <section class="flex-end">
                <header>flex-end</header>
                <div class="wrap-box">
                    <p>终止点对齐</p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </section>
    
            <section class="center">
                <header>center</header>
                <div class="wrap-box">
                    <p>居中对齐</p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </section>
    
            <section class="space-around">
                <header>space-around</header>
                <div class="wrap-box">
                    <p>四周环绕</p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </section>
            
            <section class="space-between">
                <header>space-between</header>
                <div class="wrap-box">
                    <p>两端对齐</p>
                    <ul>
                        <li>1</li>
                        <li>2</li>
                        <li>3</li>
                    </ul>
                </div>
            </section>
        </div>
    </body>
    </html>
  • 相关阅读:
    hdu 5400 Arithmetic Sequence(模拟)
    hdu 5402 Travelling Salesman Problem(大模拟)
    hdu 5009 Paint Pearls (dp)
    poj 1236 Network of Schools(tarjan+缩点)
    hdu 3836 Equivalent Sets(tarjan+缩点)
    编程之美2015初赛第一场 hihoCoder #1156 : 彩色的树(染色问题)
    hdu 2807 The Shortest Path(矩阵+floyd)
    The Unique MST (判断是否存在多个最小生成树)
    Advanced Fruits(好题,LCS的模拟)
    Dark roads(kruskal)
  • 原文地址:https://www.cnblogs.com/lsy0403/p/5935175.html
Copyright © 2011-2022 走看看