flex-item

HTML/CSS

flexアイテムのサイズを決める grow shrink basis

4回にわたって解説してきたflexレイアウトも今回で最後です。flexアイテムの拡大率・縮小率を指定するflex-grow 、flex-shrink、flex-basisについて解説します。気をつけないといけないのは、flexアイテムそのものの拡大率を指定しているのではなく、flexコンテナに余白ができた場合に、余剰をどう分けあうかを指定しています。
2021.07.27
HTML/CSS

flexレイアウト その3

flexレイアウトの第3回です。前回までが基本の内容でしたので、ここから少しずつ発展した内容になります。 前回、前々回は以下のリンクから。 とり...
2021.03.07
HTML/CSS

flexの基本レイアウト その2

flexレイアウトの解説記事その2。flexアイテムの縦方向の整列・余白について説明します。display:flex を指定すると子要素に指定したheightは無視され、均等の高さに整列されますが、align-items、align-selfを指定することで変更することができます。
2021.07.27
HTML/CSS

とりあえずこれだけ。flexの超基本レイアウト

この記事から4回に分けてflexレイアウトについて解説していきたいと思います。flexは子要素をすべて一方向に並べるcssプロパティです。flexアイテム(子要素)は元のwidth、heightを失い、最小幅、同じ高さに統一されて一方向に並びます(*初期値の場合)。
2021.07.27
タイトルとURLをコピーしました