Flex Layout
flex布局的功能十分強(qiáng)大悦陋,目前 Bootstrap
等CSS庫(kù)威根,都采用Flex布局徘六。
Flex
Flex 是 Flexible Box 的縮寫锄贼,意為”彈性布局”,使用它之前:
#box {
display: flex;
}
.items {
width: 100px;
height: 100px;
}
僅僅給它一個(gè)裝它用的盒子注簿,它就能自動(dòng)幫你開(kāi)始布局了F跫!诡渴!
子元素的屬性
事實(shí)上捐晶,子元素是存在屬性你可以這樣設(shè)置:
#box {
display: flex;
}
.items {
flex: 1 1 100px;
}
那么這三個(gè)數(shù)字分別代表:flex-grow,flex-shrink妄辩,flex-basis的值租悄,你完全可以寫作:
#box {
display: flex;
}
.items {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 100px;
}
- flex-grow,擴(kuò)展比率恩袱;
- flex-shrink泣棋,收縮比率;
- flex-basis畔塔,伸縮基準(zhǔn)值潭辈,相當(dāng)于你給它設(shè)置最小寬度(width);
Flex 柵格系統(tǒng)
在這之前澈吨,相信你一定了解浮動(dòng)實(shí)現(xiàn)柵格系統(tǒng)了把敢,這次,我們使用 flex 完成柵格系統(tǒng):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="./index.css">
</head>
<body>
<div class="Container">
<div class="row">
<div class="one column">ONE</div>
<div class="eleven columns">ELEVEN</div>
</div>
<div class="row">
<div class="two columns">TWO</div>
<div class="ten columns">TEN</div>
</div>
<div class="row">
<div class="three columns">THREE</div>
<div class="nine columns">NINE</div>
</div>
<div class="row">
<div class="four columns">FOUR</div>
<div class="eight columns">EIGHT</div>
</div>
<div class="row">
<div class="five columns">FIVE</div>
<div class="seven columns">SEVEN</div>
</div>
<div class="row">
<div class="six columns">SIX</div>
<div class="six columns">SIX</div>
</div>
<div class="row">
<div class="seven columns">SEVEN</div>
<div class="five columns">FIVE</div>
</div>
<div class="row">
<div class="eight columns">EIGHT</div>
<div class="four columns">FOUR</div>
</div>
<div class="row">
<div class="nine columns">NINE</div>
<div class="three columns">THREE</div>
</div>
<div class="row">
<div class="ten columns">TEN</div>
<div class="two columns">TWO</div>
</div>
<div class="row">
<div class="eleven columns">ELEVEN</div>
<div class="one column">ONE</div>
</div>
</div>
</body>
</html>
我們要將頁(yè)面分為12個(gè)等份谅辣,然后使用 flex 實(shí)現(xiàn)柵格系統(tǒng)修赞。
body {
font-family: "Raleway", "HelveticaNeue", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 12px;
}
.Container {
position: relative;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
-moz-box-sizing: border-box;
overflow: hidden; /* 觸發(fā) BFC 規(guī)則,避免子元素浮動(dòng)后的父元素失去寬和高 */
}
.row {
display: flex;
}
.column,
.columns {
width: 100%;
float: left; /* 觸發(fā) BFC 規(guī)則 */
box-sizing: border-box;
font-weight: 400;
letter-spacing: .1rem;
margin-bottom: 1%;
background-color: #CCC;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 5px;
}
.column:first-child,
.columns:first-child {
margin-right: 4%;
}
.one.column,
.one.columns {
flex: 0 0 4.66666666667%;
}
.two.columns { flex: 0 0 13.3333333333%; -ms-flex: 0 0 13.3333333333%; }
.three.columns { flex: 0 0 22%; -ms-flex: 0 0 22%; }
.four.columns { flex: 0 0 30.6666666667%; -ms-flex: 0 0 30.6666666667% }
.five.columns { flex: 0 0 39.3333333333%; -ms-flex: 0 0 39.3333333333%;}
.six.columns { flex: 0 0 48%; -ms-flex: 0 0 48%;}
.seven.columns{ flex: 0 0 56.6666666667%; -ms-flex: 0 0 56.6666666667%;}
.eight.columns{ flex: 0 0 65.3333333333%; -ms-flex: 0 0 65.3333333333%; }
.nine.columns { flex: 0 0 74.0%; -ms-flex: 0 0 74.0%; }
.ten.columns { flex: 0 0 82.6666666667%; -ms-flex: 0 0 82.6666666667%;}
.eleven.columns { flex: 0 0 91.3333333333%; -ms-flex: 0 0 91.3333333333%;}
.twelve.columns { flex: 0 0 100%; -ms-flex: 0 0 100%; margin-left: 0; }
本質(zhì)上很簡(jiǎn)單桑阶,也很好理解柏副,我們只設(shè)置 flex-basis (伸縮基準(zhǔn)值),就可以完成柵格系統(tǒng)蚣录。
父元素的屬性
如上所示割择,子元素可以設(shè)定屬性,那么父元素也能夠設(shè)定屬性萎河,父元素總共有6大屬性
- flex-direction荔泳,設(shè)定子元素是:橫向還是縱向排列蕉饼。
- flex-wrap,設(shè)定如果子元素超過(guò)一行玛歌,是否換行和換行順序昧港。
- flex-flow,有兩個(gè)值支子,第一個(gè)是 flex-direction创肥,第二個(gè)值是 flex-wrap
- justify-content,設(shè)定X軸的對(duì)齊方式
- align-items译荞,設(shè)定Y軸的對(duì)齊方式
- align-content,把所有子元素看作整體休弃,設(shè)定整體的對(duì)齊方式吞歼。
在這里我就不重復(fù)演示了,阮一峰老師的文章已經(jīng)講得非常清楚了塔猾。
擴(kuò)展:父元素 justify-content
篙骡,align-items
兩個(gè)屬性,很簡(jiǎn)單就能實(shí)現(xiàn)垂直居中丈甸。
參考文章
- [阮一峰:Flex 布局教程] [http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html]
- [Bootstrap源碼:4.1.2] [https://github.com/twbs/bootstrap/blob/v4-dev/dist/css/bootstrap.css]
- [菜鳥(niǎo)教程:Flex 布局語(yǔ)法教程] [http://www.runoob.com/w3cnote/flex-grammar.html]