【プログラミング独学20日目】flex-basis

2022-03-26FREELANCE,WORDPRESS/WEB

こんにちは、歯科衛生士・ママライターのミホです。以前から独学でWordPressを使ったサイト制作は行なってきたのですが、改めてプログラミングをしっかり学ぼうと思い学習を始めました。その記録や学習してわからなかったことなどをアウトプットしていきます。毎日インプット・アウトプットを続けて20日目を迎えました。

私の今までの経歴は、以下で簡単に説明しています。元々医療従事者なのでわりと特殊な経歴かと思います。

【プログラミング独学1日目】HTML・imgタグ・alt属性・metaタグ・rel属性・href属性・

独学でサイト制作は行なってきましたが、改めてHTMLからプログラミングをしっかり学び直すことにしまし ...

 https://chanmk.tokyo/programming_1/

今後の目標は以下の通りで、忘れないためにも毎日書き留めておきます。

【プログラミング独学20日目】学んだこと

今日もCSSの続きをやりました。今日はほとんど時間を取れなかったのでアウトプットは少しだけです。子どもの寝かしつけと一緒に寝落ちしてしまいました・・・。引き続きflexboxの学習です。

①flex-itemに付けられるプロパティ／flex-basis

引き続き、flex-itemに付けられるプロパティの説明です。

これらは個々のアイテムをどれだけ伸ばしたり縮めたりするか指定するためのプロパティです。まずflex-basisについて見ていきましょう。

flex-basisはflex-growとflex-shrinkの計算に使われるもので、要素のサイズを決めるためのプロパティです。

.container {
 flex-direction:row;
}

flex itemは主軸方向に伸び縮みします。そのため上の記述があるときflex-basisは要素の幅を示すことになります。

.container {
 flex-direction:column;
}

flex itemは主軸方向に伸び縮みするため、上の記述があるときflex-basisは要素の高さを示すことになります。

flex-basisの初期値は「auto」で、この場合要素のwidthが指定されていればflex basis＝width、widthが指定されていなければflex basis＝コンテンツのJ幅となります。

flex-basisはwidthが書かれても書かれなくても計算され続けるもので、主軸方向の大きさを指定するためのものです。またwidthと併せて記載された場合、flex-basisの値が優先して適用されます。

.box1 {
 width:100px;
 flex-basis:200px;
}

上のように記述では要素の幅widthは「100px」としていますが、主軸方向の大きさflex-basisは「200px」としています。この場合後者のflex-basis200pxが適用されます。

ただ例外もあって、以下のようにminやmaxの指定がある場合はその値が適用されます。

.box1 {
 width:100px;
 max-width:150px;
 flex-basis:200px;
}

上のように記述では要素の幅widthは「100px」、widthの上限は「150px」、主軸方向の大きさflex-basisは「200px」としています。この場合max-width150pxが適用され、要素の幅は150pxとなります。

【プログラミング独学20日目】わからなかったこと・調べてわかったこと

今日学んで疑問が残った部分は以下です。

widthとflex-basisが両方書かれるときとは？

「widthとflex-basisが両方書かれたときはflex-basisの値が優先される」とありましたが、両方書かれるときってどういうとき？と思いました。flex-basisの値が優先されるとわかっていてなぜwidthも書くの？と思うし、widthかflex-basisのどちらかだけ書いておけば良いのでは？と。

同じように思った方もいたようで、先生の回答は以下のようなものでした。

なんとなくわかった気がします。ひとまずどちらかのみ書いておけばOKとのことで、widthが書かれても書かれなくてもflex-basisは計算され続けるとのことなので、flex-basisで書いておくと便利な気がしました。この解釈が合っているかはわかりませんが・・・。それか主軸の方向を途中で変えたいということはあまり無いと思うので、ひとまずwidthで指定しておいて、上手くいかないときがきたらflex-basisで記述し直しても良いのかなと思ったりしました。

独学に限界を感じたらプログラミングスクールに通っても良いかなと思っています。「programmer college」は完全無料のプログラミングスクールで、レッスンだけでなく就活支援まで手厚くサポートしてくれるのが嬉しい点です。なぜ完全無料？怪しくない？と思いましたが、企業から協賛金を募ることで無料スクールが実現しているそうです。どの学習ソフトも有料なので、無料で学べてしかも就活直結ってありがたいですよね。

▼完全無料のプログラミングスクール

【フリーター・未経験歓迎】手に職をつけるプログラミング＆就活スクール