CSS

【実践】 3カラムレイアウト

実践でフレックスボックスを使って3カラムレイアウトを組み上げる方法について見ていきます。

  • 3カラムレイアウト
  • order

3カラムレイアウト

・３つの要素を横並びにして内容を縦に並べていく形を3カラムレイアウトといいます。例えば、main, aside, navタグを横並びにしたい場合について考えて行きます。

・先日やった2カラムレイアウトのときと同様にdivタグの中にmain, aside, navタグを入れて中に３つの要素をdisplay: flex;で横並びで配置してあげればOKです。

【実践】２カラムレイアウト

order

・例えばnavタグを中央ではなく左詰めに配置したくなった場合、orderプロパティを使うことによって、左側に持ってくることができます。

・初期値は０なので、このときの値は−１にしてあげましょう

-広告-

 

 






-CSS