flex常见的三种布局方式

作者: danihay | 来源:发表于2017-10-09 17:44 被阅读14次

css Grid布局
flex常见的三种布局方式
CSS实现三栏布局
css中的几种布局方式
css中常见的布局方式
【面试题】垂直居中
flex弹性布局
CSS的常见布局方式
【前端】flex布局
初见FLEX

image.png

  body {
            padding: 0;
            margin: 0 auto;
            color: #414141;
        }
        .flex-layout {
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
        }
        .flex-box {
            display: flex;
            margin: 20px;
            padding: 10px;
            background: #e2f4ab;
        }
        .flex-text {
            min-width: 400px;
            min-height: 45px;
            justify-content: center;
        }
        .flex-between {
            width: 600px;
            min-height: 45px;
            justify-content: space-between;
        }
        .flex-column {
            min-width: 200px;
            min-height: 200px;
            flex-direction: column;
            justify-content: center;
        }
        .line-layout {
            line-height: 25px;
            padding: 0 10px;
            text-align: center;
            font-size:16px;
            min-width:100px;
        }

<body>
    <div class="flex-layout">
        <div class="flex-box flex-column">
            <p class="line-layout">正则的扩展</p>
            <p class="line-layout">数值的扩展</p>
            <p class="line-layout">Proxy</p>
            <p class="line-layout">Generator 函数的异步应用</p>
            <p class="line-layout">Module 的语法</p>
        </div>
        <div class="flex-box flex-column">
            <p class="line-layout">正则的扩展</p>
            <p class="line-layout">数值的扩展</p>
        </div>
        <div class="flex-box flex-column">
            <p class="line-layout">Generator 函数的异步应用</p>
        </div>
    </div>
    <div class="flex-layout">
        <div class="flex-box  flex-text">
            <p class="line-layout">正则的扩展</p>
            <p class="line-layout">数值的扩展</p>
            <p class="line-layout">Proxy</p>
            <p class="line-layout">Generator 函数的异步应用</p>
            <p class="line-layout">Module 的语法</p>
        </div>
        <div class="flex-box flex-text">
            <p class="line-layout">正则的扩展</p>
            <p class="line-layout">数值的扩展</p>
        </div>
        <div class="flex-box flex-between">
            <p class="line-layout">函数的异步应用</p>
            <p class="line-layout">数值的扩展</p>
            <p class="line-layout">Proxy</p>
        </div>
        <div class="flex-box flex-between">
            <p class="line-layout">正则扩展</p>
            <p class="line-layout">Module 的语法</p>
            <p class="line-layout">数值的扩展</p>
            <p class="line-layout">Proxy</p>
        </div>
    </div>
</body>