欧美xxxx极品bbw,男人爱看的网站,97性无码区免费

Flex布局

Flex是Flexible Box的縮寫，顧名思義為“彈性布局”，用來為盒裝模型提供最大的靈活性。任何一個容器都可以指定為Flex 布局。
以前我們想要兩個div橫向排列需要設置浮動來完成，現在通過給父元素添加 display:flex; 屬性可以實現盒子橫向布局。
需要注意的是，設為flex布局以后，子元素的float、clear和vertical-align屬性將失效.

案例地址:https://github.com/pengjunshan/WebPJS/C3H5Flex

其它Web文章
HtmlCss基礎學習第一章
 CSS基礎學習第二章
 CSS浮動的使用和解決浮動的五種方法
 CSS定位relative、absolute、fixed使用總結
 原生開發WebApi知識點總結
 開發中常用jQuery知識點總結
 C3動畫+H5知識點使用總結
 ES6常用知識總結
 Vue學習知識總結
 開發環境到生產環境配置webpack
待續......

//任何一個容器都可以指定為Flex 布局。
.box{
    display:flex;
}
//內元素也可以使用Flex布局。
.box{
    display:inline-flex;
}
//webkit內核的瀏覽器，必需加上-webkit前綴
.box{
    display:-webkit-flex;
    display:flex;
}

主軸-交叉軸

彈性容器：給元素添加display:flex后就是彈性容器。
彈性屬性：彈性容器中的所有子元素稱為<彈性元素>，彈性元素永遠沿主軸排列。

1.每個彈性容器都有兩根軸：主軸（main axis）和交叉軸（cross axis），兩軸之間成90度關系。注意：水平的不一定就是主軸。
2.每根軸都有起點和終點，這對于元素的對齊非常重要。
3.彈性元素也可以通過display:flex設置為另一個彈性容器，形成嵌套關系。因此一個元素既可以是彈性容器也可以是彈性元素。
4.彈性容器的兩根軸非常重要，所有屬性都是作用于軸的。下面從軸入手，將所有flex布局屬性串起來理解。

1.彈性容器屬性

屬性	含義
flex-direction	主軸方向
flex-wrap	換行
flex-flow	flex-direction和flex-wrap合寫
justify-content	主軸上的對齊方式
align-items	交叉軸上的對齊方式（單行）
align-content	交叉軸上多行/多列對齊方式

2.彈性元素屬性

屬性	含義
order	順序
flex-grow	放大比例（空間過多時）
flex-shrink	縮小比例（空間過少時）
flex-basis	固定尺寸
flex	flex-grow和flex-shrink和flex-basis合寫
align-self	自身的對齊方式，覆蓋掉父級的align-items對齊方式

1.1 flex-direction屬性

1.flex-direction屬性決定主軸的方向（即項目的排列方向），方向不管怎么變，主軸和交叉軸的起點都是在一起的。
2.flex-direction:row | row-reverse | column | column-reverse;
3.彈性元素的排列方式也會發生改變，因為彈性元素永遠沿主軸排列。

flex-direction的值

row（默認值）：主軸為水平方向，起點在左端
row-reverse:主軸為水平方向，起點在右端
column:主軸為垂直方向，起點在上沿
column-reverse:主軸為垂直方向，起點在下沿
row：主軸為水平方向，起點在左端。交叉軸為垂直方向，起點在上端。

row-兩軸方向

row-reverse：主軸為水平方向，起點在有端。交叉軸為垂直方向，起點在上端。

row-reverse-兩軸方向

column：主軸為垂直方向，起點在上端。交叉軸為水平方向，起點在左端。

column-兩軸方向

column-reverse：主軸為垂直方向，起點在下端。交叉軸為水平方向，起點左端。

column-reverse-兩軸方向

1.2 flex-wrap屬性

默認情況下，項目都排在一條線（又稱“軸線”）上。flex-wrap屬性定義，如果一條軸線排不下，如何換行？
flex-wrap: nowrap | wrap | wrap-reverse;

flex-wrap的值

nowrap：不換行，元素自動壓縮
wrap：換行，向下換行
wrap-reverse：換行，向上換行

nowrap：不換行，彈性元素自動壓縮

不換行元素自動壓縮

wrap：換行：如果主軸在水平方向上，向下換行。如果主軸在垂直方向上，向右換行。

向下換行

wrap-reverse：換行：如果主軸在水平方向上，向上換行。如果主軸在垂直方向上，向左換行。

圖片.png

1.3 flex-flow屬性

flex-flow屬性是flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap。
flex-flow = flex-drection + flex-wrap;

1.4 justify-content屬性

注意：justify-content屬性定義了項目在主軸上的對齊方式;
justify-content:flex-start | flex-end | center | space-between |space-around;

justify-content的值

flex-start（默認值）：左對齊
flex-end：右對齊
center：居中
space-between:兩端對齊，項目之間的間隔都相等
space-around：每個項目兩側的間隔相等。所以，項目之間的間隔比項目與邊框的間隔大一倍。

主軸上的對齊方式

1.5 align-items屬性

注意：align-items屬性定義項目在交叉軸上如何對齊。
align-items:flex-start | flex-end | center |baseline | stretch;
默認值是stretch，當元素沒有設置具體尺寸或者auto時會將容器在交叉軸方向撐滿(撐滿整個容器)。

align-items的值：

flex-start：交叉軸的起點對齊
flex-end:交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容器的高度。

交叉軸上的對齊方式

1.6 align-content屬性

align-content屬性定義了多根軸線的對齊方式。如果項目只有一根軸線，該屬性不起作用。
也是在交叉軸上如何對齊;
align-content: flex-start | flex-end | center | space-between | space-around | stretch

align-content屬性值：
+ stretch（默認值）：軸線占滿整個交叉軸。
+ flex-start：與交叉軸的起點對齊。
+ flex-end：與交叉軸的終點對齊。
+ center：與交叉軸的中點對齊。
+ space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
+ space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。

align-content屬性值

1.7 align-items和align-content的區別

兩者差異總結：

兩者“作用域”不同
align-content管全局(所有行視為整體)
align-items管單行

結合效果

2.1 order屬性

order屬性定義項目的排列順序。數值越小，排列越靠前，默認為0;
order:<integer>;

order屬性

2.2 flex-grow屬性

flex-grow屬性定義項目的放大比例，默認值為0，即如果存在剩余空間，也不放大。
如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。如果一個項目的flex-grow屬性為2，其他項目為1，則牽著占據的剩余空間將比其他項多一倍;
無多余寬度時，flex-grow無效;

flex-grow屬性

2.3 flex-shrink屬性

flex-shrink屬性定義了項目的縮小比例，默認為1，即如果空間不足，改項目將縮小;
值為0時不縮放；
元素寬度總和沒有大于容器寬度時，此屬性無效；
第一個元素flex-shrik:0; 其它都是1，所以第一個元素不壓縮，其它都等比壓縮；

flex-shrink

2.4 flex-basis屬性

flex-basis屬性定義了在分配多余空間之前，項目占據的主軸空間（main size）。瀏覽器根據這個屬性，計算主軸是否有多余空間。

flex-basis為auto:flex-basis為auto時，如設置了width則元素尺寸由width決定；沒有設置則由內容決定
寬度為0：width: 0 >完全沒顯示，flex-basis: 0 >根據內容撐開寬度
寬度和flex-basis非0：數值相同時兩者等效，同時設置，flex-basis優先級高
改變主軸：將主軸方向改為上→下，此時主軸上的尺寸是元素的height，flex-basis == height

查看源碼

2.5 flex屬性

flex屬性是flex-grow，flex-shrink和flex-basis的簡寫，默認值為0 1 auto。

簡寫：

flex: 1 = flex: 1 1 0;
flex: 2 = flex: 2 1 0;
flex: auto = flex: 1 1 auto;
flex: none = flex: 0 0 auto; // 常用于固定尺寸不伸縮

flex

2.6 align-self屬性

align-self屬性允許單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items屬性。默認值為auto，表示繼承父元素的align-items屬性，如果沒有父元素，等同于stretch。

align-self值：

flex-start：交叉軸的起點對齊
flex-end : 交叉軸的終點對齊
center：交叉軸的中點對齊
baseline：項目的第一行文字的基線對齊。
stretch（默認值）：如果項目未設置高度或設為auto，將占滿整個容

align-self

總結

主軸方向、換行

縮放、順序

對齊方式

案例

代碼中詳細注釋，案例請到https://github.com/pengjunshan/WebPJS中查看

彈性容器案例

<!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>
    <style>
        .son {
            width: 60px;
            height: 60px;
            border: 1px solid red;
            margin: 5px;
            box-sizing: border-box;
            background-color: blanchedalmond;
        }

        .flex-direction {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            /* 橫向排列 主軸為水平方向，起點在左端 默認row*/
            flex-direction: row;
            /* 橫向排列 主軸為水平方向，七點在右端 */
            /* flex-direction: row-reverse; */
            /* 縱向排列 主軸為垂直方向，起點在上端。 */
            /* flex-direction: column; */
            /* 縱向排列 主軸為垂直方向，起點在下端 */
            /* flex-direction: column-reverse; */
        }

        .flex-wrap {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            /* 不換行 自動壓縮 默認值*/
            flex-wrap: nowrap;
            /* 換行 向下換行 */
            /* flex-wrap: wrap; */
            /* 換行 向下換行 */
            /* flex-wrap: wrap-reverse; */
        }

        .flex-flow {
            width: 600px;
            display: flex;
            background-color: gray;
            margin: 10px auto;
            flex-flow: row wrap-reverse;
        }

        .justify-content {
            width: 600px;
            height: 200px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            /* 注意：是在主軸上的對齊方式 */

            /* 左對齊 */
            /* justify-content: flex-start; */
            /* 右對齊 */
            /* justify-content: flex-end; */
            /* 居中 */
            /* justify-content: center; */
            /* 兩端對齊，項目之間的間隔都相等 */
            /* justify-content: space-between; */
            /* 每個項目兩側的間隔相等 */
            justify-content: space-around;
        }

        .align-items {
            width: 600px;
            height: 300px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            flex-flow: row wrap;
            /* 注意：是在交叉軸上的對齊方式 管單行*/

            /* 交叉軸的起點對齊 */
            /* align-items: flex-start; */
            /* 交叉軸的終點對齊 */
            /* align-items: flex-end; */
            /* 交叉軸的中點對齊 */
            /* align-items: center; */
            /* 項目的第一行文字的基線對齊 */
            align-items: baseline;

        }

        .align-items>div:nth-child(1) {
            font-size: 26px;
        }

        .align-content {
            width: 600px;
            height: 300px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
            flex-flow: row wrap;
            /* 注意：是在交叉軸上的對齊方式  管整體*/

            /* 軸線占滿整個交叉軸 默認stretch */
            /* align-content: stretch; */
            /* 與交叉軸的起點對齊 */
            /* align-content: flex-start; */
            /* 與交叉軸的終點對齊 */
            /* align-content: flex-end; */
            /* 與交叉軸的中點對齊 */
            /* align-content: center; */
            /* 與交叉軸兩端對齊，軸線之間的間隔平均分布 */
            /* align-content: space-between; */
            /* 每根軸線兩側的間隔都相等 */
            align-content: space-around;
        }
    </style>
</head>
<body>
    <!-- flex-direction -->
    <div class="flex-direction">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- flex-wrap -->
    <div class="flex-wrap">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex-flow -->
    <div class="flex-flow">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- justify-content -->
    <div class="justify-content">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- align-items -->
    <div class="align-items">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- align-content -->
    <div class="align-content">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>
</body>
</html>

彈性元素案例

<!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>
    <style>
        .son {
            width: 60px;
            height: 60px;
            border: 1px solid red;
            margin: 5px;
            box-sizing: border-box;
            background-color: blanchedalmond;
        }

        .order,
        .flex-grow,
        .flex-shrink,
        .flex-basis,
        .flex,
        .align-self {
            width: 600px;
            height: 100px;
            display: flex;
            margin: 10px auto;
            background-color: gray;
        }

        .order>div:nth-child(1) {
            /* 數值越小，排列越靠前 默認為0 */
            /* order: 2; */
        }

        .order>div:nth-child(2) {
            order: 10;
        }

        .order>div:nth-child(3) {
            order: -1;
        }

        .order>div:nth-child(4) {
            order: 5;
        }

        .order>div:nth-child(5) {
            order: 8;
        }

        .flex-grow>div {
            flex-grow: 1;
        }

        .flex-grow>div:nth-child(2) {
            flex-grow: 2;
        }

        .flex-shrink>div {
            flex-shrink: 1;
        }

        .flex-shrink>div:nth-child(1) {
            flex-shrink: 0;
        }

        .flex-basis>div:nth-child(2) {
            /* flex-basis優先級大于width */
            flex-basis: 100px;
        }

        .flex>div {
            /* 等于flex-grow：1; */
            flex: 1;
        }

        .align-self {
            height: 240px;
            align-items: flex-start;
        }

        .align-self>div:nth-child(2) {
            align-self: flex-end;
        }
    </style>
</head>

<body>
    <!-- order -->
    <div class="order">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
    </div>

    <!-- flex-grow -->
    <div class="flex-grow">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
    </div>

    <!-- flex-shrink -->
    <div class="flex-shrink">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex-basis -->
    <div class="flex-basis">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
        <div class="son">老五</div>
        <div class="son">老六</div>
        <div class="son">老七</div>
        <div class="son">老八</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
        <div class="son">老九</div>
        <div class="son">老十</div>
    </div>

    <!-- flex -->
    <div class="flex">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
    </div>

    <!-- align-self -->
    <div class="align-self">
        <div class="son">老大</div>
        <div class="son">老二</div>
        <div class="son">老三</div>
        <div class="son">老四</div>
    </div>
</body>

</html>

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

Flex布局知識點總結

Flex布局知識點總結

Flex布局

1.1 flex-direction屬性

1.2 flex-wrap屬性

1.3 flex-flow屬性

1.4 justify-content屬性

1.5 align-items屬性

1.6 align-content屬性

1.7 align-items和align-content的區別

2.1 order屬性

2.2 flex-grow屬性

2.3 flex-shrink屬性

2.4 flex-basis屬性

2.5 flex屬性

2.6 align-self屬性

總結

案例

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

Flex布局知識點總結

Flex布局

1.1 flex-direction屬性

1.2 flex-wrap屬性

1.3 flex-flow屬性

1.4 justify-content屬性

1.5 align-items屬性

1.6 align-content屬性

1.7 align-items和align-content的區別

2.1 order屬性

2.2 flex-grow屬性

2.3 flex-shrink屬性

2.4 flex-basis屬性

2.5 flex屬性

2.6 align-self屬性

總結

案例

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频