【プログラミング独学19日目】flex-containerに付けられるプロパティ、flex-itemに付けられるプロパティ

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

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

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

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

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

 https://chanmk.tokyo/programming_1/

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

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

今日もCSSの続きをやりました。引き続きflexboxの学習です。

①flex-containerに付けられるプロパティ／flex-direction

flexboxは要素を横並びにするためのプロパティです。ボックス全体を示す「flex container」と、その中の1つ1つの要素である「flex item」に分けられます。それぞれプロパティを指定することでスタイルやレイアウトを組んでいくのですが、それぞれに付けられるプロパティは決められています。

まずflex-containerに付けられるプロパティを見ていきましょう。

昨日の最後でもまとめています。

【プログラミング独学18日目】詳細度・flexbox

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

 https://chanmk.tokyo/programming_18/

まずflex-directionは、主軸の方向を決めるためのプロパティです。

flex-direction : row ;

初期値は上のように「row」であり、主軸は左から右方向へ、交差軸は上から下方向へ向いています。中のflex itemは主軸に沿って並べられるものであるため、初期値のrowであれば左から右方向へ並びます。

flex-direction : row-reverse ;

「reverse」は「反転」「反対」「逆」といった意味です。そのため上のように記述した場合は、主軸の方向が右から左方向へ反転するため、flex itemもそれに沿って右から左方向へ並びます。

flex-direction : column ;

上のように記述すると、主軸と交差軸が逆になります。ただflex itemは主軸に沿って並ぶものであるため、主軸に沿って上から下方向へ並びます。

flex-direction : column-reverse ;

row-reverseのときと同様、「reverse」は主軸が反転するという意味です。「column-reverse」であるため、上から下方向へ向いていた主軸が下から上方向に向きます。そのため中のflex itemも、下から上方向へ並びます。

②flex-containerに付けられるプロパティ／justify-content

justify-contentは、主軸に沿って要素をどうそろえるか指定するためのプロパティです。初期値は「row」です。基本的にflex-direbtionと組み合わせて使われることが多いです。

justify-content : flex-start ;

上のように記述すると、containerが左から右方向へ向いている主軸の始点にそろえて表示されます。つまり左揃えになるということです。

justify-content : flex-end ;

上のように記述すると、containerが左から右方向へ向いている主軸の終点にそろえて表示されます。つまりflex-startの逆で、右揃えになるということです。

justify-content : center ;

上のように記述すると、container内で左右に余白が均等に用意され、中央揃えとなって表示されます。

justify-content : space-between ;

上のように記述すると、要素の間の余白が均等に分けられブロックが等間隔で表示されます。

③flex-containerに付けられるプロパティ／align-items

align-itemsは交差軸に沿って要素をどう配置するか指定するためのプロパティで、初期値は「row」です。交差軸方向に余白や余裕がある場合のみ有効になります。なお「align」と入るものは交差軸に関するものであるということを覚えておくと良いでしょう。

align-items : flex-start ;

justify-contentのときと同じで、上のように記述すると交差軸の始点に揃えて要素が配置されます。つまり上揃えになります。

align-items : flex-end ;

上のように記述すると、交差軸の終点に揃えて要素が配置されます。つまり下揃えになります。

align-items : center ;

上のように記述すると、交差軸に対して中央揃えで要素が配置されます。

align-items : flex-start ;

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

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

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

④flex-containerに付けられるプロパティ／flex-wrap

flex-wrapは並べたい要素の幅がコンテナ幅を超えたときに使われるプロパティです。例えばコンテナの横幅を120pxとしているとき、横幅50pxのブロックを3つ横並びにすると3つ目が入らないですよね。そのときにflex-wrapを指定していると、はみ出た分は折り返されて次のコンテナに表示されます。

flex-wrapの初期値は「nowrap」で、特に何も指定しなければコンテナ幅に合わせて要素が収まった形で表示されます。例えばコンテナ幅120pxのところに50pxのブロックを3つ横並びにしようとすると入り切りませんが、flex-wrapを指定しなければ各ブロック幅が40pxずつとなり、コンテナ幅120pxに収まるように表示されます。

flex-wrap : wrap ;

上のように記述すると、はみ出た分は下に折り返されて表示されます。各要素の幅も維持することができます。

flex-wrap : wrap-reverse ;

上のように記述すると、交差軸の向きが反転します。本来であれば上から下方向へ向いていた交差軸が逆になるため下から上方向となり、折り返されたブロックもその向きに沿って折り返されます。

なおflex-directionとflex-wrapは「flex-flow」で一括指定プロパティとして以下のように記述することができます。

flex-flow : row wrap ;

⑤flex-containerに付けられるプロパティ／align-content

先述の通り、「align」と入っているので交差軸方向の話ですね。align-contentは交差軸方向で要素を揃えたい場合に使うプロパティです。

align-content : flex-start ;

上のように記述すると、交差軸の始点に揃えて要素が配置されるため上揃えとなります。

align-content : flex-end ;

上のように記述すると、交差軸の終点に揃えて要素が配置されるため下揃えとなります。

align-content : center ;

上のように記述すると、交差軸の中央に揃えて要素が配置されるため中央揃えとなります。

align-content : space-between ;

上のように記述すると、要素の間に余白が均等に割り振られます。

⑤flex-itemに付けられるプロパティ／align-self

align-selfは、交差軸方向の揃えを指定するためのプロパティです。

.container {
　display : flex ;
　flex-wrap : wrap ;
　width : 350px ;
　height : 300px ;
}

.box1 {
　background : orange ;
　align-self : flex-start ;
}

上のように記述すると、「box1」に対して個別にスタイルを適用できます。「flex-start」であれば、交差軸の始点に揃えてbox1が表示されます。align-itemsなどとほとんど同じですが、違うのは親要素がcontainerか個々の要素（今回でいうbox1）かということです。flexbox全体にスタイルを適用するか、その中の個々の要素であるflex-itemにスタイルを適用するかという違いです。

⑥flex-itemに付けられるプロパティ／order

orderは表示の順番を指定するためのプロパティで、初期値は0です。

例えばボックス1〜3の3つが横並びで並んでいたとして、それぞれのorderの初期値は0です。

.box2 {
　order : 1 ;
}

ここで上のように、中央に配置されているボックス2にorder : 1と指定したとしましょう。すると並び順は左からボックス1、ボックス3、ボックス2となります。

.box2 {
　order : -1 ;
}

また上のようにボックス2にorder : -1を指定すると、並び順は左からボックス2、ボックス1、ボックス3となります。初期値が0であることでややこしくなりがちですが、単純に数字の小さい順に左から並べられるということです。

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

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

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

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

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

初期値とは

「初期値」とはどのような状態のことを指しているのか質問している方がいて、理解しているつもりでしたがたしかに、と思いました。これに対する先生の回答は以下の通りです。

なるほど、理解しました。ちなみにuser agent stylesheetは、chromeなどブラウザでデフォルトとして用意されているスタイルです。例えば<h1>と記載すると自然と文字が大きくなったり太字になったりするのは、このuser agent stylesheetがあるからです。これが無いと<h1>を指定してもただのテキストとして表示されるでしょう。

align-itemsとalign-contentの違い

私は知識を統合して結び付けるのが苦手なのですが・・・他の方が質問していてなるほど、と思ったのでメモしておきます。いずれも交差軸に関するプロパティで、先生の回答は以下のようなものでした。

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

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

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