display:flex

横並びにしたい要素にdisplay:flexを指定すると、その子要素が並列になります。

簡単に導入するならば、CSSで「display:flex」というスタイルを指定するだけです。

■html
<ul class="flexBox">
    <li>1番目</li>
    <li>2番目</li>
    <li>3番目</li>
</ul>
■css
.flexBox {
    display: -webkit-flex;
    display: flex;
}

■html

</ul>

■css

.flexBox {

display: -webkit-flex;

display: flex;

}　

また、上下左右中央寄せは

.flexBox {
    display: -webkit-flex;
    display: flex;
　　justify-content: center;
　　align-items: center;
}

.flexBox {

display: -webkit-flex;

display: flex;

　　justify-content: center;

　　align-items: center;

}

で指定します。

横並びにするならば、inline-blockやfloatなど選択肢はありますが、
flex-directionプロパティを使うと、HTMLはそのまま要素の順番の変更が可能です。

.flexBox {
     display: -webkit-flex;
    display: flex;
}
.flexBox li:nth-child(3) {
     -webkit-order: -1;
    order: -1;
}

.flexBox {

display: -webkit-flex;

display: flex;

}

.flexBox li:nth-child(3) {

-webkit-order: -1;

order: -1;

}　

Androidでの©の色

カウント数を出力