css CSSを使った要素の配置方法まとめ

CSSを使った要素の配置方法まとめ

最近フロントエンドのレイアウトを主に実装しているのですが、要素を何となくで配置していたところバグが発生したときの対処が素早くできくなってしまったので、CSSで要素を配置する方法について改めて理解し直したのでまとめておきます。

＊参考

＊Flexbox

CSS3から導入されたモジュールで、レスポンシブを簡潔なコードで実装できるなどといったメリットがあります。コンテナ（親要素）とアイテム（子要素）によって構成されます。

＊Flexboxで親要素に使うプロパティ

flex-direction
アイテムの並び順を指定します。rowで左から右への水平方向、columnで上から下への垂直方向になります。逆順の指定も可能です。

justify-content
アイテムの水平方向の位置を指定します。アイテムの間や周囲に配置する間隔を指定することができ、centerで左右中央揃えに配置することができます。

align-items
アイテムの垂直方向の位置を指定します。centerで上下中央揃えに配置することができます。

＊Flexboxで子要素に使うプロパティ

flex
伸び率、縮み率、ベースの幅を指定することができます。（flex-grow / flex-shrink / flex-basis をまとめて指定します）

align-self
アイテムの垂直方向の位置を指定します。

＊Flexbox以外

vertical-align
テキストの縦軸方向の位置を指定します。middleで行の中央に配置することができます。heightで高さが指定されていないと効きません。

text-align
<span>, <label>といったインラインの子要素を左右中央寄せにします。ブロック要素は中央寄せにならないのでdisplay: inline-block;でインライン要素にする必要があります。

＊所感

中央寄せがうまくいかなかったとき、原因を特定せずに適当に中央寄せになりそうなプロパティを指定していたのですが、今後は原因を考えて適切なプロパティを指定しようと思います。

登録: コメントの投稿 (Atom)