flex属性 子元素弹性布局

父元素增加flex属性 子元素弹性布局   display:flex;

子元素增加flex-shrink:1  默认1   0为子元素不压索  (子元素需要都设置成0  不然将可能覆盖为1的元素)

box-sizing: border-box;//包含border with + border

/*

flex 布局方向默认从左向右的方向

row主抽方向默认为水平的从左向右 (左对齐)

column 主抽方向从上往下

row-reverse主抽方向水平从右往左 (右对齐)

column-reverse主抽方向从下往上

* */

flex-direction: column-reverse;

}

flex 默认里面的子元素不换行,当超出时会压缩

flex-wrap:wrap; 平均分配 从左往右的换行  (flex-direction: column-reverse; 从右往左换行)

flex-wrap:wrap-reverse; 倒叙换行

justify-content: center; 主抽里面所有元素居中

justify-content: flex-start;(靠近起点对齐)主抽里面所有元素左对齐方式

justify-content: flex-end;(靠近终点方向对齐)主抽里面所有元素右对齐方式

交叉抽上对齐

项目子元素在交叉抽上默认是起点

align-items:flex-start (默认起点)

align-items:center; (交叉抽上对齐(水平居中,交叉抽上居中对齐) )

align-items:flex-end;(交叉抽上底部对齐(底部对齐))

项目在交叉抽上沾满容器的高度

align-items:stretch;(项目高度为auto  子元素高度填充父元素的高度)(子元素设置)

项目在交叉抽上基于第一行文字的基线对齐

align-items:baseline; (子元素文本基线对齐)

word-break:break-all;(换行)

justify-content:space-between; 子元素两端对齐 计算平均宽度 元素之间的间隔相等

justify-content:space-around;(每个子元素的两侧间隔相等)每个项目两侧的间隔都相等