モバイルWebの06フレックスレイアウト

その他 2020-04-19 09:38:52 訪問数: null

1.基本的な概念

  • フレックスレイアウトは、伸縮自在レイアウト、フレキシブルレイアウト、伸縮自在ボックスレイアウト、フレキシブルボックスレイアウトとも呼ばれます
  • フレックスは、「フレキシブルレイアウト」を意味するフレキシブルボックスの略で、ボックスモデルに最大の柔軟性を提供するために使用されます。
  • どのコンテナもFlexレイアウトとして指定できます。
  • 親ボックスにフレックスレイアウトを設定すると、子要素のfloat、clear、およびvertical-align属性は無効になります。
  • フレックスレイアウトは、フレックス属性を親ボックスに追加することにより、子ボックスの位置と配置を制御します。

1.フレックスの特徴

  • display：flex;を持つ要素は、親アイテムと呼ばれます。
  • 親の親子要素は子と呼ばれます。
  • メイン軸と呼ばれる親アイテムの右側にデフォルトの水平軸があります。
  • 親には、主軸に垂直な軸があり、デフォルトでは下向きの垂直方向が横軸と呼ばれます。
  • フレックスセットを使用すると、サブアイテムの要素表示モードに関係なく、幅と高さを設定する権限があります。

次に、フレックスの親属性

1.スピンドル方向（フレックス方向）を変更します

            /* 改变主轴方向 */
            /* 主轴垂直向下，当主轴占据侧轴位置时，侧轴会转换到主轴位置上，且方向时钟水平向右 */
            /* flex-direction: column; */

            /* 主轴垂直向上，侧轴水平向右 */
            /* flex-direction: column-reverse; */

            /* 默认值，主轴水平向左，侧轴垂直向下 */
            /* flex-direction: row; */

            /* 主轴水平向右，侧轴垂直向下 */
            flex-direction: row-reverse;

UTOOLS1586526465936.png
UTOOLS1586526495474.png

注目

  • スピンドルの方向のみを制御できます
  • 主軸と横軸は、x軸とy軸とは完全に異なります。
  • スピンドルが制御するのは、実際には制御フローの方向です。
  • 主軸が縦方向の場合は横軸の位置を占めますが、このとき横軸は主軸方向に変換され、常に右方向に水平になります。

2.主軸のサブアイテムの順序を変更します（正当化-コンテンツ）

            /* 默认从起点到终点排列 */
            /* justify-content: flex-start; */

            /* 从终点到起点排列 */
            /* justify-content: flex-end; */

            /* 居中对齐 */
            justify-content: center;

            /* 先固定；两端，剩下的元素平分剩下的空间 */
            /* justify-content: space-between; */

            /* 每个子项两侧的间隔相等。所以，子项之间的间隔比子项与边框的间隔大一倍 */
            /* justify-content: space-around; */

            /* 均衡分布,子项分分父相空间 */
            justify-content: space-evenly;

UTOOLS1586526988198.png
UTOOLS1586527026471.png

3.副軸の配置を横軸に設定します（align-items単一行）

         /* 从起点到终点 */
            /* align-items: flex-start; */
            /* 从终点到起点 */
            /* align-items: flex-end; */
            /* 居中对齐 */
            /* align-items: center; */

            /* 拉伸，默认值
            当侧轴处置垂直向下时，如果子项未设置高度或设为auto，将占满整个容器的高度。
            当侧轴水平向右时 如果子项未设置宽度或设为auto，将占满整个容器的宽度*/
            align-items: stretch;

UTOOLS1586527869412.png
UTOOLS1586528042673.png
デフォルト値はストレッチです

4.改行（フレックスラップ）

デフォルトでは、子要素はラップされません。子要素を開くことができない場合は、子要素の幅が縮小され、線が強制的に配置されます。

            /* 默认不换行，强行缩小子元素使其在一行上显示 */
            flex-wrap: nowrap;

            /* 换行 */
            /* flex-wrap: wrap; */

            /* 反向换行 */
            /* flex-wrap: wrap-reverse; */

UTOOLS1586528661047.png
注目

  • すべての子の幅は、ラップする親の幅より大きくする必要があります。そうしないと、ラップを設定しても機能しません。
  • 折り返すときに行間の間隔が非常に広いのはなぜですか？
    理由：横軸のデフォルト属性はストレッチであるため、親要素は行と同じ数のコピーに引き伸ばされ、各コピーの各行は開始点に配置され、各行の高さは行間のギャップです。
    解決策：1. align-content：flex-atartを設定します;
    2.親アイテム全体を覆うようにボックスまたはautoの高さを削除します。

4.横軸に子の配置を設定します（align-content）

            /* 换行 */
            flex-wrap: wrap;
            /* 起点对齐 */
            /* align-content: flex-start; */

            /* 终点对齐 */
            /* align-content: flex-end; */

            /* 居中对齐 */
            /* align-content: center; */

            /* 环绕对齐 */
            /* align-content: space-around; */

            /* 两端对齐 */
            /* align-content: space-between; */

            /* 默认 */
            /* align-content: stretch; */

注：改行を前提に設定する必要があります
UTOOLS1586529318483.png
UTOOLS1586529388158.png

5.六面サイコロケース

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            position: relative;
            width: 200px;
            height: 200px;
            margin: 100px auto;
            transform-style: preserve-3d;
            animation: tou 1s infinite linear;
        }

        @keyframes tou {
            0% {
                transform: rotate(0);
            }

            100% {
                transform: rotateX(360deg) rotateY(360deg);
            }
        }

        .container:hover {
            animation-play-state: paused;
        }

        section[class ^='box'] {
            position: absolute;
            top: 0;
            left: 0;
            display: flex;
            width: 200px;
            height: 200px;
            margin-top: 10px;
            background-color: #09f;
            padding: 20px;
            border: 1px solid #000;
        }

        section .dot {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
        }

        /* 前面 */
        .box1 {
            transform: translateZ(120px);
            justify-content: center;
            align-items: center;
        }

        /* 后面 */
        .box2 {
            transform: translateZ(-120px);
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
        }

        /* 左面 */
        .box3 {
            transform: rotateY(90deg) translateZ(120px);
            justify-content: space-between;
        }

        .box3 div:nth-child(2) {
            align-self: center;
        }

        .box3 div:nth-child(3) {
            align-self: flex-end;
        }

        /* 右面 */
        .box4 {
            transform: rotateY(-90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }

        .info {
            display: flex;
            justify-content: space-between;
        }

        /* 上面 */
        .box5 {
            transform: rotateX(90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }

        .box5>.dot {
            align-self: center;
        }

        .box6 {
            transform: rotateX(-90deg) translateZ(120px);
            flex-direction: column;
            justify-content: space-between;
        }
    </style>
</head>

<body>
    <div class="container">
        <section class="box1">
            <div class="dot"></div>
        </section>
        <section class="box2">
            <div class="dot"></div>
            <div class="dot"></div>
        </section>
        <section class="box3">
            <div class="dot"></div>
            <div class="dot"></div>
            <div class="dot"></div>
        </section>
        <section class="box4">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
        <section class="box5">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="dot"></div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
        <section class="box6">
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
            <div class="info">
                <div class="dot"></div>
                <div class="dot"></div>
            </div>
        </section>
    </div>
</body>

</html>

6. 4番目の面の詳細

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .container {
            /* 2.将大盒子设为容器 */
            display: flex;
            /* 3.转换主轴方向 */
            flex-direction: column;
            /* 4.主轴两端对齐 */
            justify-content: space-between;
            width: 150px;
            height: 150px;
            margin: 100px auto;
            background-color: #09f;
            padding: 30px;
        }

        section .info {
            /* 1.设为容器，子项沿主轴两端对齐 */
            display: flex;
            justify-content: space-between;
            border: 1px solid #000;
        }

        section .info .dot {
            width: 30px;
            height: 30px;
            background-color: #000;
            border-radius: 50%;
        }
    </style>
</head>

<body>
    <section class="container">
        <div class="info">
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
        <div class="info">
            <div class="dot"></div>
            <div class="dot"></div>
        </div>
    </section>
    </div>
</body>

</html>

UTOOLS1586575813497.png
UTOOLS1586575860244.png
UTOOLS1586575881585.png

7. flex-flow属性

flex-flow属性は、flex-direction属性とflex-wrap属性の複合属性です

            flex-flow:row wrap;
            /* 复合写法，没有顺序 */
            flex-flow: column wrap;

Three。Flexアイテムのプロパティ

1.注文属性

order属性は、アイテムの順序を定義します。値が小さいほど、配置は高くなります。デフォルトは0です。

        .info1 {
            order: 1;
        }

        .info3 {
            order: -1;
        }

UTOOLS1586576146683.png

3. align-self属性

        .info2 {
            align-self: center;
        }

        .info3 {
            align-self: flex-end;
        }

UTOOLS1586576392502.png

4. flex属性

4.1フレックスグロー

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            display: flex;
            width: 400px;
            height: 350px;
            margin: 50px auto;
            background-color: #f34;
            border: 2px solid #000;
        }

        /* 子相可以设置宽高 */
        span {
            width: 50px;
            height: 50px;
            margin: -1px;
            background-color: #09f;
            border: 2px solid #fff;
        }

        /* order是定义子项的排列顺序，默认值是0，数字越小，排列越靠前 */
        .box1 span:nth-child(3) {
            order: -1;
        }

        .box1 span:first-child {
            order: 1;
        }

        .box2 {
            align-items: center;
        }

        /* align-self是单独控制自己在侧轴上的排列方式 */
        .box2 span:first-child {
            align-self: flex-start;
        }

        .box2 span:nth-child(3) {
            align-self: flex-end;
        }

        /* flex-grow:是子项占父项目宽度 */
        .box3 span:first-child {
            flex-grow: 2;
        }

        .box3 span:nth-child(3) {
            flex-grow: 1;
        }

        /* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
        .box4 span:first-child {
            flex-shrink: 0;
        }

        .box4 span:nth-child(3) {
            flex-shrink: 2;
        }

        /* flex-basis：定义分配空间前子项的默认大小 */
        .box5 span:first-child {
            flex-basis: 10px;
        }

        .box5 span:nth-child(3) {
            flex-basis: 100px;
        }

        /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
        .box6 span:first-child {
            flex: 0 0 30px;
        }

        .box6 span:nth-child(3) {
            flex: 1 1 auto;
        }
    </style>
</head>

<body>
    <div class="box1">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box2">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box3">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>


    </div>
    <div class="box4">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box5">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
    <div class="box6">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
    </div>
</body>

</html>

UTOOLS1586963811231.png

4.1フレックスシュリンク

    <div class="container container2">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

        /* flex-shrink：表示当flex容器空间不足是，会将子项进行收缩，默认是1，0表示不收缩，值越大收缩越厉害 */
        .container2 .info:first-child {
            flex-shrink: 0;
        }

        .container2 .info:nth-child(3) {
            flex-shrink: 2;
        }

        .container2 .info:nth-child(6) {
            flex-shrink: 5;
        }

UTOOLS1586964121126.png

4.1フレックスベース

    <div class="container container3">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

        /* flex-basis：定义分配空间前子项的默认大小 */
        .container3 .info:first-child {
            flex-basis: 10px;
        }

        .container3 .info:nth-child(3) {
            flex-basis: 100px;
        }

        .container3 .info:nth-child(5) {
            flex-basis: 20%;
        }

UTOOLS1586964303463.png

4.4フレックス

        /* flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。 */
        .container4 .info:first-child {
            flex: 0 0 30px;
        }

        .container4 .info:nth-child(3) {
            flex: 1 1 auto;
        }

        .container4 .info:nth-child(5) {
            flex: 1;
        }

    <div class="container container4">
        <div class="info">1</div>
        <div class="info">2</div>
        <div class="info">3</div>
        <div class="info">4</div>
        <div class="info">5</div>
    </div>

通常、フレックスは値を書き込むだけで、つまり、子は親のシェアを占めます。たとえば、6つのボックスがあり、各フレックス= 1で、各ボックスは親の1/6を占めます。

関連推奨事項：
オンラインデモフレックスWebサイト
https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

おすすめ

転載: www.cnblogs.com/xiaoaitongxue/p/12676383.html
おすすめ
ランキング
チップ製造の詳しい説明 エッチング原理 学習メモ(5)
StringBuilderを持つコンストラクタがそうではないのはなぜStringクラスのコンストラクタメソッドは、パラメータのStringBufferの使用の同期ブロックでいますか？
[Done] exited with code=3221225477 in 34.566 seconds
并行端口（Parallel Port）
推奨システム評価試験
3.22のノートが質問を行います
手紙の面白い組み合わせ
Flutter ポッドのインストールが報告されました [!] プロジェクト ディレクトリ ソリューションに Podfile が見つかりません
PromSQL の実践的なクエリ ステートメントの概要 (常に更新)
使用dedecms織ラベルはarclist夢
アーカイブ
もっと
2024-04-30(35)
2024-04-29(5)
2024-04-28(12)
2024-04-27(29)
2024-04-26(22)
2024-04-25(31)
2024-04-24(30)
2024-04-23(31)
2024-04-22(5)
2024-04-21(0)

コードワールド

© 2018 codetd.com