flex 伸缩布局

2018-11-25  本文已影响0人  苦咖啡Li
1、设置伸缩布局
 display: flex;
2、设置固定宽度 flex-basis
flex-basis: 值;
3、弹性盒子实现多行排列 flex-wrap
flex-wrap : nowrap;    
    //   nowrap  默认不换行
    //   wrap    换行
4、设置水平方向对齐方式 justify-content
justify-content:    flex-start;     居左对齐
justify-content:    flex-end;       居右对齐
justify-content:    center;         居中对齐
justify-content:    space-around;   空白环绕分布
justify-content:    space-between;  空白空间平均分布

常用:  space-around、center
1) space-around  在单行的情况下,视觉效果好
2)在多行时,常用  flex-start
5、设置垂直方向对齐方式 align-items( 设置单行中盒子的垂直对齐方式)
align-items:    flex-start;     在单行中垂直方向上顶部对齐
align-items:    center;     单行中盒子居中对齐
align-items:    flex-end;   在单行中垂直方向上底部对齐
align-items:    stretch;    默认,当盒子内有高度时,将盒子拉伸到最大
align-self:...  自己在垂直方向上的对齐方式
6、改变主轴方向 flex-direction
flex-direction:     column;         主轴向下

#  设置侧轴多行内容对齐方式同水平对齐方式相同
align-content:  flex-start;         居左对齐
align-content:  flex-end;
align-content:  center;
align-content:  space-around;
align-content:  space-between;

注意: 调整主轴方向,可以纵向排布盒子

上一篇 下一篇

猜你喜欢

热点阅读