9月28日 フィヨルドブートキャンプ学習記録

学習内容

実施したこと、理解した点

「Flexboxアイテム」で指定できるプロパティについて

  • flex 伸縮性設定全般 ①flex-grow Flexアイテムの「伸びる」倍率のこと。 Flexコンテナが全てのFlexアイテムを格納し切っても、まだ余りの領域がある場合 flex-growの値にしたがって自動的に利用可能な範囲まで伸びる。 ②flex-shrink Flexアイテムの「伸びる」倍率のこと。 FlexコンテナがFlexアイテムを格納し切れない場合、flex-shrinkの値に従って格納可能な 　範囲まで自動的に縮む。 ③flex-basis 「width」とほぼ同じ動きをする。 すなわち、要素のベースの長さ、または最小の長さを設定できる。 設定しなかった場合は0となる。 ↓参考(ひとまずflex-growだけお試しで書いてみた。) https://codepen.io/ryotori1024/pen/PoNLZwa

  • align-self 個別のFlexアイテムの垂直方向の揃え方 「align-items」と同様に要素の垂直方向を揃えるが、こちらは「個別のアイテム」に対して設定する。

  • order 順番指定 FlexアイテムにはHTMLで記述順に番号が振ってあるが、これを使えば順番を入れ替える事ができる。

分からなかった点、疑問に思った点

  • 「flex-basis」はwidthと同じ動きをするプロパティとの事だが、「height」と同じ動きのプロパティがないのはナゼ?

課題進捗状況

※本日は進捗なし https://codepen.io/ryotori1024/pen/xxVBjyL

所感

Flexboxも少しずつ理解できてきたが、コンテナやアイテムと言った単語を聞いたときに親要素か子要素だったかごっちゃになる時がたまにあるので、しっかり覚えていきたい。

明日の予定

引き続き、Flexboxの学習、課題を進める。