flexbox一覧
ほとんどのブラウザ（IE10以降）でベンダープレフィックス必要なし。
が、古いバージョン用に「-webkit-」を念のため付けておくのが無難。
※2023年でIEのサポートは終了。
よく使うflexboxの基本セット（親要素）
display: flex;
.flexwrap {
display: -webkit-box;
display: flex;
}
flex-wrap: wrap;
.flexwrap {
flex-wrap: wrap;
}
justify-content: space-between;
.flexwrap {
-webkit-box-pack: justify;
justify-content: space-between;
}
justify-content: space-around;
.flexwrap {
justify-content: space-around;
}
justify-content: center;
.flexwrap {
-webkit-box-pack: center;
justify-content: center;
}
flex-direction: column;
.flexwrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
よく使うflexboxの基本セット（子要素）
flex-basis: 100%;
.flexitem {
flex-basis: 100%;
}
order:1;
.flexitem {
-webkit-box-ordinal-group:1;
order:1;
}
flex-grow:1;
.flexitem {
-webkit-box-flex:1;
flex-grow:1;
}
flex-shrink:1;
.flexitem {
flex-shrink:1;
}
align-self: flex-start;
.flexitem {
align-self: flex-start;
}
flex-direction: column;
.flexitem {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
}
子要素の中央寄せ
.flexitem {
display: -webkit-box;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
webkit-box-align: center;
align-items: center;
}
孫要素の上下中央寄せ
子要素
.flexitem {
display: -webkit-box;
display: flex;
flex-basis: 〇〇%;
}
孫要素
.flexitem {
display: -webkit-box;
display: flex;
flex-basis: 100%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
flex-direction: column;
-webkit-box-pack: center;
justify-content: center;
webkit-box-align: center;
align-items: center;
}
画像を利用する際の縦伸び防止策
flex-shrink: 0;（主にIE対策）
.flexitem img {
flex-shrink: 0;
}
height: auto; と align-self: flex-start;（iPhone対策）
.flexitem {
height: auto;
}
.flexitem img {
align-self: flex-start;
}
