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;之后：

文档：https://www.runoob.com/cssref/css3-pr-justify-content.html

如果想三个紫色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>
    <div></div>
</section>

②flex:1均分的案例上文讲过，不再重述

③flex:2即该子元素空间占父元素的两份

④align-self和order

<style>
    div {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        /* 让三个子盒子沿着侧轴底侧对齐 */
        /* align-items: flex-end; */
        /* 我们想只让3号盒子下来底侧 */
    }
    
    div span {
        width: 150px;
        height: 100px;
        background-color: purple;
        margin-right: 5px;
    }
    
    div span:nth-child(2) {
        /* 默认是0   -1比0小所以在前面 */
         /* order: -1;*/
    }
    
    div span:nth-child(3) {
        align-self: flex-end;
    }
</style>

<div>
    <span>1</span>
    <span>2</span>
    <span>3</span>
</div>

align-self效果： 

order可以控制子元素排列顺序，默认为0，给2号子盒子添加order: -1，-1比0小则提到1号前面：