CSS中display：flex布局的使用示例

發(fā)布時間：2021-03-22 11:39:58 來源：億速云閱讀：443 作者：小新欄目：web開發(fā)

小編給大家分享一下CSS中display：flex布局的使用示例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

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

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

<!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>

CSS中display：flex布局的使用示例

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

注意：雖然是設(shè)置好的寬度，但是父容器只有300px，子div沒法達(dá)到100px，而是適應(yīng)父容器

只需要將 flex-direction: row代碼替換成flex-direction:row-revese 或者flex-direction:column 或則flex-direction:column-reserve，就可以得到不同的效果

下面是效果圖：

CSS中display：flex布局的使用示例

row-revese

-------

CSS中display：flex布局的使用示例

column

-------

CSS中display：flex布局的使用示例

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>

CSS中display：flex布局的使用示例