CSS移动端常见布局——流式布局+flex布局
1.流式布局
即百分⽐布局(⼀般给宽度写百分⽐)，效果：
即随着不同浏览器或屏幕，可以⾃适应宽度，给定50%，再给每个div float:left即实现下⾯效果
清除上⾯的边框：
除此之外，还可以设置最⼤最⼩宽度：max-width & min-width
流式布局案例：京东移动端页⾯：
100% / 5 = 20%
2.flex布局
对⽐传统布局：
①传统布局：兼容性好，但布局繁琐、不能在移动端很好的布局
②flex弹性布局：操作⽅便、布局极为简单、移动端应⽤很⼴泛，但pc端浏览器对其⽀持性差，ie11及更低版本只有部分⽀持
所以在移动端布局要⽤flex布局，pc端暂时还是⽤传统布局
在⽗盒⼦中添加⼀句display: flex即可，⾏内元素也可定义宽⾼，且不再分块级元素(如div)和⾏内块元素(如span)，即任何容器都可以指令为flex布局。
<style>
div {
display: flex;
width: 80%;
height: 300px;
background-color: pink;
justify-content: space-around;
}
div span {
/* width: 150px; */
height: 100px;
background-color: purple;
margin-right: 5px;
}
</style>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
不加justify-content: space-around的效果：
加上justify-content: space-around；之后：
如果想三个紫⾊span横向均分⽗盒⼦，则在span中加上flex: 1即可
flex: 1  ===  flex:1 1 0%
第⼀个参数表⽰: flex-grow 定义项⽬的放⼤⽐例，默认为0，即如果存在剩余空间，也不放⼤， 所有项⽬的flex-grow为1：等分剩余空间（⾃动放⼤占位）；
第⼆个参数表⽰: flex-shrink 定义了项⽬的缩⼩⽐例，默认为1，即如果空间不⾜，该项⽬将缩⼩，所有项⽬的flex-shrink为1：当空间不⾜时，缩⼩的⽐例相同；
第三个参数表⽰: 规定灵活项⽬的初始长度. flex-basis给上⾯两个属性分配多余空间之前, 计算项⽬是否有多余空间, 默认值为 auto, 即项⽬本⾝的⼤⼩。要加单位，如果0则代表0px⽽不是%
⽗盒⼦(称为容器container)设为flex布局后，⼦盒⼦(称为项⽬item)的float、clear、vertical-align(垂直居中)都会失效，因为flex可直接设置垂直居中。
叫法：伸缩布局 == 弹性布局==伸缩盒布局==flex布局，此外flex也可以纵向布局
总结：通过给⽗盒⼦添加flex属性，来控制⼦盒⼦的位置和排列⽅式。
2.1 flex布局⽗项常见属性
①默认主轴向右，侧轴向下，但可以⽤flex-direction改变主轴⽅向，⽽⼦元素永远是按照主轴⽅向排列
②justify-content: space-around/between保持⼦元素尺⼨，与flex: 1不同
③让div垂直居中同时⽔平居中：
i.先将主轴设为垂直向下，再添加justify-content:center属性即可，但没有⽔平居中
ii.搭配align-items实现⽔平垂直都居中
iii.在上⾯两⾏代码的基础上，再改变主轴为向下，则效果为：
④在传统布局中，⼦元素设置float后但是⽗盒⼦装不开所有⼦元素的情况下，⼦元素⾃动换⾏。
⽽在flex中默认不换⾏，缩⼩⼦元素尺⼨，塞到⼀⾏中。这可以通过flex-wrap设置⼦元素是否换⾏。
⑤多⾏⼦元素align-content，注：在单⾏情况下没有效果
⑥align是设置侧轴上的⼦元素 总结content和items区别
⑦复合属性flex-flow
例flex-flow: column wrap; 主轴和换⾏合在⼀起写
2.2 flex布局⼦项常见属性
①flex案例：左右两侧固定，中间填充⾃适应，即在屏幕缩放的过程中，只有中间盒⼦的尺⼨会变化
<style>
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
</style>
<section>
<div></div>
<div></div>
flex布局对齐方式
<div></div>
</section>
②flex:1均分的案例上⽂讲过，不再重述
③flex:2即该⼦元素空间占⽗元素的两份

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。