成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

Flex Box 簡(jiǎn)單彈性布局

ixlei / 898人閱讀

摘要：彈性盒子模型有兩種規(guī)范早起的和后期的。它可以輕易的實(shí)現(xiàn)均分浮動(dòng)居中等靈活布局，在移動(dòng)端只考慮內(nèi)核時(shí)很實(shí)用。一固定寬度占滿剩余寬度垂直方向?qū)R方式水平方向?qū)R方式二固定寬度剩余空間的剩余空間的水平方向?qū)R方式垂直方向?qū)R方式

　　彈性盒子模型有兩種規(guī)范：早起的display:box 和后期的display:flex。它可以輕易的實(shí)現(xiàn)均分、浮動(dòng)、居中等靈活布局，在移動(dòng)端只考慮webkit內(nèi)核時(shí)很實(shí)用。

一、display:box

 1     <div class="container">
 2         <div class="box1">box1<br/>固定寬度div>
 3         <div class="box2">box2<br>占滿剩余寬度div>
 4     div>
 5 
 6     <style type="text/css">
 7         .container{
 8             width: 400px;
 9             height: 120px;
10             border: 1px solid #ccc;
11             display: -webkit-box;
12             display: box;
13             -webkit-box-align: center;
14             box-align: center;
15             /*垂直方向?qū)R方式 box-align: start|end|center|baseline|stretch;*/
16             /*水平方向?qū)R方式 box-pack: start|end|center|justify;*/
17         }
18         .box1,.box2{
19             height: 100px;
20             margin: 0;
21             padding: 0;
22         }
23         .box1{
24             background: #aaa;
25             width: 100px;
26         }
27         .box2{
28             background: #ccc;
29             -webkit-box-flex:1.0;
30             box-flex:1.0;
31         }
32     style>

?

二、display:flex

 1     <div class="container">
 2         <div class="box1">固定寬度div>
 3         <div class="box2">剩余空間的1/3div>
 4         <div class="box3">剩余空間的2/3div>
 5     div>
 6 
 7     <style type="text/css">
 8         .container{
 9             width: 400px;
10             height: 120px;
11             border: 1px solid #ccc;
12             display: -webkit-flex;
13             display: flex;
14             -webkit-align-items: center;
15             align-items: center ;
16             /*水平方向?qū)R方式 justify-content: flex-start | flex-end | center | space-between | space-around;*/
17             /*垂直方向?qū)R方式 align-items: flex-start | flex-end | center | baseline | stretch;*/
18         }
19         .box1,.box2,.box3{
20             height: 100px;
21         }
22         .box1{
23             background: #bbb;
24             width: 100px;
25         }
26         .box2{
27             background: #ccc;
28             -webkit-flex:1;
29             flex:1;
30         }
31         .box3{
32             background: #ffffd;
33             -webkit-flex:2;
34             flex:2;
35         }
36     style>

?

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/2032.html

相關(guān)文章

  • 我所知道的flex布局 —— 上篇

    摘要：布局也經(jīng)歷了一段演變歷史。不同于將要出現(xiàn)的網(wǎng)格布局針對(duì)目標(biāo)為大比例布局，彈性盒布局更適用于應(yīng)用組件和小比例布局。常規(guī)布局是基于塊和內(nèi)聯(lián)流方向，而布局是基于流。 前言 你還在用display+position+float來(lái)進(jìn)行css布局嗎？有沒(méi)有覺(jué)得用傳統(tǒng)的這種布局方法來(lái)實(shí)現(xiàn)特殊布局特別麻煩困難，例如：垂直居中。今天來(lái)記錄一下自己對(duì)flex布局的了解（雖然不算神馬新東西了都可以說(shuō)是舊東西...

    andycall 評(píng)論0 收藏0

  • css3 彈性布局和多列布局

    摘要：彈性盒子基礎(chǔ)彈性盒子是中盒子模型的彈性布局，在傳統(tǒng)的布局方式上增加了很多靈活性。定義一個(gè)彈性盒子在父盒子上定義屬性?xún)?nèi)核瀏覽器的兼容設(shè)置，下同當(dāng)然還有行內(nèi)布局的彈性盒子注意，設(shè)為布局以后，子元素的和屬性將失效。 彈性盒子基礎(chǔ) 彈性盒子(Flexible Box)是css3中盒子模型的彈性布局，在傳統(tǒng)的布局方式上增加了很多靈活性。 定義一個(gè)彈性盒子 在父盒子上定義display屬性： #b...

    stormzhang 評(píng)論0 收藏0

  • 【基礎(chǔ)知識(shí)】Flex-彈性布局原來(lái)如此簡(jiǎn)單?。?/b>

    摘要：年，提出了一種新的方案，是的縮寫(xiě)，意為彈性布局。它的所有子元素自動(dòng)成為容器成員，稱(chēng)為項(xiàng)目，簡(jiǎn)稱(chēng)項(xiàng)目。屬性分為兩部分，一部分作用于容器稱(chēng)容器屬性，另一部分作用于項(xiàng)目稱(chēng)為項(xiàng)目屬性。表示不縮小，負(fù)值無(wú)效。后兩個(gè)是可選屬性。相關(guān)資源布局語(yǔ)法教程 簡(jiǎn)言 布局的傳統(tǒng)解決方案是基于盒狀模型，依賴(lài) display + position + float 方式來(lái)實(shí)現(xiàn)，靈活性較差。2009年，W3C提出了一...

    xbynet 評(píng)論0 收藏0

  • 彈性盒布局

    一、彈性布局 彈性布局，又稱(chēng)Flex布局 1、彈性布局的使用 給父容器添加display: flex/inline-flex;屬性，即可使容器內(nèi)容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式 容器添加彈性布局后，僅僅是容器內(nèi)容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流； display:flex; 容器添加彈性布局后，顯示為塊級(jí)元素； display:inline-fle...

    whatsns 評(píng)論0 收藏0

  • 彈性盒布局

    一、彈性布局 彈性布局，又稱(chēng)Flex布局 1、彈性布局的使用 給父容器添加display: flex/inline-flex;屬性，即可使容器內(nèi)容采用彈性布局顯示，而不遵循常規(guī)文檔流的顯示方式 容器添加彈性布局后，僅僅是容器內(nèi)容采用彈性布局，而容器自身在文檔流中的定位方式依然遵循常規(guī)文檔流； display:flex; 容器添加彈性布局后，顯示為塊級(jí)元素； display:inline-fle...

    leanxi 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<