Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 9004

flexboxとjustify-content(初学者向け)

$
0
0

flexbox▼

親要素にflexboxを付与することで、子要素を横並びにします。

floatプロパティと機能は同じですが、floatの副作用である親要素の縮小が無いため、
floatプロパティと比較すると非常に使い勝手は良いです。

justify-contentプロパティ▼

justify-content: 〇〇;といった形で、display: flex;に併記します。
すると横並び方向の詳細を決めることができます。

justify-content: center; ▶︎ 要素を中央寄せ
justify-content: start; ▶︎ 要素を左寄せ
justify-content: flex-end; ▶︎ 要素を右寄せ
justify-content: space-between; ▶︎ 要素の両端が左右に寄り、等間隔
justify-content: space-around; ▶︎ 要素が左右に寄り、等間隔。(両端の余白と要素間の余白が1:2)

まとめ▼

flexboxにはまだまだ種類があり、奥が深い為初学者の方は整理しづらいと思いいますが、
積極的に使用することを意識すれば基礎部分には慣れてきますのでどんどん活用しましょう。

次回以降の更新でも紹介していきます!


Viewing all articles
Browse latest Browse all 9004

Trending Articles