flex弹性布局属性总结

弹性布局属性总结

display: flex;        弹性布局
主轴：
flex-direction:row/row-reverse;        水平（默认）左到右/水平从右到左(相当于右浮动)
flex-direction:column/column-reverse;        垂直 从上到下/从下到上

justify-content: flex-start/flex-end/center;        (默认)在开始位置--左对齐/在结束位置/居中
justify-content: space-between/space-around;        子元素 之间的距离相等/左右距离相等

侧轴：
align-items: stretch;        拉伸(前提子元素不能有高度)
align-items: flex-start/flex-end/center;        在开始位置，靠上/结束位置，考下/垂直居中
多行
flex-wrap: wrap;        多行文本对齐方式
align-content: stretch;         拉伸(前提子元素不能有高度)
align-content: flex-start/flex-end/center;       多行靠上/靠下/居中
align-content: space-between/space-around;        行与行距离相等/上下距离相同
弹性比例
flex:n;        等比例，参照父盒子1 2 3 自身宽=父宽*自身比例 / 比例总和

常用
justify-content:center/space-between;        弹性居中/外距离相等
align-items:center;        垂直居中
justify-contert:center;        水平居中
flex-wrap:wrap;        调整多行对齐
flex:1;        父元素的百分之10