フレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアル-CSSチュートリアル-php.cn

フレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアル

云罗郡主

リリース： 2018-10-23 15:23:06

転載

2852 人が閲覧しました

この記事の内容はflexboxフレキシブルボックスのレイアウト方法についてです。詳細なチュートリアルは参考になると思います。

CSS3 フレキシブルボックスモデルでは、box-flex 属性を使用して、フレキシブルボックス内の子要素にフレキシブルスペースがあるかどうかを定義できます。子要素にフレキシブルスペースがある場合、フレキシブルボックス（親要素）のサイズを拡大・縮小すると、フレキシブルスペースのある子要素のサイズも拡大・縮小されます。フレックスボックスに余分なスペースがある場合は常に、フレックススペースを持つ子要素もそのスペースを埋めるためにサイズを拡張します。

説明:

box-flex 属性の値は整数または 10 進数であり、負の数にすることはできません。デフォルト値は 0 です。

ボックスに box-flex 属性が定義された複数のサブ要素が含まれている場合、ブラウザはこれらのサブ要素の box-flex 属性値を追加し、それぞれの値を使用します。合計値を計算するには、列を使用してボックス内の残りのスペースを割り当てます。

box-flex 属性は、フレキシブルボックスの幅または高さが決定されている場合にのみ有効であることに注意してください。つまり、最初に親要素に対して幅または高さの属性値を定義する必要があります。

フレキシブルボックス内の要素の幅と高さの合計が常にフレキシブルボックスの幅と高さに等しくなるように、フレキシブルスペース設定を使用します。ただし、子要素のフレックススペースは、フレックスボックスに特定の幅または高さがある場合にのみ有効です。

例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>CSS3 box-flex属性</title>
    <style type="text/css">
        body
        {
            display:-webkit-box;
            -webkit-box-orient:horizontal;   /*定义盒子元素内的元素从左到右流动显示*/
            width:200px;
            height:150px;
        }
        #box1
        {
            background:red;
            -webkit-box-flex:1.0;
        }
        #box2
        {
            background:blue;
            -webkit-box-flex:2.0;
        }
        #box3
        {
            background:orange;
            -webkit-box-flex:1.0;
        }
    </style>
</head>
<body>
    <div id="box1"></div>
    <div id="box2"></div>
    <div id="box3"></div>
</body>
</html>

ログイン後にコピー

ブラウザでのプレビュー効果は次のとおりです:

フレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアル

分析:

Use " box- "orient:horizontal;" は、フレキシブルボックス内のサブ要素の水平方向の配置を定義し、フレキシブルボックスの幅を 200px に指定します。その後、box-flex 属性を使用して各子要素の値を指定するだけで、ブラウザーが各子要素の比率を自動的に計算し、幅を自動的に分割します。

上記は、flexbox フレキシブルボックスをレイアウトする方法です。すべての詳細なチュートリアルが紹介されています。CSS3 ビデオチュートリアル について詳しく知りたい場合は、PHP 中国語 Web サイトに注目してください。

以上がフレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。