コピペで使えるflexboxでよく使うパターン３選と覚えれないのでよく使うのとりあえずざっくりまとめてみた

flexbox使うんですけどなかなかプロパティとか覚えてないのでパッとみてわかるようにまとめてみました。上下中央寄せする方法とかもコードつきで書きます。

flexbox

display:flex;

よく使うパターン

上下左右中央寄せ(１つの要素を真ん中に)

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

折り返し無し ３コラム デスクトップ(タブレット) – 1コラム モバイル

デスクトップとタブレット

モバイル

折り返しせずに中の要素が増えた場合に再利用できるようなCSSを書いてます。中の要素が増えた場合は要素間の間を取るためにwidthを調整する必要があります。

<section class='box'>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</section>

.box{
  background:pink;
  display:flex;
  justify-content: space-between;
  flex-direction: row;
}

@media only screen and (max-width: 768px) {
  .box{
    flex-wrap: wrap;
    flex-direction: column;
  }
}

div{
  width:30%;
  background:red;
  max-width:300px;
}

@media only screen and (max-width: 768px) {
  div{
    width:100%;
    max-width:initial;
  }
}

折り返し ３コラム デスクトップ(タブレット) – 1コラム モバイル

下の方のセクションです。

デスクトップとタブレット

モバイル

中の要素を増やしても画像サイズは小さくならず折り返します。space-betweenを使うと新しい行で要素の数が違うと真ん中に大きなスペースが空いてしまうことになるのでその場合は空の要素を使うか擬似要素を使って対処するしかないようです。一応BEMと言われるCSSアーキテクトに基づいてクラス名を定義しています。

<section class='box'>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
</section>

//ここから追加
<section class='box box---wrap'>
  <div class="a">a</div>
  <div class="b">b</div>
  <div class="c">c</div>
  <div class="c">d</div>
</section>

section{
  margin:.5em 0;
}

.box{
  background:pink;
  display:flex;
  justify-content: space-between;
  flex-direction: row;
}

@media only screen and (max-width: 768px) {
  .box{
    flex-wrap: wrap;
    flex-direction: column;
  }
}

div{
  width:30%;
  background:red;
  max-width:300px;
  height:80px;
}

@media only screen and (max-width: 768px) {
  div{
    width:100%;
    max-width:initial;
  }
}
//ここから追加
.box---wrap{
  flex-wrap: wrap;
}

flexboxざっくりまとめ

横か縦か row or column – flex-direction

横向き

flex-direction: row;

逆横向き

flex-direction: row-reverse;

縦向き

flex-direction: column;

逆縦向き

flex-direction: column-reverse;

折り返すか否か flex-wrap

折り返さない

flex-wrap: nowrap;

折り返す

flex-wrap: wrap;

下から上に折り返す

flex-wrap: wrap-reverse;

向きと折り返しどちらもまとめて flex-flow

横向きで折り返し

flex-flow: row wrap;

横向きで折り返さない

flex-flow: row nowrap;

縦向きで折り返す

flex-flow: column wrap;

縦向きで折り返さない

flex-flow: column nowrap;

横並べの仕方 justify-content

左から並ぶ

justify-content: start;

右から並ぶ

justify-content: end;

中央に並ぶ

justify-content: center;

最初と最後の要素以外に均等なスペースを

justify-content: space-between;

すべて均等にスペースを

justify-content: space-evenly;
justify-content: space-around;

縦並べの仕方 align-content

上から始まりすべてのflex内の要素がもっとも長い要素に合わせて伸びる

align-content: stretch;

上から始まり要素の内容ごとに縦幅が決まる

align-content: flex-start;

中央中心に上下に均等なスペース

align-content: center;

下から始まり要素の内容ごとに縦幅が決まる

align-content: flex-end;

中央にスペースを儲け、上下に別れる

align-content: space-between;

上下中に均等なスペース

align-content: space-around;

flex内部の要素

比率を当てるflex-grow

flex-grow:数値

比率を当てる flex-shrink

flex-shrink:数値

直接大きさを当てる flex-basis

flex-basis:数値

flex flex-grow flex-shrink flex-basisをまとめて

flex:grow shrink basis;

１つだけalign-contentを適応させたい時 align-self

他の要素に合わせて伸びるstretch

align-self: stretch;

上から始まり要素次第で縦幅が変わる

align-self:flex-start;

中央から始まり要素次第で長さが変わる

align-self: center;

下から始まり要素次第で縦幅が変わる

align-self:flex-end;

order 順番変えたい時

order:数値

こんな感じです。flexboxは便利ですが、ワードプレスで３コラム作ったりして中身が動的に変化する場合はいろいろと考えないといけない部分があるみたいです。

それではCyaaaaaaaaaaaaaa!!!

sgw

フロントエンド

TwitterFacebook

カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。