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