『作れる人』から『分かる人』への途
cssを勉強し直してサイトをより良く作り直す

このページの目次
インプットボックス
チェックボックス
ラジオボタン
その他のボタン

やはりこれが重要、障壁の一つ～flex～

flexをシッカリと使おう

今日　も
何か一つでも脳ミソに引っ掛けよう！
kyou：

nen：＿＿＿＿tsuki：＿＿＿＿ nichi：＿＿＿＿day：

上手くいったからこれ。でもそれだと応用が利かなかったりしがちなので、覚えなおそう。
親要素と子要素、紛らわしいので親要素は『外のdin』、子要素が『中のdiv』、この解釈で十分。
輸送船をイメージすると分かりやすい。
親要素が1隻の船、子要素がたくさん載ってるコンテナ。コンテナをどう配置するかが重要、ということ。
子要素もflaxにして孫要素を自由に配置するようなこともできるが、それは親子を十分に理解した後でいい。子が親に成長したら、自分の子（孫）の世話をするようになるものですよ。

親要素に設定する項目

display：親要素をフレックスコンテナにするために必須
　　　　　設定値 … display: flex;／inline-flex;

flex-direction：フレックスアイテム（子要素）の主軸の方向を決める設定
　　　　　設定値 … row（横：デフォルト）／row-reverse（横逆）
　　　　　　　　　　／column（縦）／column-reverse（縦逆）

flex-wrap：フレックスアイテムが折り返すかどうかを決める
　　　　　設定値 … nowrap（１行：デフォルト）
　　　　　　　　　　／wrap（改行・折り返す）／wrap-reverse（折返し逆）

justify-content：主軸に沿ったフレックスアイテムの配置を制御
　　　　　rowなら左右方向の配置、
　　　　　設定値 … flex-start（デフォルト）／flex-end／center
　　　　　　　　　　／space-between／space-around／space-evenly

align-items：交差軸に沿ったフレックスアイテムの配置を制御します。値はstretch（デフォルト）、flex-start、flex-end、center、baselineのいずれかです。

align-content：このプロパティは交差軸に沿った複数行のフレックスアイテムの間隔を制御します。値はstretch（デフォルト）、flex-start、flex-end、center、space-between、space-aroundのいずれかです。

実際にflexを試してみます。
まず、ベージュの背景の二つは、display: flex; flex-direction: row; flex-wrap: wrap; の親コンテナで、子要素１～６はタテヨコ100pxの特にdisplay設定をしていないものです。
緑背景の二つは display: inline-flex;　flex-direction: row;　flex-wrap: wrap;の親コンテナで、子要素１～６はタテヨコ100pxの特にdisplay設定をしていないものという上のflexの子要素と同じ設定です。
ブラウザの幅を伸び縮みさせて動きを確認してみると違いが分かりやすい。

flex
子要素1

flex
子要素2

flex
子要素3

flex
子要素4

flex
子要素5

flex
子要素6

inline-flex
子要素1

inline-flex
子要素2

inline-flex
子要素3

inline-flex
子要素4

inline-flex
子要素5

inline-flex
子要素6

flexの配置をいろいろ試してみよう！

下のborderで囲った部分がflexの親コンテナで、5つの子要素を持っています。
高さ200px、4pxのパディングを設定してあります。
子要素は、①が幅25%、高さの指定なし。②が幅30%、高さの設定なし。この二つは下のテキストエリアで記事の内容を書き換えることができますので、記事が長ければ高さもそれに従って伸びます。
③は幅の設定なし、高さ100px。④も幅の設定なし、高さ40px。⑤は幅の設定なし、高さ90px。
いろいろ変えられるようにしてあります、試してみよう！

justify-contentの値を選択してください:
align-itemsの値を選択してください:

可変①

可変②

3個目

４こめ

お米

記事のテキストを変えることができます。記事の量で高さを変えて試してみよう

baselineについて気になったので

なお、align-itemsの選択でbaselingにしてもflex-startと差が無いように見えますが、本来のイメージはこんな感じになるようです。文字が入っていると違う挙動になるようです。以下の例はdivに背景色を付けて幅と高さを設定したものです。中身はなく、すぐタグを閉じています。

上記flexに画像を入れてみるとこうなります。画像の大きさは各要素幅の100%に設定しています。
画像の下端がそろっているのは分かります。ですが背景がトリッキーなことになっていますね。これは、中身の絵のベースラインを揃えることが最優先で、そこで位置が決まったから背景が設定されたheightの高さだけ下に向かって伸びていく感じですね。高さは中身によって適切に伸ばしてほしいので、heightの設定は外してよさそうですね。

文字を追記してみましょう。div内に直接入れてます。heightは外してあります。
顔と文言、良くあるプロフィール風なリストを作ろうとしたときに便利そうですね。

和菓子甘党
いちごだ伊福
クリーンなおやつを約束します！

香辛料辛党
八角せいじ
一点集中、一所懸命！
コメントは辛口

小賢小悪党
ズル田ロビ夫
裏の操作ならお任せあれ！

コンペイ党
亜前田トゲ男
考えが甘い

比左之社党
仮礼画利レオ
それでもピザは回っている

よく見ると下端がそろっているわけではないのです。chromeの

ul,liの復習

基本を再認識