OZです。
WEB制作での、
コーディングをするときに
スタイルシートFlexBoxでの
レイアウトについて
簡単にまとめました。
Flexboxの参考にしている神サイト一覧
まずはFlexbox参考にいつもしている神サイトをご紹介いたします。
その1・CheatSheet
https://web-cheatsheet.com/css-flexbox
フレックスボックスでレイアウトするさいに、何度もみかえすチートシートです。
あるていど理解が進めば正直このサイトをみれば
レイアウトしていけます。
このサイトはブックマークにしましょう。
その2・FLEXCOXDROGGY
これはフレックスボックスで、カエルたちをコードを書いて助けてあげるゲームです。
たのしくフレックスボックスの理解を深めることができます。
私は全部クリアしました。
コード忘れそうになったら定期的にこのゲームするといいです。
LV1〜24まであります。
フレックスボックスよくつかうコード
スタイルシート親要素
display: flex;
flex-direction: row;
flex-wrap: wrap;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: center;
align-items: center;
align-items: stretch;上記は私がサイト制作時によくつかうフレックスボックス親要素のCSSです。
display: flex;をいれると 子要素は横並びになります。
「flex-direction: row;」は要素の順番です、これは左から右の通常並びです。
「flex-direction: column;」で縦並びになります。
「flex-wrap: wrap;」は折り返しを許可しています。
複数の子要素の幅が親要素の幅を超えるときに、下に折り返されるということです。
「flex-wrap: nowrap;」にすると折り返しを許可しない設定になります。（初期値はnowrap）
「justify-content: space-between;」は子要素の幅に均等配置させます。
左右の要素は左にぴったり、右にぴったりになります。
「justify-content: center;」は子要素を左右の中央に寄せます。
「justify-content: space-between;」か「justify-content: center;」のどちらかを使う頻度が高いです。
「align-items: center;」は子要素を親要素の上下の中央に寄せます。
「align-items: stretch;」は子要素を親要素の上下の高さをいっぱいまで伸縮して広げてそろえます。
「align-items: center;」か「align-items: stretch;」のどちらかを使う頻度が高いです。
スタイルシート子要素
box-sizing: border-box;
flex-grow: 0;
flex-shrink: 0;
flex-basis: 50%;
order: 1;上記は私がサイト制作時によくつかうフレックスボックス子要素のCSSです。
「box-sizing: border-box;」これをしているとパディングを設定しても子要素のコンテンツ内でおさまるので
子要素がパディングを設定しても変な改行がされなくなります。
「flex-grow」はフレックスコンテナ内のアイテムの伸び方の比率です。
flex-grow: 0;にしていると伸びない。flex-grow: 1;にしていると伸びます。
親要素が「flex-wrap: nowrap;」にしていると、親要素のボックス内にはいってる子要素は改行しないで、子要素同士が伸びておさまります。
親要素が「flex-wrap: wrap;」にしていると、親要素のボックス内にはいってる子要素は改行して、
子要素同士が伸びて上からflex-basisの幅が親要素を
超えた行は改行されていきます。
「 flex-shrink」はフレックスコンテナ内のアイテムの縮み方の比率です。
flex-shrink:0;にしていると縮まない。 flex-shrink:1;にしていると縮みます。
縮むということは、子要素が親要素より大きいときに使うことになると考えますので
親要素は「flex-wrap: nowrap;」にしたほうがよいです。
flex-growとflex-shrinkは子要素の幅の比率ではなく親コンテナ幅の子の幅の残りのサイズで伸縮している。
私は「flex-basis」を子要素に使いボックスごとに設定しまして
Aボックス「flex-basis: 10%;」、Bボックス「flex-basis: 20%;」、Cボックス「flex-basis: 15%;」、Dボックス「flex-basis: 40%;」
A+B+C+D＝85% 残りの15%を子要素ボックスにそれぞれ「flex-grow:1」を設定すると15%を4等分して各ボックスが伸びてくれます。
上記A〜Dボックスに対して「flex-shrink:1」を書いても縮みません。
flex-grow:1だと残りのスペース（上のグレーの部分）を4等分してABCDに振り分けられて伸びる
まとめ
/*親要素*/
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
/*子要素*/
box-sizing: border-box;
flex-grow: 1;
flex-shrink: 0;
flex-basis: 50%;上記コードを調整して
WEBの簡単なレイアウトでしたら大体は、
このフレックスボックスでできるかと考えられます。
まず親要素から折り返しさせない設定。
1つ1つの子要素をflex-basisで%幅を設定flex-wrap: nowrap;。
flex-basisの幅が微妙に小さくていっぱいまでのばしたいならflex-grow: 1;を設定。
親要素の幅を超えてしまって微妙に小さくしたかったらflex-shrink: 1;というイメージです。
フレックスボックスの内容を理解すれば
WEB制作の時短になり、遠回りせずに完成させることができます。