横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。
簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。
1 2 3 4 5 6 7 8 9 10 11 |
■html <ul class="flexBox"> <li>1番目</li> <li>2番目</li> <li>3番目</li> </ul> ■css .flexBox { display: -webkit-flex; display: flex; } |
また、上下左右中央寄せは
1 2 3 4 5 6 |
.flexBox { display: -webkit-flex; display: flex; justify-content: center; align-items: center; } |
で指定します。
横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。
1 2 3 4 5 6 7 8 |
.flexBox { display: -webkit-flex; display: flex; } .flexBox li:nth-child(3) { -webkit-order: -1; order: -1; } |
コメント