ホームページ > 記事 > ウェブフロントエンド > フレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアル
フレックスボックスをレイアウトするにはどうすればよいですか?詳細なチュートリアル
- 云罗郡主転載
- 2018-10-23 15:23:062828ブラウズ
この記事の内容は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 サイトの他の関連記事を参照してください。