转载：响应式页面-flex的使用

@media常用参数

属性	作用
width、height	浏览器的宽度、高度
device-width	屏幕的宽度
device-height	屏幕的高度

@media的引入方式

第一种：
// 当屏幕宽度在 769-1024之间时， 使用以下的css
<style>
    @media screen and (min-device-width: 769px) and (max-device-width: 1024px) {
	#header div{
	    width: 50%;
	}
    }

    @media screen and (min-device-width: 481px) and (max-device-width: 768px) {
	#header div{
	    width: 33.3%;
	}
    }
</style>



第二种：
<style media="(min-device-width: 769px) and (max-device-width: 1024px)">
    #header div{
	width: 33.3%;
	}
    }
</style>



// 第三种
<link href="" media="(min-device-width: 769px) and (max-device-width: 1024px)">

flex-direction 子元素在父元素盒子中的排列方式

属性	作用
row	默认值，按从左到右的顺序显示
row-reverse	倒叙排列显示
column	将子元素垂直显示，从上到下
column-reverse	垂直倒叙排序显示

flex-wrap 子元素在父元素盒子中是否换行（列）

属性值	作用
nowrap	默认值，不换行列
wrap	换行或者换列
wrap-reverse	倒叙换行或列

flex-flow 缩写

属性值	作用
flex-flow	flex-direction、flex-wrap的缩写

justify-content 存在剩余空间时，设置为间距的方法

属性值	作用
flex-start	默认值。从左到右，挨着行的开头
flex-end	从右到左，挨着行的结尾
center	居中显示
space-between	平均分布在该行上，两边不留空间
space-around	平均分布在该行上，两边留有一半的间隔空间

align-items 设置每个flex元素在交叉轴上的默认对齐方式

属性值	作用
flex-start	位于容器的开头
flex-end	位于容器的结尾
center	居中显示

子元素的设置

属性值	作用
flex-basis	设置弹性盒伸缩基准值（顶替width属性）
flex-grow	设置弹性盒子的拓展比率(平分父元素剩余的宽度)
flex-shrink	设置弹性盒子的缩小比率
flex	flex-grow、flex-shrink、flex-basis的缩写

flex简写的特殊用法

属性	作用
flex: auto	flex: 1 1 auto
flex: none	flex: 0 0 auto
flex: 0% flex: 100px	flex: 1 1 0% flex: 1 1 100px
flex: 1	flex: 1 1 0%

.box{
    width: 500px;
}
.box div:nth-child(1){
    flex-basis: 100px;
    flex-grow: 1;
}
.box div:nth-child(2){
    flex-basis: 200px;
    flex-grow: 2;
}

父元素剩余的宽度： 500 - 100 - 200 = 200
第一个div宽度： 100 + 200/（1+2） * 1 = 166.6666666px
第二个div宽度： 200 + 200/（1+2） * 2 = 333.3333333px






.box div:nth-child(1){
    flex-basis: 200px;
    flex-shrink: 1;
}
.box div:nth-child(2){
    flex-basis: 200px;
    flex-shrink: 2;
}

父元素的宽度： 300

300-div[1]+div[2] = -100
100 / (1+2) = 33.3333

第一个div宽度： 200 - 33.3333 = 166.6666
第二个div宽度： 200 - 33.3333*2 = 133.3333

转载链接：https://www.bilibili.com/video/BV1ov411k7sm?p=5