亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

Flex Box 簡單彈性布局

ixlei / 959人閱讀

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

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

一、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)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/2032.html

相關(guān)文章

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

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

    andycall 評論0 收藏0

  • css3 彈性布局和多列布局

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

    stormzhang 評論0 收藏0

  • 【基礎(chǔ)知識】Flex-彈性布局原來如此簡單！！

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

    xbynet 評論0 收藏0

  • 彈性盒布局

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

    whatsns 評論0 收藏0

  • 彈性盒布局

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

    leanxi 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<