まえがき: 私が最初に flex レイアウトを学んだとき、flex: 1; の概念は非常に曖昧で、単に flex: 1; が 1 つのコピーを表し、flex: 2; が 2 つのコピーを表すと考えていました。。。。その後、柔軟なレイアウトに関する一連の問題に遭遇したため、この属性を注意深く研究しました。
実際、flex:1; は 3 つの属性の略称であり、完全な記述方法は次のようになります。flex: 1 1 0%;
最初のパラメータの意味: flex-grow はアイテムの拡大率を定義します。デフォルトは 0、つまり残りのスペースがある場合は拡大されません。2 番目のパラメータの意味: flex-shrink はアイテムの縮小率を定義します
。項目のデフォルトは 1 です。つまり、スペースが不十分な場合、プロジェクトは縮小します。3
番目のパラメータは、フレックスベースが上記の 2 つのプロパティに追加スペースを割り当てる前に、プロジェクトに追加スペースがあるかどうかを計算します。デフォルト値は auto で、これはプロジェクト自体のサイズです。
アダプティブ レイアウトとしてよく使用され、コンテンツ領域は残りのスペースを埋めるために自動的に拡大または縮小されます。Chrome ブラウザでflex: 1; を直接展開して詳細を表示することもできます flex
: 2;
フレックス レイアウトの一般的なシナリオをいくつか示します:
1. 1 つの要素の幅 (または高さ) は固定されており、幅 (または高さ)他の要素の ) は自動的に変更されます。
.parent {
display: flex;
}
// 高度/宽度固定
.son1 {
width: 200px; //或者 height: 200px;
flex: none; // 加不加都可 相当于flex: 0 0 auto;
}
// 高度/宽度自适应
.son2 {
flex: 1; // flex: 1 1 0%;
}
2. すべての子要素に flex を設定します: 1; 子要素ボックスは均等に分割され、親ボックスを占有します。
<div class="container">
<div class="div">我是一个div</div>
<div class="div">我是一个很多字div</div>
<div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
display: flex;
}
.div{
border: 1px solid red;
flex: 1;
}
</style>
3. flex: 1 1 auto; に設定するとどうなるでしょうか? 子要素のボックスはその内容に応じて適応し、一緒にスペース全体を占めます。
<div class="container">
<div class="div">我是一个div</div>
<div class="div">我是一个很多字div</div>
<div class="div">我是一个更多字而且第三个div</div>
</div>
<style>
.container{
display: flex;
}
.div{
border: 1px solid red;
flex: 1 1 auto;
}
</style>
