Flexbox

Flexbox

  • 「display: flex;」で、要素を横並びにできます
    • 「リストや画像を横並びにしたい」
    • 「要素間の余白を均等にして、はみ出たら折り返したい」
    • 「表示する順番を逆からにしたい」
    • 「画像とテキストを左右交互に配置したい」
Flexboxの性質
  • 以下の性質がCSSの記述によって柔軟に変更できます
    • 横並びで表示される
    • 親要素に合わせて横幅・高さが伸縮する
    • HTMLの記述が表示順に影響しない

Flexboxの使い方

  • 親要素に「display: flex;」を指定することで、子要素が横並びになります
<ul class="flex-container">
  <li class="flex-item">要素1(flex-item)</li>
  <li class="flex-item">要素2(flex-item)</li>
  <li class="flex-item">要素3(flex-item)</li>
</ul>
ul, li {
  list-style: none;
}
.flex-item {
 list-style: none;
 background: #1e83ff;
 color: #fff;
 padding: 10px;
 margin: 10px;
}

display: flex; で横に並べる

ul, li {
  list-style: none;
}
.flex-container {
  display: flex;
}
.flex-item {
 list-style: none;
 background: #1e83ff;
 color: #fff;
 padding: 10px;
 margin: 10px;
}

flexコンテナ(親要素)に指定するプロパティ


flex-directionflexアイテムの並び方を指定する
flex-wrapflexアイテムの折り返しを指定する
flex-flowflexアイテムの並び方と折り返しを指定する
justify-contentflexアイテムの横の配置を指定する
align-itemsflexアイテムの高さを揃える
align-contentflexアイテムの縦の配置を指定する

flex-direction - flexアイテムの並び方(横並び・縦並び)