全面了解flex的用途
更新時(shí)間：2016年06月27日 11:39:46 投稿：jingxian
下面小編就為大家?guī)硪黄媪私鈌lex的用途。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧
一、可以利用flex來布局一個(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>
可以寫在items上的屬性有六個(gè)：
•flex-direction
•flex-wrap
•flex-flow
•justify-content
•align-items
•align-content
可以寫在item上的有6個(gè)：
•order//這個(gè)就是item單獨(dú)給了,要是想讓那個(gè)item調(diào)換順序就給這個(gè)屬性給那個(gè)item
•flex-grow
•flex-shrink
•flex-basis
•flex
•align-self
以上就是小編為大家?guī)淼娜媪私鈌lex的用途全部內(nèi)容了，希望大家多多支持腳本之家~
相關(guān)文章
Flex中 Array 的IndexOf用于在索引中從小到大查找，如果查得到就返回索引值，查不到就返回-1，下面有個(gè)示例，大家可以參考下2014-07-07
在Flex中給datagrid添加右鍵菜單項(xiàng)的具體實(shí)現(xiàn)
Flex中如何給datagrid添加右鍵菜單項(xiàng)，其實(shí)很簡單，下面有個(gè)不錯(cuò)的教程，感興趣的朋友可以參考下2013-12-12
這篇文章主要為大家介紹了利用R語言怎樣解壓與壓縮.tar.gz.zip等各種壓縮格式文件實(shí)現(xiàn)過程方法，有需要的朋友可以借鑒參考下希望能夠有所幫助2021-11-11
我們在做flex的開發(fā)中，如果用到別人搭建好的框架，而別人的server名稱往往是具有他們意義的項(xiàng)目名稱,那我們?nèi)绾涡薷某勺约旱哪?感興趣的朋友可以參考下本文，希望可以幫助到你2013-02-02
Flex Realspace產(chǎn)品在sp3時(shí)上線，急需制作幫助文檔,由于在開發(fā)的時(shí)候沒有考慮后期的幫助文檔,查了很多資料，希望通過ASDoc達(dá)成愿望,感興趣的朋友可以了解下，或許對(duì)你有所幫助2013-02-02
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例
如何在Renderer中設(shè)置屬性 Renderer中設(shè)置屬性的方法實(shí)例，需要的朋友可以參考一下2013-06-06
flex4.5中CSS選擇器的應(yīng)用小結(jié)
與HTML相似，F(xiàn)lex允許在MXML標(biāo)簽中通過CSS樣式來設(shè)置組件的外觀。到flex4.5后已經(jīng)基本上支持了HTML中的所有CSS的應(yīng)用方式，這里主要來列舉下flex4.5中CSS選擇器的使用方法2013-04-04
Flex調(diào)Javascript打開新窗口示例代碼
Flex通過調(diào)用Javascript打開全屏的新窗口新窗口示例代碼 ，具體實(shí)現(xiàn)代碼如下，感興趣的朋友可以參考下，希望對(duì)大家有所幫助2013-08-08
Flex4 DataGrid中嵌入RadioButton實(shí)現(xiàn)思路及代碼
本節(jié)主要介紹了Flex4 DataGrid中嵌入RadioButton實(shí)現(xiàn)思路及代碼,需要的朋友可以參考下2014-07-07
使用TilteWindow形式的彈出窗口發(fā)現(xiàn)有時(shí)候一不小心將窗口拖動(dòng)到上面就拖不回來了，導(dǎo)致彈出窗口無法關(guān)閉，下面有個(gè)解決方法2014-01-01