【CSS勉強】displayとfloatの違いについて

このプロパティを扱うことで、要素をどのように扱うのか、その子要素のために使用されるレイアウトなどを設定できます。例えば、display:flex;と指定するとコンテンツの横幅を自動的に分割して配置され、高さの違う要素を横並びにして、高さを合わせられるようになっています。

このプロパティを扱うことで、指定していない場合は縦並びになる要素が横並びになります。3つの値があり、1.left  2.right  3.noneの三つで、主に1と2を使用します。

これにより、leftの場合は左端へ、rightは右端へブロックが移動します。

floatの機能をdisplayで補うことが可能なため、基本的に左寄せの横並びでプロパティを設定する際にはdisplay:flex;での指定で行っていこうと思います。

今後の課題として、OWLetのページ編集を快適に使うことができるようにウィジェットの編集をしていこうと思います。そのためにも、CSSのプロパティの特徴を忘れてしまっていることが多くあるため、現時点での研修期間中に行っているウィジェットの編集作業や余暇でCSSの勉強をして思い出してと考えています。