小編給大家分享一下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>
上面的代碼和效果圖是屬性為row時的效果
注意：雖然是設置好的寬度，但是父容器只有300px，子div沒法達到100px，而是適應父容器
只需要將 flex-direction: row代碼替換成flex-direction:row-revese 或者flex-direction:column 或則flex-direction:column-reserve，就可以得到不同的效果
下面是效果圖：
row-revese
-------
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>
這是換行的代碼和效果圖
-------
將屬性flex-wrap: wrap 替換成nowrap（不換行）、wrap-reverse（方向換行）得到的效果圖如下：
nowrap
-----
wrap-reverse
---------
第三個屬性和用法：justify-content
包含的屬性有：justify-content: start | end | flex-start | flex-end | center | left | right | space-between | space-around | space-evenly | stretch | safe | unsafe | baseline | first baseline | last baseline
（這些屬性都是抄別人的）
flex-start（默認值）：左對齊；
左對齊
flex-end：右對齊
右對齊
center：居中；
居中對齊space-between：兩端對齊，項目之間間隔相等；
兩端對齊space-around：每個項目兩側的間隔相等，即項目之間的間隔比項目與邊框的間隔大一倍。
以上是“CSS中display：flex布局的使用示例”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
