flex 学習記録。
いまのレベル感としてはなんとなく雰囲気でつかってるかんじ。flex-direction, justify-contents, align-items, くらいは使えるけど、 基本の flex-grow, flex-shrink, flex-basis とかが理解できてない。 そういう基本を理解して、しっかり flex をつかえるようになりたい。 あと flex 関連で知らないプロパティがたくさんあると思うので目を通しておきたい。
mdn によると「flex は CSS の一括プロパティで、フレックスアイテムをフレックスコンテナの領域に収めるために、どのように伸張・収縮させるかを指定します」 ということらしい。
flex-grow は CSS のプロパティで、フレックスアイテムの主軸方向の寸法のフレックス
伸長係数を設定します。
フレックス身長係数というのは、フレックスコンテナ内の残りに空間のうち、どれだけがそのアイテムに割り当てられるかを表した値らしい。
主軸方向の寸法は、アイテムの幅または高さのどちらかで、flex-directionの値に依存して決まります。
flex-direction: rowのときは幅、flex-direction: columnのときは高さってことかな。 あと基本的にはflex-growを単体で使うことはなくて、flex-shrink, flex-basisといっしょに使用されるから、flexプロパティを使って定義するらしい。じっさいに記述してみるとかなり腑に落ちるな。たしかに余ってる空間をどれだけ使うかを指定してる。
で、item 1 にだけ flex: 1を付与すると、たしかに item 1 だけ伸長して他の item は伸長しないので、flex-growのデフォルト値は 0 というのも体感した。
flex-shrinkは CSS のプロパティで、フレックスアイテムの縮小係数を設定します。 すべてのフレックスアイテムの寸法がフレックスコンテナよりも大きい場合、アイテムはflex-shrinkの数値にしたがって縮小して収まります。
使用時はflex-shrinkはflex-growやflex-basisなどの他のフレックスプロパティとともに使用され、 ふつうはflexの一括指定を使用して定義されます。
flex-grow が伸長係数を設定するのに対して、flex-shrink は縮小係数を設定する。なるほど。
背景がオレンジっぽいところが width: 500px の flex コンテナで、 そのなかの item を flex-basis: 120px にして、item がコンテナに収まらないようにしている。(flex-basis は flex-shrink の次に勉強する)
おー。flex-shrink: 2にしている item が、flex-shrink: 1にしている item より縮小している。 ちなみにflex-shrink: 1の記述を消してもレイアウトは変わらなかったのでflex-shrink の default value が 1 だというのも体感した。
flex-basisは CSS のプロパティで、フレックスアイテムの主要部分の初期の寸法を設定します。box-sizingで設定していない限り、このプロパティはコンテンツボックスの寸法を定義します。
フレックスアイテムの寸法を設定するってのはわかったけど、「box-sizingで設定しない限り、このプロパティはコンテンツボックスの寸法を定義します」がよくわかなんないな。 コンテンツボックスっていう単語を知らないからか。
これ読めばわかるっぽいけど、ちょっといまはいいや。
とりあえず flex-basis で flex item のサイズを指定できるらしい。で、mdn によると width よりも flex-basis のほうが優先られるらしい。
まあなんとなくわかった。
あと flex-wrap ってのも大事そうなので見ておきたい。
flex-wrap は css のプロパティで、フレックスアイテムを単一行に押し込むか、あるいは複数行に折り返してもよいかを指定します。 折返しを許可する場合は、行を積み重ねる方向の制御も可能です。
flex-wrap: wrapで、折り返して、flex-wrap: nowrapで折り返さないってくらいか。これは知ってたな。
w3 school の flexbox のページをみてて思ったけど、flexbox 関連のプロパティって、 flex container の設定をするプロパティと flex item の設定をするプロパティにわけられるのか。
こうやって実際に分けて並べてみるとちょっと整理できた気持ちになるな。
flex-flow ってなんだろ。使ったことないな。
あー。flex-directionとflex-wrapを一括で設定できるのか。
あと align-self についてもちょっと調べておきたいんだよな。なんか使ってはみるけど、いつもうまく動いてくれないから、正しい使い方を知っておきたい。
align-self は CSS のプロパティで、グリッドやフレックスのアイテムの align-items の値を上書きします。 グリッドでは、アイテムはグリッド領域内で配置されます。フレックスボックスでは、アイテムは交差軸上で配置されます。
交差軸って言葉がわからん。調べる。
フレックスボックスにおける交差軸(cross axis / クロス軸)は、主軸(main axis / メイン軸)で、
flex-directionが row またはrow-reverseであるとき(つまり主軸が行方向であるとき)、列方向の軸のことです。主軸が column または column-reverse の場合は、交差軸は行方向となります。
主軸に対する交差軸ってことか。
flex-direction: row (主軸: 横, 交差軸: 縦)
flex-direction: column (主軸: 縦, 交差軸: 横)
いったん center, start, endくらい使えれば大丈夫かな。
とりあえず flexbox はこれくらいでいいや。
学習過程をだらだらと書きながら進めていくスタイルでやってみたけど、なんか無駄が多いなあった気もした。
でもこうやって書きながら、こまめに deploy して公開してたからこそ、ひととおり最後までできたのでよかった、のかな？
あとレイアウト系は gird学習しないとな。 それにしても、やっぱりなにかを作りながらの勉強と比べて、純粋に勉強だけするのは大変つまらないなというのは感じたな。 やっぱり何か作りながらがいいのかな。学習方法もいろいろ考えないとな。
おしまい！