node.jsのアンインストール時にpkgとかbrewとかめんどくさかったので書いてく
shu sgw.today
コピペで使えるflexboxでよく使うパターン３選と覚えれないのでよく使うのとりあえずざっくりまとめてみた
shu
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!!!
ABOUT ME
カナダのBCITとか言う短大卒業。その後４年ほどカナダでWEB制作系フロントエンドエンジニアとして働いて、今は東京で働いてるニキの雑記ブログ。カナダ留学、英語、WEB制作、ポイ活などなどを主に記事として書いてます。
