溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下CSS中的flexbox怎么用，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
將Flexbox設置為父元素，這是非常重要的一個點。首先輸入要應用的項目的父元素，如下所示。
display:flex;
要應用于內聯元素，請輸入以下內容。
display：inline-flex;
寫入這個的元素將自動成為“Flex容器”，其子元素將為“Flexbox”，這樣就使Flexbox屬性可用。我們來寫一些典型的屬性。
flex-direction的使用
flex-direction是可以指定內容的排列方式的屬性。
我們來創建以下的HTML和CSS，更改CSS中flex-direction的值
HTML代碼
<!DOCTYPEhtml> <html> <head> <metacharset="utf-8"> <linkrel="stylesheet"type="text/css"href="style.css"> </head> <body> <divclass="menu"> <divclass="item"> 1 </div> <divclass="item"> 2 </div> <divclass="item"> 3 </div> <divclass="item"> 4 </div> <divclass="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;
}以上是“CSS中的flexbox怎么用”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
