css3 flex 详解,可以实现div内容水平垂直居中

喜欢ヅ旅行 2021-07-04 20:54 382阅读 0赞

先说一下`flex`一系列属性：

## 一、`flex-direction`: （元素排列方向） ##

※ `flex-direction:row` （横向从左到右排列左对齐）  
![在这里插入图片描述][2019120812480797.png]  
※ `flex-direction:row-reverse` （与row 相反）  
![在这里插入图片描述][20191208124819574.png]　  
※ `flex-direction:column` （从上往下排列顶对齐）  
![在这里插入图片描述][20191208124828409.png]　　　　　  
※ `flex-direction:column-reverse` （与column 相反）  
![在这里插入图片描述][20191208124835754.png]

## 二、`flex-wrap`: （内容一行容不下的时候才有效） ##

※ `flex-wrap:nowrap` （超出不换行，很奇怪里面的宽度会变成100%）  
![在这里插入图片描述][2019120812530330.png]  
　　　　　　  
※ `flex-wrap:wrap` （超出按父级的高度平分）  
![在这里插入图片描述][20191208125309143.png]  
　　　　　　  
※ `flex-wrap:wrap-reverse`（与wrap 相反）  
![在这里插入图片描述][20191208125316684.png]

## 三、`justify-content`: （水平对齐方式） ##

※ `flex-start` （水平左对齐）  
![在这里插入图片描述][20191208125323342.png]  
　　　　　　　  
※ `justify-content:flex-end;` （水平右对齐）  
![在这里插入图片描述][20191208125330857.png]  
　　　　　　　　  
※ `justify-content:center;` （水平居中对齐）  
![在这里插入图片描述][20191208125338117.png]  
　　　　　　　　  
※ `justify-content:space-between;` （两端对齐）  
![在这里插入图片描述][20191208125343993.png]  
　　　　　　　　  
※ `justify-content:space-around;` （两端间距对其）  
![在这里插入图片描述][20191208125351553.png]

## 四、`align-items`: （垂直对齐方式） ##

※ `align-items:stretch;` （默认）  
![在这里插入图片描述][20191208125400876.png]  
　　　　　　　　  
※ `align-items:flex-start;` （上对齐，和默认差不多）  
![在这里插入图片描述][20191208125411380.png]  
　　　　　　　　  
※ `align-items:flex-end;` （下对齐）  
![在这里插入图片描述][20191208125417790.png]  
　　　　　　　　  
※ `align-items:center;`（居中对齐）  
![在这里插入图片描述][20191208125430674.png]  
　　　　　　　　　  
※ `align-items:baseline;` （基线对齐）

还没搞明白基线对齐是什么意思。

--------------------

以上是对`flex`的简单介绍。下面有个小例子，

大家经常用到的，某个`div`里面水平垂直居中，  
![在这里插入图片描述][20191208125221134.png]

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
            <title></title>
            <style type="text/css"> #box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; align-items:center; justify-content:center; } .item{ width: 50px; height: 40px; border: 1px solid #00C1B3; } </style>
        </head>
        <body>
            <div id="box">
                <div class="item">1</div>
                <div class="item">2</div>
                <div class="item">3</div>
                <div class="item">4</div>
                <div class="item">5</div>
            </div>
        </body>
    </html>

[2019120812480797.png]: /images/20210704/27bcbfca41db475ebf58f63b5fce4fc1.png
[20191208124819574.png]: /images/20210704/78bcaff1df6644c89e6a7e161cd26630.png
[20191208124828409.png]: /images/20210704/9ffb35a4099d412991e95dc03ba57314.png
[20191208124835754.png]: /images/20210704/c8ddf32abd4b4abfa377aa4dbc6f67f8.png
[2019120812530330.png]: /images/20210704/61610bc249bf4ae4b8b59d655d5d8658.png
[20191208125309143.png]: /images/20210704/b14e4dd1a8af427e8e301ae4274bb198.png
[20191208125316684.png]: /images/20210704/dccf926e941c4c65b25135925c1c869e.png
[20191208125323342.png]: /images/20210704/9db355ab9080451486ba0f4f384ba291.png
[20191208125330857.png]: /images/20210704/1bafcd386e7a4b25a127d21e723fb8ac.png
[20191208125338117.png]: /images/20210704/7e9456115500403bbe2df601ab1d9220.png
[20191208125343993.png]: /images/20210704/cec2012f4e3845eaa501c8413a497f2e.png
[20191208125351553.png]: /images/20210704/57f7ed7ce9714c678ac425cb94535dda.png
[20191208125400876.png]: /images/20210704/e6cf6ac569474091a12692ff2f37c40d.png
[20191208125411380.png]: /images/20210704/ccb455bb232345bbbb94568479b5b5f0.png
[20191208125417790.png]: /images/20210704/3800a161329848bc9e497a336e53df77.png
[20191208125430674.png]: /images/20210704/dd0c11c449d34b7495459d932f206b12.png
[20191208125221134.png]: /images/20210704/e46780492e9548d1bd1f584adbbb2ccf.png