what's the meaning of Flexbox? 答：很久之前關(guān)于布局大概存在兩種：流式布局，定位和浮動(dòng)來解決东帅。浮動(dòng)導(dǎo)致的拖標(biāo)咆爽，我們需要通過清除浮動(dòng)來解決問題。定位啥子絕父相腮介；但現(xiàn)在有了更方便的方式來處理布局的問題有關(guān)彈性盒子的屬性傳送門MDN
速查知識(shí)點(diǎn)
語法篇參考阮老師flex 教學(xué)
一肥矢、柵格系統(tǒng)
前端代碼如何實(shí)現(xiàn)呢？
- grid_row定一個(gè)flex容器叠洗。
- 每一個(gè)子item節(jié)點(diǎn)作為flex容器中的子元素
Code：
<!--
作者：jeverson@163.com
時(shí)間：2016-11-23
描述：柵格系統(tǒng)
-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JJExample</title>
<style type="text/css">
.grid {
border: solid 1px #e7e7e7;
}
.grid_row {
/*定義一個(gè)flex容器甘改，每一個(gè)子item節(jié)點(diǎn)作為flex容器中的子元素*/
display: flex;
}
.grid_item {
/*將所有項(xiàng)目等寬的分布在容器中*/
flex: 1;
padding: 12px;
border: solid 1px #E7E7E7;
}
</style>
</head>
<body>
<div class="grid">
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
</div>
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
<div class="grid_item">jj_3</div>
</div>
<div class="grid_row">
<div class="grid_item">jj_1</div>
<div class="grid_item">jj_2</div>
<div class="grid_item">jj_3</div>
<div class="grid_item">jj_4</div>
</div>
</div>
</body>
</html>
想折騰一個(gè)列布局旅东，該怎么整呢？
-
so easy .grid-row樣式中聲明
flex-direction：coloumn - 這邊對(duì)屏幕尺寸收縮到尺寸時(shí)將執(zhí)行
flex-direction：row十艾。 - code：CSS樣式的設(shè)計(jì)
/*樣式的設(shè)計(jì)*/
.grid {
border: solid 1px #e7e7e7;
}
.grid_row {
/*定義一個(gè)flex容器抵代，每一個(gè)子item節(jié)點(diǎn)作為flex容器中的子元素*/
display: flex;
flex-direction: column;
}
.grid_item {
/*將所有項(xiàng)目等寬的分布在容器中*/
flex: 1;
padding: 12px;
border: solid 1px #E7E7E7;
}
@media only screen and (min-width: 480px) {
.grid_row--sm {
flex-direction: row;
}
}
@media only screen and (min-width: 720px) {
.grid_row--md {
flex-direction: row;
}
}
@media only screen and (min-width: 960px) {
.grid_row--lg {
flex-direction: row;
}
}
- 任務(wù)：一個(gè)響應(yīng)式柵欄布局CSS的代碼就能實(shí)現(xiàn)，整點(diǎn)事看看
嵌套柵欄如何
二忘嫉、圣杯布局
圣杯布局在網(wǎng)頁設(shè)計(jì)中非常著名荤牍，如果利用float，margin負(fù)值和最小寬度（min-width）來確保布局不沖突庆冕，以這種方式滿足響應(yīng)式布局的需求需要設(shè)計(jì)大量的運(yùn)算康吵，浮動(dòng)清除等一些特殊手段，那么Flexbox布局就能緩解這個(gè)局面愧杯。
woshi
2016/11/23 先到這邊吧涎才。
