知的好奇心で賢くなっていこうBlog

知的好奇心から雑記して学びを得るブログ

Flexboxを使うと簡単にCSSと同じことができるらしいよ。Progateで学んだこと以外にもたくさんあるみたい!

文系大学生のプログラミング習得日記Progate HTML&CSS編(7日目)

f:id:amaamiamu:20191207223623p:plain

『このレッスンではCSSを使ったレイアウト方法の1つであるFlexboxを学んでいきましょう。学習する内容はFlexboxのたくさんあるプロパティの中でも、特によく利用されるものになりますFlexboxはとても便利なので、しっかり身につけていきましょう。』ということで。

 

こっちのやり方でレイアウトできるんなら最初からこのやり方だけでいいやんって思っちまったんだけど、なんで二通りも学ぶ必要あるんだろ。

まあいいや

 

学んだこと
  1. 親要素にdisplay:flex;を指定すると、横並びになる。
  2. display:flexに加えて要素にflex;auto;を指定すると、親要素に合わせて伸び〜る。
  3. 親要素にflex-wrap:wrap; , 子要素にwidth:50%;を指定すると、折り返される。
  4. 親要素にflex-direction:column;を指定すると縦並びになる。
  5. flex-direction:column;に加えて子要素にmargin:0 auto; , width:50%;を指定すると、中央に寄る。

 

このサイトみたけど他にもいろんなコードで割と簡単にレイアウトできるみたい・・・

https://webdesign-trends.net/entry/8148(もう迷わない!CSS Flexboxの使い方を徹底解説)

 

 

HTMLとCSSに関してはProgateで学ぶことは一通り終えました!

次は、ある教材本を使ってHTML&CSSを復習しながら更にWebデザインに関する新しい知識も習得していくー。