整理CSS中display flex（佈局利器）

時間 2019-11-16

標籤整理 css display flex 佈局利器欄目 CSS 简体版

原文原文鏈接

關於display：flex佈局，有人瞭解頗深，我也是看着別人的東西學習的。html

display：flex的佈局是什麼、基本概念之類的我根本就不瞭解，只會用。每次看到概念之類的東西，我都是掃一眼就過去。佈局

第一個屬性和用法：flex-direction學習

我瞭解的方法有4個：row（水平排列）、row-revese（水平反向排列）、column（垂直排列）、column-reserve（垂直反向排列）flex

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-direction: row;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>

上面的代碼和效果圖是屬性爲row時的效果spa

注意：雖然是設置好的寬度，可是父容器只有300px，子div無法達到100px，而是適應父容器3d

只須要將 flex-direction: row代碼替換成 flex-direction: row-revese 或者 flex-direction: column 或則 flex-direction: column-reserve，就能夠獲得不一樣的效果code

下面是效果圖：orm

row-revesehtm

-------blog

column

-------

column-reverse

-------

第二個屬性和用法：flex-wrap

這是換行屬性：nowrap（不換行）、wrap（換行）、wrap-reverse（方向換行）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <div style="width:300px;border:1px solid red;display: flex;flex-wrap: wrap;">
            <div style="width: 100px;height: 100px;background-color: black;"></div>
            <div style="width: 100px;height: 100px;background-color: green;"></div>
            <div style="width: 100px;height: 100px;background-color: yellow;"></div>
            <div style="width: 100px;height: 100px;background-color: blue;"></div>
        </div>
    </body>
</html>