CSS

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

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

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

3カラムレイアウト

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

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

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

order

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

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

-広告-

 

 






-CSS