移动端布局学习笔记

橘颂_Wendy

已于 2022-10-09 16:55:53 修改

阅读量166

点赞数

分类专栏：前端开发学习笔记文章标签：学习前端

于 2022-07-29 10:16:59 首次发布

本文链接：https://blog.csdn.net/weixin_46121269/article/details/125983157

版权

一、Flex布局

传统布局：

div布局，table布局，结构标签。

这些布局方式都离不开三个要素。 display, position, float。（操作麻烦）

Flex布局：

操作便捷。一般用于移动端。

布局名称：弹性布局，弹性盒子，伸缩盒布局，伸缩布局，Flex布局。

Flex简介

Flex布局设置在父元素之上，作用于对子元素进行排列。
注意：设置Flex布局以后，浮动和清除浮动会失效。

1.容器

如果一个父元素设置了flex布局，那么我们可以称这个父元素为容器。

如果没有设置flex布局的父元素，那么他就是一个普通的父元素。

2.项目

如果子元素的父元素设置了flex布局，那么这个子元素我们称之为项目。

二、Flex容器常用属性

dispaly: flex;

dispaly-flex；设置flex布局。

设置父元素为容器，通过flex搭建页面。

案例：

<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">
    <title>Document</title>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        /* 给父元素(容器)设置flex
        
        如果一个父元素设置了flex布局，那么我们可以称这个父元素为容器。
        如果没有设置flex布局的父元素，那么他就是一个普通的父元素。
        
        */
        .flexbox{
     
            border: 1px solid red;
            /* 给容器设置flex */
            display: flex;
        }
        /* 给子元素(项目)设置样式 
        如果子元素的父元素设置了flex布局，那么这个子元素我们称之为项目。
        
        */
        /* 
            在flex布局中，不要去考虑项目是块级元素还是行级元素，直接设置宽高就可以。
            比如div,如果没有添加flex布局之前。想一行排列。要不使用display,  要不设置float.
            span 也是一样，必须使用display。   所以我们需要关注的地方是布局！！！
        
        */
        .flexbox span{
     
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div class="flexbox">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <script>
       var  spanlist= document.querySelectorAll(".flexbox span");
       spanlist.forEach(function(w){
     
            w.style.backgroundColor=
            "rgb("+(parseInt(Math.random()*255)+1)+","
            +(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
   
       })
    </script>
</body>
</html>

flex-direction

设置主轴方向。

Flex布局中分为：主轴和侧轴，侧轴也称之为（交叉轴）。

主轴：X轴横轴默认

交叉轴：Y轴，竖轴。

属性值	解释说明
row	默认值，X轴，水平方向，从左到右
row-reverse	X轴，水平方向从右到左
column	侧轴，Y轴，交叉轴垂直方向从上到下
column-reverse	侧轴，Y轴，交叉轴垂直方向从下到上

案例：

<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">
    <title>Document</title>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        /* 给父元素(容器)设置flex
        
        如果一个父元素设置了flex布局，那么我们可以称这个父元素为容器。
        如果没有设置flex布局的父元素，那么他就是一个普通的父元素。
        
        */
        .flexbox{
     
            border: 1px solid red;
            /* 给容器设置flex */
            display: flex;
            /* 切换主轴   
            默认为x轴。  水平方向，从左到右  flex-direction:row
                        水平方向  从右到左  flex-direction:row-reverse;
            切换主轴为Y轴：垂直方向 从上到下 flex-direction:column
                          垂直方向  从下到上 flex-dirction:column-reverse

            
            */
            flex-direction: column-reverse;
        }
        /* 给子元素(项目)设置样式 
        如果子元素的父元素设置了flex布局，那么这个子元素我们称之为项目。
        
        */
        /* 
            在flex布局中，不要去考虑项目是块级元素还是行级元素，直接设置宽高就可以。
            比如div,如果没有添加flex布局之前。想一行排列。要不使用display,  要不设置float.
            span 也是一样，必须使用display。   所以我们需要关注的地方是布局！！！
        
        */
        .flexbox span{
     
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div class="flexbox">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
    <script>
       var  spanlist= document.querySelectorAll(".flexbox span");
       spanlist.forEach(function(w){
     
            w.style.backgroundColor=
            "rgb("+(parseInt(Math.random()*255)+1)+","
            +(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
   
       })
    </script>
</body>
</html>

flex-wrap

设置项目换行模式.

属性值	解释说明
nowrap	默认不换行(压缩项目大小)
wrap	换行
wrap-reverse	换行反转（倒序）

案例：

<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">
    <title>Document</title>
    <style>
        .flexbox{
     
            width: 500px;
            height: 500px;
            border: 1px solid red;
            /* 设置父元素为flex */
            display: flex;
            /* 设置换行模式  
            flex-wrap：nowrap  默认  不换行(压缩项目大小)
                       wrap   换行
                       wrap-reverse   换行  反转   倒序
            */
            flex-wrap: wrap-reverse;
        }
        .flexbox span{
     
            width: 200px;
            height: 200px;
            font-size: 40px;
            text-align: center;
            line-height: 200px;
        }
    </style>
</head>
<body>
    <div class="flexbox">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
    </div>
    <script>
      var spanlist =  document.querySelectorAll(".flexbox span");
      spanlist.forEach(function(w){
     
        w.style.backgroundColor="rgb("+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+","+(parseInt(Math.random()*255)+1)+")";
      })
     
    </script>
</body>
</html>

flex-flow简写方式

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

/* flex-flow flex-direction属性和flex-wrap属性的简写形式 /
/ 主轴为Y轴,换行 */
flex-flow: column wrap;

justify-content

设置项目(子元素)在主轴上的对齐方式

属性值	解释说明
flex-start	默认值。设置子元素在主轴头部显示
flex-end	设置子元素在主轴尾部显示
center	设置子元素在主轴中间显示居中对齐
space-around	设置子元素平分主轴上的剩余空间(两边子元素的间距占中间间距的一半)
space-between	设置子元素两边贴边，平分剩余空间
space-evenly	设置子元素平分主轴上的剩余空间，并且间距一致（子元素间距全部一致）

设置项目在主轴上的对齐方式：

<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">
    <title>Document</title>
    <style>
        *{
     
            margin: 0;
            padding: 0;
        }
        .flexbox{
     
            border: 1px solid red;
            width: 600px;
            height: 500px;
            /* 给容器设置flex */
            display: flex;
           /* 设置项目在主轴上的对齐方式 justify-content */
           /* 设置子元素在主轴头部显示 */
           /* justify-content: flex-start; */

           /* 设置子元素在主轴尾部显示 */
           /* justify-content: flex-end; */

           /* 设置子元素在主轴中间显示  居中对齐 */
           justify-content: center;
           
           /* 设置子元素平分主轴上的剩余空间  */
           /* justify-content: space-around;  */

           /* 设置子元素两边贴边，平分剩余空间 */
           /* justify-content: space-between; */

           /* 设置子元素平分主轴上的剩余空间，并且间距一致 */
           /* justify-content: space-evenly; */

           /*换行  */
           flex-wrap: wrap;
        }
       
        .flexbox span{
     
            width:100px;
            height: 100px;
            text-align: center;
            line-height: 100px;
        }

    </style>
</head>
<body>
    <div class="flexbox">
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
        <span>7</span>
        <span>8</span>
        <span>9</span>
    </div>
    <script>