全面了解flex的用途
更新時間：2016年06月27日 11:39:46 投稿：jingxian
下面小編就為大家?guī)硪黄媪私鈌lex的用途。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
一、可以利用flex來布局一個div在另一個div里面水平垂直居中
如：html代碼：
<div class="container"> <div class="box"> </div> </div>
css代碼：
.container{
width:600px;
height:400px;
border:1px solid blue;
display: flex;
justify-content:center;
align-items:center;
}
.box{
width:200px;
height:100px;
border:1px red solid;
ps:這樣就可以水平垂直居中咯
二、flex的屬性
<div class="items"> <div class="item">1</div> <div class="item">23</div> <div class="item">4</div> </div>
可以寫在items上的屬性有六個：
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
可以寫在item上的有6個：
•order//這個就是item單獨給了,要是想讓那個item調(diào)換順序就給這個屬性給那個item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self
以上就是小編為大家?guī)淼娜媪私鈌lex的用途全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
Flex4 DataGrid中嵌入RadioButton實現(xiàn)思路及代碼
本節(jié)主要介紹了Flex4 DataGrid中嵌入RadioButton實現(xiàn)思路及代碼,需要的朋友可以參考下2014-07-07
在flex中對label進行字體加粗的時候，只能對英文的字體加粗，而中文的就不可以加粗，解決方法如下，希望對大家有所幫助2014-01-01
flex chrome瀏覽器調(diào)試出現(xiàn)空白的解決方法
flex瀏覽器調(diào)試出現(xiàn)空白，原因是谷歌有個默認的flash播放器，只要將默認的播放器禁用，留下新安裝的插件，就OK了2014-02-02
Flex4.5，為了使項目能正確美化字體，并消除字體的鋸齒，下面為大家講解下關(guān)于字體的應用，感興趣的朋友可以參考下2013-08-08
這篇文章主要介紹了Flex中通過RadioButton進行切換示例代碼,需要的朋友可以參考下2014-02-02
flex打印操作(FlexPrintJob)還有分頁打印操作具體實現(xiàn)
如果要使用分頁效果，則必須使用標簽"PrintAdvancedDataGrid"(Flex3中的標簽)才能夠?qū)崿F(xiàn)分頁效果，感興趣的朋友可以參考下2013-04-04
這篇文章主要介紹了flex如何自定義按鈕皮膚,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了Flex DataGrid如何自動編號，感興趣的朋友可以參考下2014-05-05
Flex Realspace產(chǎn)品在sp3時上線，急需制作幫助文檔,由于在開發(fā)的時候沒有考慮后期的幫助文檔,查了很多資料，希望通過ASDoc達成愿望,感興趣的朋友可以了解下，或許對你有所幫助2013-02-02
這篇文章主要介紹了Flex讀取txt文件中的內(nèi)容報錯原因分析及解決,需要的朋友可以參考下2014-05-05