css3伸縮佈局中justify-content詳解

時間 2019-11-17
標籤 css3 css 伸縮佈局 justify content 詳解欄目 CSS 简体版
原文原文鏈接
<!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 {
            width: 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 {
            width: 100%;
        }

        /*全局設置*/
        section ul {
            /*把全部ul指定成了伸縮盒子*/
            display: flex;
            
            /*這裏只是一個小的測試*/
            /*flex-direction: row-reverse;*/
        }

        section li {
            width: 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。