响应式布局

skt_faker麻瓜
124 阅读3分钟

弹性布局 flex

1、什么是Flex

FlexiableBox 即是弹性盒子，用来进行弹性布局，可以配合rem处理尺寸的适配问题。

1.1 为什么用flex

  • 用来为盒装模型提供最大的灵活性。任何一个容器都可以指定为flex布局。

  • 更符合响应式设计特点。

图片转存失败，建议将图片保存下来直接上传

Flex-direction

作用 子元素在父元素盒子中的排列方式

属性值作用
row默认值。从左到右的顺序显示
row-reverse以相反的顺序
column垂直显示，按从上到下的顺序
column-reverse以相反的顺序
<html>
    <div id="div0">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div>

</html>

css 样式：

   #div0{
        width:380px;    /*  父id设置500 子元素设置100 会显示父ID的背影色 */
        height: 400px;
        display: flex;
        background-color: aqua;
        flex-direction: row;    /* row 行显示  column: 列显示*/
    }

    #div0 div{
        width:100px;
        height: 100px;
        background-color: violet;
    }

Flex-wrap

作用 子元素在父元素盒子中的是否换行（列）

属性值作用
nowrap默认值，不换行，不换列
wrap换行或换列
warp-reverse以相反顺序
<style type="text/css">
    #div0{
        width:380px;    /*  父id设置500 子元素设置100 会显示父ID的背影色 */
        height: 400px;
        display: flex;
        background-color: aqua;
        /* flex-direction: row; */   /* row 行显示  column: 列显示*/
        /* flex-wrap:wrap; */   /* wrap 换行 nowrap 不换行 */
        flex-flow: row wrap;   /* flex-flow: row wrap 行显示 换行  */
    }

    #div0 div{
        width:100px;
        height: 100px;
        background-color: violet;
    }
</style>

Flex-flow

作用 flex-direction 和flex-wrap 属性的简写形式

语法 flex-flow: ||

justify-content

作用 用来在存在剩余空间时，设置为间距的方式

flex-start默认值。从左到右，挨着行的开头
flex-end从右到左，挨着行的结尾
center居中显示
space-between平均分布在该行上，两边不留间隔空间
space-around平均分布在该行上，两边留有一般的间隔空间
<style type="text/css">
#div0{
    width:380px;    /*  父id设置500 子元素设置100 会显示父ID的背影色 */
    height: 400px;
    display: flex;
    background-color: aqua;
    /* flex-direction: row; */   /* row 行显示  column: 列显示*/
    /* flex-wrap:wrap; */   /* wrap 换行 nowrap 不换行 */
    flex-flow: row wrap;   /* flex-flow: row wrap 行显示 换行  */
    justify-content: space-around;

}

#div0 div{
    width:100px;
    height: 100px;
    background-color: violet;
}
</style>

align-items

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

flex-start位于容器的开头
flex-end位于容器的结尾
center居中显示
<style type="text/css">
#div0{
    width:380px;    /*  父id设置500 子元素设置100 会显示父ID的背影色 */
    height: 400px;
    display: flex;
    background-color: aqua;
    /* flex-direction: row; */   /* row 行显示  column: 列显示*/
    /* flex-wrap:wrap; */   /* wrap 换行 nowrap 不换行 */
    flex-flow: row wrap;   /* flex-flow: row wrap 行显示 换行  */
    justify-content: space-around;
    align-items:center;
    /* align-content:space-around; */

}

#div0 div{
    width:100px;
    height: 100px;
    background-color: violet;
}
</style>

align-content

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

flex-start位于容器的开头
flex-end位于容器的结尾
center位于容器的中心
space-between之间留有空白
space-around两端都留有空白
<style type="text/css">
#div0{
    width:380px;    /*  父id设置500 子元素设置100 会显示父ID的背影色 */
    height: 400px;
    display: flex;
    background-color: aqua;
    /* flex-direction: row; */   /* row 行显示  column: 列显示*/
    /* flex-wrap:wrap; */   /* wrap 换行 nowrap 不换行 */
    flex-flow: row wrap;   /* flex-flow: row wrap 行显示 换行  */
    justify-content: space-around;
    align-items:center ; 
    align-content:center;
}

#div0 div{
    width:100px;
    height: 100px;
    background-color: violet;
}
</style>

其它属性

flex-basis设置弹性盒伸缩基准值
flex-grow设置弹性盒子的扩展比率
flex-shrink设置弹性盒子的缩小比率
flexflex-grow、flex-shrink、flex-basis 的缩写

flex-basis

<div id="div0">
    <div></div>
    <div></div>
</div>


   <style type="text/css">
        #div0{
            width: 400px;
            background: violet;
            height: 400px;
            display: flex;
        }

        /*  设置flex-basis 后，width 将失效 
			设置flex-basis为 30% 则宽度就是 父元素的 30% 就是120px
						
		*/

        /*  设置flex-basis 后，width 将失效 */
        #div0 div {
            width: 200px;
            height: 200px;
            background:turquoise;
            /* flex-basis: 50px; */
        }
        /* 设置不同div的宽度 */
        #div0 div:nth-child(1){
            flex-basis: 50px;
        }

        #div0 div:nth-child(2){
            flex-basis: 100px;
        }
    </style>

flex-grow

扩大比列

<style type="text/css">
        #div0{
            width: 400px;
            background: violet;
            height: 400px;
            display: flex;
        }

        /*  设置flex-basis 后，width 将失效 
			设置flex-basis为 30% 则宽度就是 父元素的 30% 就是120px
						
		*/

        /*  设置flex-basis 后，width 将失效 */
        #div0 div {
            width: 200px;
            height: 200px;
            background:turquoise;
            /* flex-basis: 50px; */
        }
        /* 设置不同div的宽度 */
        /* 
            flex-grow :1  占比的份数
            400-50-100=250px;
            250 分为2份 2份位：flex-grow:1 + flex-grow:1 
            250/2 = 125px;
            div>div1 的宽度为：50px + 125px = 175px
            div>div2 的宽度为：100px + 125px = 225px
        */
        #div0 div:nth-child(1){
            flex-basis: 50px;
            flex-grow:1;
        }

        #div0 div:nth-child(2){
            flex-basis: 100px;
            flex-grow:1;
        }
    </style>

flex-shrink

是否缩小

<style type="text/css">
        #div0{
            width: 400px;
            background: violet;
            height: 400px;
            display: flex;
        }

        /*  设置flex-basis 后，width 将失效 
			设置flex-basis为 30% 则宽度就是 父元素的 30% 就是120px
						
		*/

        /*  设置flex-basis 后，width 将失效 */
        #div0 div {
            width: 200px;
            height: 200px;
            background:turquoise;
            /* flex-basis: 50px; */
        }
        /* 设置不同div的宽度 */
        /* 
            flex-grow :1  占比的份数
            400-50-100=250px;
            250 分为2份 2份位：flex-grow:1 + flex-grow:1 
            250/2 = 125px;
            div>div1 的宽度为：50px + 125px = 175px
            div>div2 的宽度为：100px + 125px = 225px
        */
        #div0 div:nth-child(1){
            flex-basis: 300px;
            flex-grow:1;
            flex-shrink:1;
        }

		/* 
			shrink 的份数 = 1+3
			400-600=-200 
			200/4 = 50
			300-50=250
			300-150 = 150
		*/
        #div0 div:nth-child(2){
            flex-basis: 300px;
            flex-grow:1;
            flex-shrink:3;

        }
    </style>

flex 扩大 缩小 占比值

<style type="text/css">
        #div0{
            width: 400px;
            background: violet;
            height: 400px;
            display: flex;
        }

        /*  设置flex-basis 后，width 将失效 
			设置flex-basis为 30% 则宽度就是 父元素的 30% 就是120px
						
		*/

        /*  设置flex-basis 后，width 将失效 */
        #div0 div {
            width: 200px;
            height: 200px;
            background:turquoise;
            /* flex-basis: 50px; */
        }
        /* 设置不同div的宽度 */
        /* 
            flex-grow :1  占比的份数
            400-50-100=250px;
            250 分为2份 2份位：flex-grow:1 + flex-grow:1 
            250/2 = 125px;
            div>div1 的宽度为：50px + 125px = 175px
            div>div2 的宽度为：100px + 125px = 225px
        */
        #div0 div:nth-child(1){
           /* flex-basis: 300px;
            flex-grow:1;
            flex-shrink:1; */
            flex:1 1 300px;	//flex: 0 0  是固定值 代表不变的
        }

		/* 
			shrink 的份数 = 1+3
			400-600=-200 
			200/4 = 50
		div>div1=	300-50=250
		div>div2=	300-150 = 150
		*/
        #div0 div:nth-child(2){
         /*   flex-basis: 300px;
            flex-grow:1;
            flex-shrink:3; */
 			flex:1 1 300px;
        }
    </style>

特殊写法

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

案列1 输入框布局：

  <style type="text/css">
      *{
          margin: 0;
          padding: 0;
      }
      #div0 {
          width: 300px;
          display: flex;
          border: 1px solid #dcdcdc;
      }

      #div0 label {
          flex: 1 1 20px;
          background-color: #f5f5f5;
          text-align: center;
      } 

      #div0 lable:nth-child(3){
          flex: 0 0 20px;
      }

      #div0 input {
          border: none;
          outline: none;
      }

    </style>
</head>
<body>
    <div id="div0">
        <label for="">姓名</label>
        <input type="text" >
        <label>go</label>
    </div>

案列2 长表单布局

 <style type="text/css">
        * {
            margin: 0;
            padding: 0;
        }
		
        #form {
            display: flex;
            flex-direction: column;
        }
     
        #form div{
            display: flex;
            /* height: 50px; */
            align-items: flex-start;
            flex: 0 0 30px;
        }

        #form div label{
            flex: 0 0 100px;
            text-align: right;
        }



    </style>
</head>
<body>

    <form action="">
        <div id="form">
        
                <div>
                    <label for="">姓名:</label>
                    <input type="text">
                </div>
                <div>
                    <label for="">请输入密码:</label>
                    <input type="text">
                </div>
        
        </div>
    </form>
</body>

rem的使用方法

相对于根元素的字体大小的单位


<script>
	var c=()=>{
        let w = document.getElement.clientWidth;	// 获取设备的宽度
        let  n = (20*(w/320)>40?40 + "px":20*(w/320)+"px");
        document.documentElement.style.fontSize=n;
    }
    
    windows.addEventListener("load",c);
    windows.addEventListener("resize",c);
</script>

<style type="text/css">
    html {
        font-size: 12px;
    }
    div{
        font-size: 1rem;
    }
</style>

<div>
    123
</div>

自适应布局

<script type="text/javascript">
    var redirect =() =>{
		// 获取设备的信息
        let userAgent = navigator.userAgent.toLowerCase();
        //正则表达式，判断设备类型
        let device =/ipad|iphone|midp|rv:1.2.3.4|ucweb|android|windows ce/;
        if(device.test(userAgent)){
            window.location.href="move.html"
        }else{
            window.locaiton.href="pc.html"
        }
    }
	redirect(); 
</script>    

<style type="text/css">
    #div0{
        display:flex;
    }
    
    #div0 div:first-child{
        background:yellow;
    	flex:0 0 50px;
    }
    
    
    #div0 div:nth-child(2){
        background-color:red;
        flex:1 1 auto;
    }
    
    #div0 div:nth-child(3){
        background-color:yellow;
        flex:0 0 50px;
    }
    
    @media (min-device-width:400px) and (max-device-width:500px) {
          #div0 div:nth-child(2){
              background-color:blur;
              flex:1 1 auto;
           }
    }
    @media (min-device-width:501px) and (max-device-width:700px) {
        #div0 div:nth-child(2){
            background-color:green;
            flex:1 1 auto;
        }
    }
    
    
</style>

<div id="div0">
    <div>1</div>
   	<div>2</div>
    <div>3</div>
</div>

响应式布局

  • 布局特点 确保一个页面在所有终端上，都能显示出令人满意的效果
  • 一套方案，处处运行
  • 使用%或rem作为单位，此处才用%为单位

图片转存失败，建议将图片保存下来直接上传

图片转存失败，建议将图片保存下来直接上传

big.css

*{
    margin:0;
    padding: 0;
    background-color: #f5f5f5;
}


#layout{
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: 0px auto;
}

 #top{
    width:100%;
    flex: 0 0 50px;
    background-color: yellow;
    margin: 0px auto;
    /* height: 50px; */
}


 #main{
    flex: 0 0 100%;
    display: flex;
}

/*  10% 代表 main宽度 */
#main div:first-child{
    flex: 0 0 10%;   
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    border: 1px solid #ffffff;
}

#main div:first-child li{
    flex: 0 0 100%;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border-bottom: 1px solid white;
}


#main div:nth-child(2){
    flex: 0 0 90%;   
    background-color: #f5f5f5;
    list-style-type: none;
    display: flex;
    flex-wrap: wrap;
    /* border: 1px solid white; */
    justify-content:space-around;
}

#main div:nth-child(2) li{
    flex: 0 0 30%;
    height: 120px;
    text-align: center;
    border-bottom: 1px solid white;
    background-color: yellow;
    margin-top: 10px;
}

layout1.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
    <title>Document</title>
    <link rel="stylesheet" href="./css/small.css" />
    <link rel="stylesheet" href="./css/big.css">
</head>
<body>
    <div id="layout">
        <div id="top"></div>
        <div id="main">
            <div>
                <li>分类1</li>
                <li>分类1</li>
                <li>分类1</li>
                <li>分类1</li>
                <li>分类1</li>
                <li>分类1</li>
            </div>
            <div>
                <li>图片</li>
                <li>图片1</li>
                <li>图片1</li>
                <li>图片1</li>
                <li>图片1</li>
                <li>图片1</li>
                <li>图片1</li>
                <li>图片1</li>
            </div>
        </div>
    </div>
</body>
</html>
avatar
文章
阅读
粉丝