CSS的CSS的CSS的flexbox如何使用如何使用如何使用(Flexible Box Layout Module)透過對父元素寫簡單指令,可以對多個子元素進行各種各樣的佈局的調整,本篇文章就來給大家介紹CSS中CSS的CSS的CSS的flexbox如何使用如何使用如何使用的使用方法。
將Flexbox設定為父元素,這是非常重要的一點。首先輸入要套用的項目的父元素,如下所示。
display: flex;
要套用於內聯元素,請輸入以下內容。
display:inline-flex;
寫入這個的元素將自動成為“Flex容器”,其子元素將為“Flexbox”,這樣就使Flexbox屬性可用。我們來寫一些典型的屬性。
flex-direction的使用
flex-direction是可以指定內容的排列方式的屬性。
我們來建立以下的HTML和CSS,改變CSS中flex-direction的值
HTML程式碼
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <div class="menu"> <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>
CSS程式碼
#style .css
.menu{ display: flex; flex-direction: row; } .item{ text-align: center; width: 50px; height: 20px; padding : 3%; margin : 3%; background-color: #c97796; color: white; }
當flex-direction設定為row時是水平顯示的,效果如下
#flex-wrap的使用
flex-wrap屬性用於指定彈性盒子的子元素換行方式。 我們來看具體的範例HTML程式碼與上述範例相同CSS程式碼style.css.menu{ display: flex; flex-direction: row; flex-wrap: nowrap; } .item{ text-align: center; width: 50px; height: 20px; padding : 3%; margin : 3%; background-color: #c97796; color: white; }flex- wrap的值設定為nowrap時,效果如下 flex-wrap的值設定為wrap時,效果如下
##flex-wrap的值設定為wrap-reverse時,效果如下
#justify-content的使用justify- content是指定內容的位置的屬性。
一樣的,我們來設定justify-content的各個值
HTML程式碼與上述相同
CSS程式碼
style.css
.menu{ display: flex; flex-direction: row; justify-content: flex-start; } .item{ text-align: center; width: 50px; height: 20px; padding : 3%; margin : 3%; background-color: #c97796; color: white; }
justify-content的值設定為flex-start時,左對齊,效果如下
當它是水平的時,它是左對齊,當它是垂直的它是上對齊。
justify-content的值設定為flex-end
時,右邊對齊,效果如下
(當它是水平的時,它是右對齊,當它是垂直的它是下對齊。)
justify-content的值設定為center時,居中對齊
以上是CSS的flexbox如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!