kojiokanoのブログ

コーディング業務で困ったところをまとめています。

cssのflexboxを使ってレイアウトを簡単にしよう

↓はflexboxの例。これくらいcssを用意しておくと汎用性があって便利


.flex
+vender(display, flex)


&--center
align-items: center
justify-content: center

&--row-right
flex-direction: row
justify-content: flex-end

&--row-center
flex-direction: row
align-items: center

&--row-left
flex-direction: row
justify-content: flex-start
align-items: center

&--row-top
flex-direction: row
align-items: flex-start

&--row-bottom
flex-direction: row
align-items: flex-end

&--column-center
flex-direction: column
align-items: center
justify-content: center

&--column-left
flex-direction: column
align-items: flex-start
justify-content: center

&--column-right
flex-direction: column
align-items: flex-end
justify-content: center

&--space-between
justify-content: space-between

&--vertical-center
align-items: center

&--side-left
flex-flow: wrap
justify-content: flex-end

&--side-center
justify-content: center