我對(duì) Flex 布局的一些認(rèn)知

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)垂直居中丈甸。

參考文章


最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末糯俗,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子睦擂,更是在濱河造成了極大的恐慌得湘,老刑警劉巖,帶你破解...
    沈念sama閱讀 217,907評(píng)論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件顿仇,死亡現(xiàn)場(chǎng)離奇詭異淘正,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī)臼闻,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,987評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門鸿吆,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人述呐,你說(shuō)我怎么就攤上這事惩淳。” “怎么了乓搬?”我有些...
    開(kāi)封第一講書人閱讀 164,298評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵思犁,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我进肯,道長(zhǎng)抒倚,這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書人閱讀 58,586評(píng)論 1 293
  • 正文 為了忘掉前任坷澡,我火速辦了婚禮托呕,結(jié)果婚禮上含蓉,老公的妹妹穿的比我還像新娘。我一直安慰自己项郊,他們只是感情好馅扣,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,633評(píng)論 6 392
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著着降,像睡著了一般差油。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上任洞,一...
    開(kāi)封第一講書人閱讀 51,488評(píng)論 1 302
  • 那天蒙谓,我揣著相機(jī)與錄音,去河邊找鬼付材。 笑死刨肃,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的盅弛。 我是一名探鬼主播钱骂,決...
    沈念sama閱讀 40,275評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼挪鹏!你這毒婦竟也來(lái)了见秽?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書人閱讀 39,176評(píng)論 0 276
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤讨盒,失蹤者是張志新(化名)和其女友劉穎解取,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體返顺,經(jīng)...
    沈念sama閱讀 45,619評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡肮蛹,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,819評(píng)論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了创南。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片伦忠。...
    茶點(diǎn)故事閱讀 39,932評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖稿辙,靈堂內(nèi)的尸體忽然破棺而出昆码,到底是詐尸還是另有隱情,我是刑警寧澤邻储,帶...
    沈念sama閱讀 35,655評(píng)論 5 346
  • 正文 年R本政府宣布赋咽,位于F島的核電站,受9級(jí)特大地震影響吨娜,放射性物質(zhì)發(fā)生泄漏脓匿。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,265評(píng)論 3 329
  • 文/蒙蒙 一宦赠、第九天 我趴在偏房一處隱蔽的房頂上張望陪毡。 院中可真熱鬧米母,春花似錦、人聲如沸毡琉。這莊子的主人今日做“春日...
    開(kāi)封第一講書人閱讀 31,871評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)桅滋。三九已至慧耍,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間丐谋,已是汗流浹背芍碧。 一陣腳步聲響...
    開(kāi)封第一講書人閱讀 32,994評(píng)論 1 269
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留号俐,地道東北人泌豆。 一個(gè)月前我還...
    沈念sama閱讀 48,095評(píng)論 3 370
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像萧落,于是被迫代替她去往敵國(guó)和親践美。 傳聞我的和親對(duì)象是個(gè)殘疾皇子洗贰,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,884評(píng)論 2 354

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