caniuse 查询兼容性网站
给父元素添加display:flex ,子元素可以自动的挤压或拉伸
如果不给子元素设置宽高,则子元素的宽高由内容撑开
使用justify-content调节元素在主轴的对齐方式
属性:flex-start 默认值,期待你开始依次排列
flex-end 终点开始依次排列
center 沿主轴居中排列
space-around 弹性盒子沿主轴均匀排列,空白间距均分在弹性盒子两侧。(子元素之间的距离,是父元素的两倍)
space-between 弹性盒子沿主轴均匀排列,空白间均分在相邻盒子之间。(间距在盒子之间)
Space-evenly 弹性盒子沿主轴均匀排列,弹性盒子与容器之间间距相等。(所有间距都相等)
flex:1 等比例分掉父元素的区域
侧轴对齐方式:使用align-items调节元素在侧轴的对齐方式(给容器)
flex-start 起点开始依次排列
flex-end 终点开始依次排列
center 沿侧轴居中排列
stretch 默认值 沿着主轴盒子沿着主轴线拉伸至铺满容器
使用flex-direction 改变元素排列方 主轴默认水平方向,侧轴默认是垂直方向
flex-direction
row 行,水平(默认值)
column 列,垂直
row-reverse 行,从左向右
column-reverse 列,从下向上
弹性布局换行 :flex-wrap wrap 默认不换行 nowrap
flex-wrap: wrap;
/* 设置多行情况下的侧轴对齐方式 */
/* 侧轴居中对齐 */
align-content: center;
/* 上面对齐 */
align-content: flex-start;
/* 下对齐 */
align-content: flex-end;
/* */
align-content: space-around;
/* 两边不留空白 */
align-content: space-between;
/* */
align-content: stretch;