弹性布局flex
1.要给父标签容器设置成弹性盒子，display：flex
2.弹性容器中的子标签，叫做弹性子元素，都会根据弹性容器的属性进行灵活布局
3.主轴，默认情况下 所有的弹性子元素会从主轴的起点开始摆布到主轴的终点
4.侧轴，与主轴垂直的轴！！！交叉轴
特点：主轴与侧轴都不是真实存在的，他们的存在是为了帮助我们，明确弹性子元素的排布方向和排布位置
关键！！：弹性容器的css样式
1： 主轴的方向 flex-direction：
a ：row 默认值，横向 从左往右
b ：row-reverse 横向 从右往左
c ：column 竖直 从上往下
d ；column-reverse 竖直 从下往上
2： 换行方式： flex-wrap
a ： nowrap 默认值 不换行 如果空间不够 会强行压缩子标签的宽高
b ：wrap 换行 常用！！！！！
c ：wrap-reverse 换行 但是 侧轴与之前的方向相反 按照调整后的侧轴方向排布
3：弹性子元素在主轴上的对齐方式 justify-content：
a ：flex-start 默认值 会按照书写顺序从主轴的起点开始排布
b ：flex-end 按照书写的顺序 靠着主轴终点排布
c :center 主轴居中排布
d :space-between 最外侧两个元素靠边 其余元素左右距离相等 常用！！！！！
e： space-around 所有元素所有的间隔距离相等
4.弹性子元素在侧轴上的对齐方式 align-items
a、flex-start 按照书写顺序 从侧轴的起点开始排布
b、flex-end 按照书写顺序，靠着侧轴的终点排布
c、center 侧轴居中排布
d、baseline 文字基线对齐
e、stretch 默认值 弹性子元素 在侧轴上的默认高度 如果已经设置了高度 该值失效 不设置高度 ，默认撑满整个容器
5. 多行弹性子元素在侧轴的对齐方式 align-content
a、flex-start
b、flex-end
c、center
d、strech
以上四个值 系统会把多行子元素看成一个整体 效果同align-items 一样
e、space-between
f、space-around
以上两个值，系统会把多行子元素 看成一个整体 效果与justify-content 一样
（次重点）弹性子元素的css属性
1.order 顺序数值，决定元素的排版先后顺序，默认所有的弹性子元素此值都为0，值越小越靠前，如果值相等 写的越早越靠前
2.flex-grow 多余空间的分配比例，默认为0，表示不匹配
填写的非0 数字对应的元素所占的多余空间的份数
3.flex-shrink 当空间不足时收缩的比例值
0表示不收缩 默认值为1
公式： a、计算权重 ： 所有元素自身宽*缩放比例的和
b、一次计算应收缩的大小
自身宽度*缩放比例/权重*溢出量
4. align-self 单独设置弹性子元素 在侧轴上的对齐方式！！！！
赋值的写法 参考align-items！！！
网友评论