flex布局

CSS3在布局方面做了非常大的改進,使得我們對塊級元素的布局排列變得十分靈活端仰,適應(yīng)性非常強捶惜,其強大的伸縮性,在響應(yīng)式開中可以發(fā)揮極大的作用荔烧。

主軸:Flex容器的主軸主要用來配置Flex項目吱七,默認是水平方向

側(cè)軸:與主軸垂直的軸稱作側(cè)軸汽久,默認是垂直方向的

方向:默認主軸從左向右,側(cè)軸默認從上到下

主軸和側(cè)軸并不是固定不變的踊餐,通過flex-direction可以互換景醇。

2、各屬性詳解****

1.flex子項目在主軸的縮放比例吝岭,不指定flex屬性三痰,則不參與伸縮分配

min-width? 最小值? ? ? min-width: 280px? 最小寬度? 不能小于 280

max-width: 1280px? 最大寬度? 不能大于 1280

2.flex-direction調(diào)整主軸方向(默認為水平方向)

flex-direction: column 垂直排列

flex-direction: row? 水平排列

http://m.ctrip.com/html5/? 攜程網(wǎng)手機端地址

3、justify-content調(diào)整主軸對齊(水平對齊)

子盒子如何在父盒子里面水平對齊

值描述白話文

flex-start默認值窜管。項目位于容器的開頭酒觅。讓子元素從父容器的開頭開始排序但是盒子順序不變

flex-end項目位于容器的結(jié)尾。讓子元素從父容器的后面開始排序但是盒子順序不變

center項目位于容器的中心微峰。讓子元素在父容器中間顯示

space-between項目位于各行之間留有空白的容器內(nèi)。左右的盒子貼近父盒子抒钱,中間的平均分布空白間距

space-around項目位于各行之前蜓肆、之間、之后都留有空白的容器內(nèi)谋币。相當(dāng)于給每個盒子添加了左右margin外邊距

4仗扬、align-items調(diào)整側(cè)軸對齊(垂直對齊)

子盒子如何在父盒子里面垂直對齊(單行)

值描述白話文

stretch默認值。項目被拉伸以適應(yīng)容器蕾额。讓子元素的高度拉伸適用父容器(子元素不給高度的前提下)

center項目位于容器的中心早芭。垂直居中

flex-start項目位于容器的開頭。垂直對齊開始位置 上對齊

flex-end項目位于容器的結(jié)尾诅蝶。垂直對齊結(jié)束位置 底對齊

5退个、flex-wrap控制是否換行

當(dāng)我們子盒子內(nèi)容寬度多于父盒子的時候如何處理

值描述

nowrap默認值。規(guī)定靈活的項目不拆行或不拆列调炬。? 不換行语盈,則 收縮(壓縮) 顯示? 強制一行內(nèi)顯示

wrap規(guī)定靈活的項目在必要的時候拆行或拆列。

wrap-reverse規(guī)定靈活的項目在必要的時候拆行或拆列缰泡,但是以相反的順序刀荒。

6、flex-flow是flex-direction棘钞、flex-wrap的簡寫形式

flex-flow:flex-directionflex-wrap;

白話記:? ? flex-flow: 排列方向? 換不換行;

兩個中間用空格

例如:

display:flex;

/* flex-direction: row;

flex-wrap: wrap; ? 這兩句話等價于下面的這句話*/

flex-flow:columnwrap;/* 兩者的綜合 */

7缠借、align-content堆棧(由flex-wrap產(chǎn)生的獨立行)多行垂直對齊方式齊

align-content是針對flex容器里面多軸(多行)的情況,align-items是針對一行的情況進行排列。

必須對父元素設(shè)置自由盒屬性display:flex;宜猜,并且設(shè)置排列方式為橫向排列flex-direction:row;并且設(shè)置換行泼返,flex-wrap:wrap;這樣這個屬性的設(shè)置才會起作用。

值描述測試

stretch默認值宝恶。項目被拉伸以適應(yīng)容器符隙。

center項目位于容器的中心趴捅。

flex-start項目位于容器的開頭。

flex-end項目位于容器的結(jié)尾霹疫。

space-between項目位于各行之間留有空白的容器內(nèi)拱绑。

space-around項目位于各行之前、之間丽蝎、之后都留有空白的容器內(nèi)猎拨。

8、order控制子項目的排列順序屠阻,正序方式排序红省,從小到大

用css 來控制盒子的前后順序。? 用order 就可以

用整數(shù)值來定義排列順序国觉,數(shù)值小的排在前面吧恃。可以為負值麻诀。 默認值是 0

order:1;

此知識點重在理解痕寓,要明確找出主軸、側(cè)軸蝇闭、方向呻率,各屬性對應(yīng)的屬性值

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市呻引,隨后出現(xiàn)的幾起案子礼仗,更是在濱河造成了極大的恐慌,老刑警劉巖逻悠,帶你破解...
    沈念sama閱讀 216,402評論 6 499
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件元践,死亡現(xiàn)場離奇詭異,居然都是意外死亡童谒,警方通過查閱死者的電腦和手機卢厂,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,377評論 3 392
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來惠啄,“玉大人慎恒,你說我怎么就攤上這事∧於桑” “怎么了融柬?”我有些...
    開封第一講書人閱讀 162,483評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長趋距。 經(jīng)常有香客問我粒氧,道長,這世上最難降的妖魔是什么节腐? 我笑而不...
    開封第一講書人閱讀 58,165評論 1 292
  • 正文 為了忘掉前任外盯,我火速辦了婚禮摘盆,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘饱苟。我一直安慰自己孩擂,他們只是感情好,可當(dāng)我...
    茶點故事閱讀 67,176評論 6 388
  • 文/花漫 我一把揭開白布箱熬。 她就那樣靜靜地躺著类垦,像睡著了一般。 火紅的嫁衣襯著肌膚如雪城须。 梳的紋絲不亂的頭發(fā)上蚤认,一...
    開封第一講書人閱讀 51,146評論 1 297
  • 那天,我揣著相機與錄音糕伐,去河邊找鬼砰琢。 笑死凡涩,一個胖子當(dāng)著我的面吹牛勉耀,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播静尼,決...
    沈念sama閱讀 40,032評論 3 417
  • 文/蒼蘭香墨 我猛地睜開眼莺褒,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了雪情?” 一聲冷哼從身側(cè)響起遵岩,我...
    開封第一講書人閱讀 38,896評論 0 274
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎巡通,沒想到半個月后尘执,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 45,311評論 1 310
  • 正文 獨居荒郊野嶺守林人離奇死亡宴凉,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,536評論 2 332
  • 正文 我和宋清朗相戀三年誊锭,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片弥锄。...
    茶點故事閱讀 39,696評論 1 348
  • 序言:一個原本活蹦亂跳的男人離奇死亡丧靡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出籽暇,到底是詐尸還是另有隱情温治,我是刑警寧澤,帶...
    沈念sama閱讀 35,413評論 5 343
  • 正文 年R本政府宣布戒悠,位于F島的核電站熬荆,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏绸狐。R本人自食惡果不足惜卤恳,卻給世界環(huán)境...
    茶點故事閱讀 41,008評論 3 325
  • 文/蒙蒙 一累盗、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧突琳,春花似錦若债、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,659評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至冠息,卻和暖如春挪凑,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背逛艰。 一陣腳步聲響...
    開封第一講書人閱讀 32,815評論 1 269
  • 我被黑心中介騙來泰國打工躏碳, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人散怖。 一個月前我還...
    沈念sama閱讀 47,698評論 2 368
  • 正文 我出身青樓菇绵,卻偏偏與公主長得像,于是被迫代替她去往敵國和親镇眷。 傳聞我的和親對象是個殘疾皇子咬最,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,592評論 2 353

推薦閱讀更多精彩內(nèi)容