flexboxの保存版

SCSS

@charset "utf-8";
/* 親要素 */
.flexbox{
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;
/* 自動改行 */
-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
}
.flexbox{
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
display:-webkit-box;display:-ms-flexbox;display: -webkit-flex;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;-ms-flex-wrap:wrap;-webkit-flex-wrap:wrap;flex-wrap:wrap;
}
.flexbox{
-webkit-box-direction:column;-webkit-flex-direction: column;flex-direction:column;
}
/* align-items：横の揃え方 */
.flexbox{
/*初期 左端から並べる*/
-webkit-box-pack:start;-ms-flex-pack:start;-webkit-justify-content:flex-start;justify-content:flex-start;
/*均等配備(自動でマージン)*/
-webkit-box-pack:justify;-ms-flex-pack:justify;-webkit-justify-content:space-between;justify-content:space-between;
/*右端から並べる*/
-webkit-box-pack:end;-ms-flex-pack:end;-webkit-justify-content:flex-end;justify-content:flex-end;
/*中央に配置*/
-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;
}
/* align-items：垂直方向の揃え方 */
.flexbox{
/*上に揃える*/
-webkit-box-align:start;-ms-flex-align:start;-webkit-align-items:flex-start;align-items:flex-start;
/*下に揃える*/
-webkit-box-align:end;-ms-flex-align:end;-webkit-align-items:flex-end;align-items:flex-end;
/*上下中央に揃える*/
-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;
/*文字下揃え*/
-webkit-box-align:baseline;-ms-flex-align:baseline;-webkit-align-items:baseline;align-items:baseline;
/*異なるboxの高さを揃える*/
-webkit-box-align:stretch;-ms-flex-align:stretch;-webkit-align-items:stretch;align-items:stretch;
}
/*子要素*/
/*ベンダー対策*/
.flexbox .box{
-webkit-box-flex:1.0;-ms-flex:1;flex:1;
}
/*並び順*/
.flexbox .box:nth-child(2){
-webkit-box-ordinal-group:2;-ms-flex-order:2;-webkit-order:2;order:2;
}
/*
右下に設置(ボタンなど)
今まではposition:absolute;で対応していたものが楽になる
*/
.flexbox .btn,
.flexbox .box:nth-child(5){
align-self: flex-end;
}
/* 高さの調整 */
.flexbox{
-webkit-align-content:center;align-content:center;
-webkit-align-content:stretch;align-content:stretch;
}
/*
後で勉強すべきプロパティ
'flex-grow'、'flex-shrink'、'flex-basis'
*/