search

hysryt / wiki

https://hysryt.github.io/wiki/
0 stars 0 forks source link

CSS Flexbox #20

Open hysryt opened 6 years ago

hysryt commented 6 years ago

https://liginc.co.jp/web/html-css/css/21024 http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

hysryt commented 6 years ago

Flexbox

Flexboxコンテナー要素の子要素は全てFlexboxアイテム要素となる

hysryt commented 6 years ago

Flexboxコンテナー

Flexboxコンテナーにはdisplay: flexを指定する

flex-directionプロパティ

子要素の配置方向

値 説明
row → : 左から右（初期値）
row-reverse ← : 右から左
column ↓ : 上から下
column-reverse ↑ : 下から上

flex-wrapプロパティ

子要素の折り返し

値 説明
no-wrap 折り返しなし（初期値）
wrap 折り返しあり
wrap-reverse 通常と逆方向に折り返し

flex-flowプロパティ

flex-directionとflex-wrapをまとめて指定するプロパティ

flex-flow: <flex-directionの値> <flex-wrapの値>

justify-contentプロパティ

flex-directionに対して平行方向での整列

値 説明
flex-start 開始方向に寄せる（初期値）
flex-end 終了方向に寄せる
center 中央揃え
space-between 均等割り付け
space-around 均等割り付けに加え、両端にも空白をつける

align-contentプロパティ

flex-directionに対して垂直方向での整列

値 説明
flex-start 開始方向に寄せる（初期値）
flex-end 終了方向に寄せる
center 中央揃え
space-between 均等割り付け
space-around 均等割り付けに加え、両端にも空白をつける

align-itemsプロパティ

各列あるいは各行ごとの整列 flex-directionに対して垂直方向での整列

値 説明
flex-start 左あるいは上に寄せる（初期値）
flex-end 右あるいは下に寄せる
center 中央揃え
baseline ベースラインを揃える
stretch 親要素に合わせて広げる
hysryt commented 6 years ago

Flexboxアイテム

Flexboxコンテナーの子要素

flex-growプロパティ

伸ばす割合 初期値は0 余り領域があるとその領域サイズを他のアイテムと分けあう その際の各アイテムへの割り当て率 0の場合は割り当てない 全て0なら余り領域はそのままとなる

flex-shrinkプロパティ

縮める割合 初期値は1 はみ出し領域があるとその領域を他のアイテムから引く その際の各アイテムからの引き率 0の場合、幅はそのまま

flex-basisプロパティ

縦幅または横幅 heightやwidthより優先される max-heightやmax-widthが指定されているとそちらが優先されるためnoneなどする必要がある pxまたは%またはautoで指定する 初期値はauto

flexプロパティ

flex-grow、flex-shrink、flex-basisをまとめて指定するプロパティ

flex: <flex-growの値> <flex-shrinkの値> <flex-basisの値>

align-selfプロパティ

Flexboxコンテナーのalign-itemsの個別バージョン

orderプロパティ

Flexboxコンテナー内での順番 小さい順から並んでいく

hysryt commented 6 years ago

Example

三等分

CSS

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 33.3333%;  /* 二等分の場合は50%,、四等分の場合は25% */
}

HTML

<div class="flex-container">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
  <div class="item">6</div>
  <div class="item">7</div>
</div>

レスポンシブに二等分、三等分、四等分を切り替え

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex-basis: 50%;
}

@media (min-width: 500px) {
  .item {
    flex-basis: 33.33333%;
  }
}

@media (min-width: 700px) {
  .item {
    flex-basis: 25%;
  }
}

横幅が700px以上の場合は四等分、500px以上の場合は三等分、それ以外の場合は二等分

Bootstrapみたいな感じ

.col-12 { flex-basis: 100%; }

@media (min-width: 500px) {
  .col-md-1 { flex-basis: 8.33333%; }
  .col-md-2 { flex-basis: 16.66666%; }
  .col-md-3 { flex-basis: 25%; }
  .col-md-4 { flex-basis: 33.33333%; }
  .col-md-5 { flex-basis: 41.66666%; }
  .col-md-6 { flex-basis: 50%; }
}

@media (min-width: 700px) {
  .col-lg-1 { flex-basis: 8.33333%; }
  .col-lg-2 { flex-basis: 16.66666%; }
  .col-lg-3 { flex-basis: 25%; }
  .col-lg-4 { flex-basis: 33.33333%; }
  .col-lg-5 { flex-basis: 41.66666%; }
  .col-lg-6 { flex-basis: 50%; }
}
<div class="flex-container">
  <div class="col-12 col-md-4 col-lg-2">1</div>
  <div class="col-12 col-md-4 col-lg-2">2</div>
  <div class="col-12 col-md-4 col-lg-2">3</div>
  <div class="col-12 col-md-4 col-lg-2">4</div>
  <div class="col-12 col-md-4 col-lg-2">5</div>
  <div class="col-12 col-md-4 col-lg-2">6</div>
</div>

Sassを使えばさらに簡単に記述できるはず