男人捅女人国产视频,热热色超碰,操老熟女视频一区

box-flex是css3新添加的盒子模型屬性，它的出現(xiàn)可以解決我們通過N多結(jié)構(gòu)、css實(shí)現(xiàn)的布局方式。經(jīng)典的一個(gè)布局應(yīng)用就是布局的垂直等高、水平均分、按比例劃分。
目前box-flex屬性還沒有得到firefox、Opera、chrome瀏覽器的完全支持，但可以使用它們的私有屬性定義firefox(-
moz)、opera(-0)、chrome/safari（-webkit)。
一、box-flex屬性
box-flex主要讓子容器針對(duì)父容器的寬度按一定規(guī)則進(jìn)行劃分
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:2;
    -webkit-box-flex:2;
    box-flex:2;
}
.sectionThree{
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
    background:green;
}

展示效果：

1.jpg

說明：必須給父容器wrap定義css屬性display:box其子容器才可以進(jìn)行劃分(如果定了display:box則該容器則定義為了內(nèi)聯(lián)元素，使用margin:0px auto讓其居中是無效的，要想使其居中只能通過它的父容器的text-align:center);
分別給sectionOne、sectionTwo、sectionThree的box-flex設(shè)置了3、2、1，也就是說這三個(gè)子容器將父容器wrap的寬度
600px分為6份，sectionOne占居父結(jié)構(gòu)寬度的3/6即300px，sectionOne占居父結(jié)構(gòu)寬度的2/6即200px，sectionThree占居
父結(jié)構(gòu)寬度的1/6即100px。
以上是按比例數(shù)進(jìn)行劃分分配的，如果其中一個(gè)子容器或多個(gè)子容器設(shè)置了固定寬度又會(huì)怎樣劃分那？
如果其中一個(gè)子容器或多個(gè)子容器設(shè)置了固定寬度，其它子容器沒有設(shè)置，其計(jì)算方式是這樣的：子容器如果設(shè)置了固定
寬度值，該子容器則直接應(yīng)用設(shè)置的寬度值，其它沒有設(shè)置的則再父容器的寬度基礎(chǔ)上減去子容器設(shè)置的固定寬度，在剩
下的寬度基礎(chǔ)上按一定比例進(jìn)行劃分分配。請(qǐng)看下面代碼
HTML代碼:

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
}
.sectionThree{
    width:200px;//設(shè)置固定寬度
    background:green;
}

展示效果

1.jpg

說明：
sectionThree設(shè)置了固定寬度為200px，父容器的寬度600px減去改子容器的200px還剩下400px，這400px寬度值則按box-
flex設(shè)置的值進(jìn)行劃分，sectionOne占居3/4即300px,sectionTwo占居1/4即100px。
在以上代碼的基礎(chǔ)上給sectionTwo子容器添加margin:0px 50px使子容器之間產(chǎn)生一定的間隔其寬度又如何進(jìn)行分配劃分的那？接著看
CSS代碼:

.wrap{
    width:600px;
    height:200px;
    display:-moz-box;
    display:-webkit-box;
    display:box;
![1.jpg](http://upload-images.jianshu.io/upload_images/3869620-14e4ce994203776e.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

}
.sectionOne{
    background:orange;
    -moz-box-flex:3;
    -webkit-box-flex:3;
    box-flex:3;
}
.sectionTwo{
    background:purple;
    -moz-box-flex:1;
    -webkit-box-flex:1;
    box-flex:1;
        margin:0px 50px;//添加margin屬性
}
.sectionThree{
    width:200px;
    background:green;
}

展示效果

1.jpg

說明：
父容器的寬度600px減去設(shè)置了子容器的200px基礎(chǔ)上再減去100px(2×50)剩下300px，這300px寬度值則按box-flex設(shè)置的
值進(jìn)行劃分，sectionOne占居3/4即225px,sectionTwo占居1/4即75px。待續(xù)內(nèi)容
二、box屬性
以上將box-flex如何對(duì)父容器的寬度進(jìn)行劃分分配講解完畢，下面在看一下父容器里面的box屬性包括哪些。box屬性如下
所示1 box-orient, box-direction, box-align, box-pack, box-lines
二、box屬性
上篇文章”css3彈性盒子模型之box-flex“將box-flex如何對(duì)父容器的寬度進(jìn)行劃分分配講解完畢，下面在看一下父容器
里面的box屬性包括哪些box屬性，具體屬性如下代碼所示：
box-orient | box-direction | box-align | box-pack | box-lines
1、box-orient
box-orient(orient譯為排列更準(zhǔn)確)用來確定父容器里子容器的排列方式，是水平還是垂直。可選屬性如下所示：
horizontal | vertical | inline-axis | block-axis | inherit
horizontal、inline-axis說明：
給box設(shè)置horizontal或inline-axis屬性其效果似乎表現(xiàn)一致，都可將子容器水平排列，具體兩者有什么實(shí)質(zhì)差別暫時(shí)還
沒有搞清楚。
如果父容器選擇horizontal或inline-axis屬性對(duì)子容器進(jìn)行水平排列，其是對(duì)父容器的寬度進(jìn)行分配劃分。此時(shí)如果父
容器定義了高度值，其子容器的高度值設(shè)置則無效狀態(tài)，所有子容器的高度等于父容器的高度值；如果父容器不設(shè)置高度
值，其子容器的高度值才有效并且取最大高度值的子容器的高度。
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:200px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-orient:horizontal;
 -webkit-box-orient:horizontal;
 box-orient:horizontal;//水平排列
}
.sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
}
.sectionThree{
 width:100px;
 background:green;
}

展示效果：

1.jpg

vertical、block-axis說明：
給box設(shè)置vertical或block-axis屬性(此屬性是默認(rèn)值)其效果似乎表現(xiàn)一致，都可將子容器垂直排列，具體兩者有什么
實(shí)質(zhì)差別暫時(shí)還沒有搞清楚。
如果父容器選擇vertical或block-axis屬性對(duì)子容器進(jìn)行垂直排列，其是對(duì)父容器的高度進(jìn)行分配劃分。此時(shí)如果父容器
定義了寬度值，其子容器的寬度值設(shè)置則無效狀態(tài)；如果父容器不設(shè)置寬度值，其子容器的寬度值才有效并且取最大寬度
值的子容器的寬度。
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:200px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-orient:vertical;
 -webkit-box-orient:vertical;
 box-orient:vertical;//垂直排列
}
.sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
}
.sectionThree{
 height:100px;
 background:green;
}

展示效果：

1.jpg

inherit說明：
inherit屬性則是讓子容器繼承父容器的相關(guān)屬性。
2、box-direction
box-direction用來確定父容器里的子容器排列順序，具體屬性如下代碼所示：
normal | reverse | inherit
normal是默認(rèn)值
按照HTML文檔里結(jié)構(gòu)的先后順序依次展示。如下代碼，如果box-direction設(shè)置為normal，則結(jié)構(gòu)依次展示sectionOne、
sectionTwo、sectionThree
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:200px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-direction:normal;//設(shè)置mormal默認(rèn)值
 -webkit-box-direction:normal;//設(shè)置mormal默認(rèn)值
 box-direction:normal;//設(shè)置mormal默認(rèn)值
}
.sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
}
.sectionThree{
 width:100px;
 background:green;
}

展示效果：

1.jpg

reverse表示反轉(zhuǎn)
如上面所示設(shè)置nomal其結(jié)構(gòu)的排列順序?yàn)閟ectionOne、sectionTwo、sectionThree；如果設(shè)置reverse反轉(zhuǎn)，其結(jié)構(gòu)的排
列順序?yàn)閟ectionThree、sectionTwo、sectionOne
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:200px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-direction:reverse;//設(shè)置為反轉(zhuǎn)
 -webkit-box-direction:reverse;//設(shè)置為反轉(zhuǎn)
 box-direction:reverse;//設(shè)置為反轉(zhuǎn)
}
.sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
}
.sectionThree{
 width:100px;
 background:green;
}

展示效果：

1.jpg

3、box-align
box-align表示父容器里面子容器的垂直對(duì)齊方式，可選參數(shù)如下所示：
start | end | center | baseline | stretch
HTML代碼：

<article class="wrap">
 <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:108px;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-align:stretch;
 -webkit-box-align:stretch;
 -o-box-align:stretch;
 box-align:stretch;
}
.wrap section{
 height:80px;
}
.wrap .sectionOne{
 background:orange;
 -moz-box-flex:1;
 -webkit-box-flex:1;
 box-flex:1;
}
.wrap .sectionTwo{
 background:purple;
 -moz-box-flex:2;
 -webkit-box-flex:2;
 box-flex:2;
 height:108px;
}
.wrap .sectionThree{
 width:100px;
 background:green;
}

start
在box-align表示居頂對(duì)齊，如下圖所示

1.jpg

end
在box-align表示居底對(duì)齊，如下圖所示

1.jpg

center
在box-align表示居中對(duì)齊，如下圖所示

1.jpg

stretch
在box-align表示拉伸，拉伸到與父容器等高

1.jpg

3、box-pack
box-pack表示父容器里面子容器的水平對(duì)齊方式，可選參數(shù)如下所示：
start | end | center | justify
HTML代碼：

<article class="wrap">
    <section class="sectionOne">01</section>
    <section class="sectionTwo">02</section>
    <section class="sectionThree">03</section>
</article>

CSS代碼：

.wrap{
 width:600px;
 height:108px;
 border:1px solid red;
 display:-moz-box;
 display:-webkit-box;
 display:box;
 -moz-box-pack:end;
 -webkit-box-pack:end;
 -o-box-pack:end;
 box-pack:end;
}
.wrap section{
 width:100px;
}
.wrap .sectionOne{
 background:orange;
}
.wrap .sectionTwo{
 background:purple;
}
.wrap .sectionThree{
 background:green;
}

start
在box-pack表示水平居左對(duì)齊，如下圖所示