<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>flex布局</title>
<style type="text/css">
.box{
width: 700px;
height: 500px;
border:2px red solid;
/*設(shè)置為彈性布局*/
display: flex;
/*設(shè)置容器內(nèi)部元素的排列方式（主軸方向）
row 從左往右
row-reverse 從右往左
column 從上往下
column-reverse 從下往上*/
flex-direction: row;
/*換行
nowrap 不換行
wrap 正常換行
wrap-reverse反向換行（第一排在下面咧虎，后面的依次往上排）
1.不換行的情況下焙糟，如果元素的總寬度超過容器歧譬，會(huì)按比例均分容器寬度（和table一樣）
2.換行只有在元素一行放不下的情況下才會(huì)換行
*/
flex-wrap: wrap;
/*flex-flow
復(fù)合寫法棺蛛，包含flex-direction和flex-wrap兩個(gè)屬性*/
font-size: 40px;
text-align: center;
/*當(dāng)元素不夠一行的時(shí)候厌殉，元素的排列方式
flex-start頂頭顯示
flex-end靠末尾顯示
center 居中顯示
space-between中間有空格
space-around：四周有空格*/
justify-content:flex-end;
/*flex-strat 頂部對(duì)齊塔沃；
flex-end 底部對(duì)齊
center 居中對(duì)齊
baseline 文字基線對(duì)齊
stretch 默認(rèn)阵翎，沒有設(shè)置元素寬和高的時(shí)候院领，可以拉伸双絮，充滿整個(gè)容器*/
align-items: baseline;
}
.box .div{
width: 100px;
height: 80px;
background-color: greenyellow;
}
.box .div1{
width: 100px;
height: 80px;
background-color: greenyellow;
/*font-size: 100px;*/
line-height: 90px;
}
.box .div2{
width: 100px;
height: 130px;
background-color: greenyellow;
/*該元素排列的順序浴麻，值越小越靠前*/
order: -1;
}
.box .div3{
width: 100px;
height: 240px;
background-color: greenyellow;
/*當(dāng)空間不足的情況下，該元素縮小的比例（只有不換行的時(shí)候才會(huì)空間不足）*/
flex-shrink: 3;
}
.box .div9{
/*讓該元素按比例平分剩余空間*/
/*flex-grow: 3;*/
/*在主軸方向上的大小
排列方式為row的話囤攀，主軸在X軸软免，代表是寬度
排列方式為column的話，主軸在Y軸焚挠，代表是高度*/
flex-basis: 300px;
}
.box .div10{
/*flex-grow: 1;*/
/*屬性為該元素單獨(dú)設(shè)置排列方式*/
align-self: flex-end;
}
</style>
</head>
<body>
<div class="box">
<div class="div1 div">1</div>
<div class="div2 div">2</div>
<div class="div3 div">3</div>
<div class="div4 div">4</div>
<div class="div5 div">5</div>
<div class="div6 div">6</div>
<div class="div7 div">7</div>
<div class="div8 div">8</div>
<div class="div9 div">9</div>
<div class="div10 div">10</div>
</div>
</body>
</html>
flex布局
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
- 文/潘曉璐 我一進(jìn)店門沛简，熙熙樓的掌柜王于貴愁眉苦臉地迎上來硼身，“玉大人，你說我怎么就攤上這事覆享〖阉欤” “怎么了？”我有些...
- 文/不壞的土叔 我叫張陵撒顿，是天一觀的道長(zhǎng)丑罪。 經(jīng)常有香客問我，道長(zhǎng)凤壁，這世上最難降的妖魔是什么吩屹？ 我笑而不...
- 正文 為了忘掉前任，我火速辦了婚禮拧抖，結(jié)果婚禮上煤搜，老公的妹妹穿的比我還像新娘。我一直安慰自己唧席，他們只是感情好擦盾，可當(dāng)我...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著淌哟，像睡著了一般迹卢。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上徒仓，一...
- 文/蒼蘭香墨 我猛地睜開眼，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼壁晒！你這毒婦竟也來了瓷们？” 一聲冷哼從身側(cè)響起，我...
- 序言：老撾萬榮一對(duì)情侶失蹤秒咐，失蹤者是張志新（化名）和其女友劉穎谬晕，沒想到半個(gè)月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體携取，經(jīng)...
- 正文 獨(dú)居荒郊野嶺守林人離奇死亡攒钳，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
- 正文 我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了雷滋。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片不撑。...
- 正文 年R本政府宣布实愚，位于F島的核電站兼呵，受9級(jí)特大地震影響，放射性物質(zhì)發(fā)生泄漏腊敲。R本人自食惡果不足惜击喂，卻給世界環(huán)境...
- 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望碰辅。 院中可真熱鬧懂昂，春花似錦、人聲如沸没宾。這莊子的主人今日做“春日...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽榕吼。三九已至饿序，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間羹蚣，已是汗流浹背。 一陣腳步聲響...
- 正文 我出身青樓徒蟆，卻偏偏與公主長(zhǎng)得像胁出，于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子段审，可洞房花燭夜當(dāng)晚...
推薦閱讀更多精彩內(nèi)容
- 作者：知乎用戶 鏈接 來源：知乎 圣杯布局的來歷是2006年發(fā)在a list part上的這篇文章： In Sea...
- flex-direction flex-direction的作用是設(shè)置元素在主軸上的排列方向。取值為： 實(shí)例: r...
- 語法 flex: flex-grow flex-shrink flex-basis主要有三個(gè)值flex-grow,...
- flex屬性默認(rèn)值為0姥闪，1始苇，auto。 結(jié)果是 如果增加1區(qū)域的內(nèi)容結(jié)果是 如果設(shè)置flex：1 等價(jià)于設(shè)置fle...
