响应式布局
作者:互联网
媒体查询
媒体查询可以控制最大屏幕一行三个盒子,中等屏幕一行两个盒子,小屏幕一行一个盒子
width:33.3%
width:100%
@media screen and (min-width:400px) and (max-width:500px){ div{ width:50% } }
媒体查询的其他引入方式
<style media="(min-device-width:300px) and (max-device-width:500px)"> //内部的样式代码在满足媒体条件的情况下才会执行 <style>
<link href="css/style.css" rel="stylesheet" media="(min-device-width:300px) and (max-device-width:500px)"> //会根据media条件引用对应link
弹性布局 flex
任何一个容器都可以指定为flex布局,更加符合响应式特点。
注意区分主轴和交叉轴。元素水平排列,则水平轴为主轴,垂直轴为交叉轴。
flex-direction
决定主轴是x轴还是y轴
父容器 display:flex;
需要给子元素设置宽度。
在父容器宽度不够子元素的宽度和的时候,子元素会自动压缩到适应父元素。
例如,父div width:300px, 4个子div自动75px;
flex-wrap
决定子元素在父元素中是否换行。
flex-flow
flex-direction和flex-wrap的简写方式
flex-flow: row wrap;//以水平方式排列,要换行
剩余空间调整
如何处理?
1. 扩大子元素
2. 设置间距
justify-content
在父对象中设置
justify-content:space-between;平均分布的效果。
align-items
作用:设置每个flex元素在交叉轴上的默认对齐方式
flex-start 位于容器开头
flex-end 位于容器的结尾
center 居中显示
align-items:center;
align-content
作用:设置每个flex元素在交叉轴上的默认对齐方式
flex-start 位于容器开头
flex-end 位于容器结尾
center 位于容器中心
space-between 子元素之间留有空白
space-around 子元素两端留有空白
align-items和align-content的区别:
align-items将每一行当作独立个体处理
align-contemt将多行当作整体处理
align-content:center
给子元素设置伸缩比例
以下属性在flex子元素中设置(之前的全是在父元素中设置)
flex-basis 设置弹性盒子伸缩基准值
flex-grow 设置弹性盒子的扩展比率
flex-shrink 设置弹性盒子的缩小比率
flex: flex-grow, flex-shrink,flex-basis的缩写
flex-basis
flex-basis设置后,宽度将不再生效。
felx的值可以是px或百分比。
百分比:父元素的宽度的百分比。
例如:
{
width:100px
flex-basis:30%;
}
最终宽度是父元素的30%
flex-grow
代表子元素伸缩的时候占的份数。
例如:
父元素宽度400px,
子元素1: flex-basis:50px; flex-grow:1;
子元素2: flex-basis:100px; flex-grow:4;
剩余空间:400-50-100=250px(有剩余空间才能谈扩充)
子元素1,2按照1:4的比例去分这250px
子元素1最终宽度:50+250/5 *1 =100px
子元素2最终宽度:100+250/5 *4 = 300px
flex-shrink
默认情况下:所有子对象成比例缩小
flex-shrink:0; 不准缩小
例如:
父元素宽度400px,
子元素1: flex-basis:300px; flex-shrink:1;
子元素2: flex-basis:300px; flex-shrink:3;
剩余空间:400-(300+300)=-200
子元素1,2按照1:3的比例去分剩余空间
子元素1最终宽度:300+(-200)/4*1 = 250px
子元素2最终宽度:300+(-200)/4*3 = 150px
如果不设置flex-shrink,最终子元素1,2都是200px
flex
flex: 1 1 300px
等于
flex-grow:1;
flex-shrink:1;
flex-basis:300px
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% |
标签:flex,元素,basis,align,布局,响应,宽度,shrink 来源: https://www.cnblogs.com/lichtung/p/14191307.html