响应式布局

2020-12-26 02:32:59 阅读：237 来源： 互联网

标签：flex 元素 basis align 布局响应宽度 shrink

媒体查询

媒体查询可以控制最大屏幕一行三个盒子，中等屏幕一行两个盒子，小屏幕一行一个盒子

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9