前端学习——响应式布局

媒体查询

@media screen and (min-width:900px) and (max-width:1000px){
}

中间可以添加样式 

不同的引用方法：

<style media="(min-width:900px) and (max-width:1000px)">
</style>

<link href="" rel="">
media ="(min-width:900px) and (max-width:1000px)">

关于flex？

注意一个问题：上面的内容伸缩之后掉下来覆盖下面的内容

解决办法：将height：100%

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为Flex布局

注意：父盒子设为flex布局后，其子元素的clear、float、vertical-align都不起效果 

常见的父项属性

• flex-direction：设置主轴方向（默认是row（从左到右），row-reverse是从右到左，同理column）
• justify-content：设置主轴上元素排列方式
• align-items：设置主轴上元素排列方式（单行）
• flex-wrap：设置子元素是否换行（默认是no-warp，如果需要换行则设置为warp）
• align-content：设置主轴上元素排列方式（多行）
• flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

 justify-content（设置主轴上的子元素的，！！！先定好主轴）

• flex-start：从左到右或从上到下
• flex-end：从尾部开始排
• center：从主轴居中对齐（如果是主轴是x轴则居中对齐）
• spac-around：平均剩余空间
• space-between：先两边贴边，再平分剩余空间

align-items（设置侧轴上子元素的排列！！！单行）

• flex-start：从上到下
• flex-end：从下到上
• center：垂直居中
• stretch：拉伸（默认值，设置了之后子元素不需要有height） 

align-content（设置侧轴上的子元素排列方式！！！多行，单行无效果）

•  flex-start：从上到下
• flex-end：从下到上
• center：垂直居中
• space-around：先分布在两头，再平分剩余空间
• stretch：设置子项元素高度平分父元素高度

flex-flow是flex-direction和flex-wrap属性的复合属性

•  flex-flow：row，warp