开始啦
1. flex-direction 有关主轴的对齐方式
column 自上到下
row 自左到右 -->默认值
row-reverse 自右到左
column-reverse 自下到上
2. flex-wrap 有关弹性盒子的换行问题
warp 自左到右 自上到下 当宽度大于flex-Box的宽度时，自动换行到下一行
warp-reverse 效果同warp一致，区别在于它的排列方式是倒序，自左到右 但自下到上
3. align-items 有关侧轴(当前行)的对齐方式
flex-start 使元素在弹性盒子的左上角开始，往右依次排序，若宽度大于flex-Box宽度
则等比例的减少所有子元素的宽度
flex-end 与flex-start一致，区别：弹性盒子无论有几行，都会将弹性盒子的高度
均分，然后使子元素在flex-Box每一行的左下角开始向右排序
center 根据flex-Box的行数将每一行的子元素垂直居中，且自左向右排序
baseline 当flex-Box横向时，这条属性会参与基线对齐，其他情况等同于flex-start
4. align-content 多行对齐方式
flex-start 紧贴左上角排列
flex-end 紧贴左下角排列
space-around 首行和末行距离边框的大小为行间距的一半
space-between 首行和末行紧贴边框，其他各行均匀分布，行间距相等
5. justify-content 弹性盒子在主轴或侧轴上的对齐方式
flex-start 紧贴当前轴左上角排列
flex-end 与flex-start方向相反
space-around 首行和末行距离边框的大小相等且为行间距的一半
space-between 首行和末行紧贴边框，其他各行均匀分布，行间距相等
center 设置对齐方式为水平居中
在使用弹性盒子flex布局的时候，所有涉及宽高的元素都应尽量使用百分比定义
这样便于当盒子的总体宽高发生改变的时候，不会影响页面整体的布局美观
下面两张中 右边的是flex布局的HTML代码
首先，是将所有在布局内部的元素改为flex ——> 也就是display：flex
之后，设置每个div元素中四个li所占的宽度 --> 以百分比来计算
当一切完成之后，这便是一个简单的flex布局，不会因为页面宽度的伸缩而改变整体的样式
而是随着页面整体的宽高自适应的改变自身元素的宽
-----------------> 也就不会产生一种文本与页面不搭的怪异感
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [email protected] 举报，一经查实，本站将立刻删除。
