弹性盒模型(上)
弹性盒
作用:控制离它(最近的一层)子元素,布局方式。
特点:
① 弹性盒子里面的离它最近的一层子元素都可以添加大小。
② 如果想让弹性盒子里面的一个子元素左右上下居中,只需要给子元素添加margin:auto即可
③ 弹性盒子里面的子元素都是沿着“主轴”排列(注:默认情况下X轴为主轴。)
一:触发弹性盒子:
display:flex;
二:改变主轴的方向:
flex-direction:
属性值:
row (默认值:X轴为主轴)
column (Y轴为主轴)
column-reverse (以Y轴为主轴反向排列)
row-reverse (以X轴为主轴反向排列)
三:改变主轴的对齐方式:
justify-content:
属性值:
flex-start 默认状态:在弹性盒子开始的地方显示
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
四:侧轴的对齐方式:
align-items:
flex-start 侧轴开始的位置
flex-end 侧轴结束的位置
center 侧轴居中的位置
baseline 基线(flex-start等效)
stretch(默认值) 拉伸
五:控制弹性盒子里面的子元素换行处理:
flex-wrap:
wrap 换行
nowrap 不换行
wrap-reverse 反向换行
六:控制行与行的对齐方式:
align-content:
flex-start 默认状态:行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
七:补充:flex-direction 和 flex-wrap简写:
flex-flow:;
注:以上7个属性全部添加在父元素弹性盒子上面