要素を横並びにする方法【flex-box】

使い方

親要素に対して【display: flex;】を書く

【justify-content】

justify-content: flex-start;

子要素全体を左揃え

justify-content: center;

子要素全体を中央揃え

justify-content: flex-end;

子要素全体を右揃え

justify-content: space-between;

子要素全体は利用可能な領域いっぱいに広がり、等間隔に広がる

justify-content: space-around;

子要素全体全体は利用可能な左右の領域を含めて等間隔に広がる

【align-items】

align-items: flex-start;

子要素全体を上揃え

align-items: center;

子要素全体を中央揃え

align-items: flex-end;

子要素全体を下揃え

子要素に対して

【order: 1;】のように指定して順番を変更できる