Flexboxチートシート
@wordpressFlexboxとはFlexible Box Layout Moduleのことで、柔軟なレイアウトを簡単に実現することができるCSS3の新しいレイアウトモジュールです。
最初と最後の子要素を両端に配置し、残りの子要素は均等に間隔をあけて配置
.flex {
display: flex;
justify-content: space-around;
}上記プラス、縦中央に揃えて配置
.flex {
display: flex;
justify-content: space-around;
align-items: center;
}後ろから逆に配置
.flex {
display: flex;
flex-direction: row-reverse;
}要素を複数行に折り返し配置
.flex {
display: flex;
flex-wrap: wrap;
}Flexboxで画像や要素が小さくなる時の対処方法
.flex .imgclass {
width: 300px;
flex-shrink: 0; /* 追加 */
}flexで横並びの高さを揃える方法
孫要素の高さも揃えたい
display:flexとalign-items:stretchを指定
.flex {
display: flex;
align-items: stretch;
}
.flex>div {
/*コレ*/display: flex;
/*コレ*/align-items: stretch;
border: 1px solid #999;
width: 50%;
padding: 10px;
background: #cbe6ed;
}
.flex>div>p {
display: block;
width: 100%;
border: 1px solid #999;
padding: 10px;
box-sizing: border-box;
background: #fff;
}
