前端基础（六）：Flex、Grid布局

已于 2022-08-01 18:19:00 修改
阅读量413 收藏
点赞数 1
文章标签： 前端 css css3
于 2022-08-01 17:54:06 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61426204/article/details/126094709
版权

文章目录

一、Flex弹性盒模型

图片

<style>
        #parent{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box{width: 100px;height: 100px;background: red;margin: auto;}
    </style>
</head>
<body>
    <!-- <div id="parent">    
        <div id="box"></div>
    </div> -->
    <!-- 快捷写法：div#parent>div#box -->
</body>
</html>

1、Flex父容器上的一些属性

1.1、flex-direction

flex-direction用来控制子项整体布局方向，是从左往右还是从右往左，是从上往下还是从下往上。
图片

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;
        flex-direction: column;
        }
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;
        background: red;
        }
    </style>
</head>
<body>
    <div id="box">
        <div>1</div><!-- 快捷写法：div{$}*3 -->
        <div>2</div>
        <div>3</div>
    </div>
</body>
</html>

1.2、flex-wrap

用来控制子项整体单行显示还是换行显示
图片

1.3、flex-flow

flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性,第一个值表示方向，第二个值表示换行，中间用空格隔开。

 #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;
        /* flex-direction: column;flex-wrap: wrap; */flex-flow: column wrap;
        }

1.4、justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式
在这里插入图片描述

1.4、align-items

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。（一行中每一个子项的排列）
在这里插入图片描述

 <style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;
        display: flex;justify-content: space-evenly;align-items: flex-start;}
        #box div{width: 50px;background: red; }/* 不加高度，会自适应 */
    </style>
</head>
<body>
    <div id="box">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>
</body>
</html>

图片

1.4、align-content

align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。（多行之间的对齐方式）
在这里插入图片描述

2、Flex子元素上的一些属性

图片
flex:0 1 auto（默认值 ）（优先级会更高 ）

<style>
        #box{width: 300px;height: 300px;border: 1px black solid;margin: 20px auto;display: flex;}
        #box div{width: 50px;height: 50px;color: white;line-height: 50px;text-align: center;background: red; }

        /* #box div:nth-child(2){order: 1;} */
        /* #box div:nth-child(3){order: -1;} *//* 排序处理 */

        #box div:nth-child(2){background: yellow;color: black;flex-grow: 1;}/* 会将剩余的空白全部占满，0.5会占一半 */
        #box div:nth-child(3){background: blue;color: black;flex-grow: 2;}
        #box div:nth-child(1){align-self: center;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
    </div>
</body>
</html>

二、Flex案例

1、骰子的点数

<style>
        #box1{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        justify-content:center;align-items: center;
        }
        #box1 div{width: 30px;height: 30px;background: black;border-radius: 50%;}

        #box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        justify-content:space-evenly;
        }
        #box2 div{width: 30px;height: 30px;background: black;border-radius: 50%;}
        #box2 div:last-child{align-self: flex-end;}

        #box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        justify-content:space-between;align-items: center;
        }
        #box3 div{width: 30%;height: 30%;background: black;border-radius: 50%;}
        #box3 div:first-child{align-self: flex-start;}
        #box3 div:last-child{align-self: flex-end;}


        #box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        flex-wrap: wrap;}
        #box4 div{width: 100%;display: flex;justify-content: space-between;}
        #box4 div:last-child{align-items: flex-end;}
        #box4 i{display: block; width:30%;height:60%;background: black;border-radius: 50%;}
       
        #box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        flex-wrap: wrap;}
        #box5 div{width: 100%;display: flex;justify-content: center;align-items: center;}
        #box5 div:first-child{align-items:flex-start;justify-content: space-between;}
        #box5 div:last-child{align-items: flex-end;justify-content: space-between;}
        #box5 i{display: block; width:30%;height:90%;background: black;border-radius: 50%;}
       
        #box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;display: flex ;
        flex-wrap: wrap;}
        #box6 div{width: 100%;display: flex;justify-content: space-between}
        #box6 div:first-child{align-items:flex-start;}
        #box6 div:last-child{align-items: flex-end;}
        #box6 i{display: block; width:30%;height:90%;background: black;border-radius: 50%;}
    
    </style>
</head>
<body>
    <div id="box1">
        <div></div>
    </div>

    <div id="box2">
        <div></div>
        <div></div>
    </div>

    <div id="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div id="box4">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>         
            <i></i>
            <i></i>
        </div>
    </div>

    <div id="box5">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
        </div>
        <div>         
            <i></i>
            <i></i>
        </div>
    </div>

    <div id="box6">
        <div>
            <i></i>
            <i></i>
        </div>
        <div>
            <i></i>
            <i></i>
        </div>
        <div>         
            <i></i>
            <i></i>
        </div>
    </div>
</body>
</html>

在这里插入图片描述

2、两列固定，一列自适应

<style>
        *{margin: 0;padding: 0;}
       #main{display: flex;}
       #left{width: 200px;height: 200px;background: red;} 
       #center{flex: 1; height: 300px;background: yellow;} 
       #right{width: 150px;height: 200px;background: blue;} 
    </style>
</head>
<body>
    <div id="main">
        <div id="left"></div>
        <div id="center"></div>
        <div id="right"></div>
    </div>
</body>
</html>

在这里插入图片描述

3、百度弹性导航

三、Grid网格布局

Grid布局是一个二维的布局方法，纵横两个方向总是同时存在。
图片

1、grid父元素上属性

1.1、grid-template-coiumns、grid-template-rows

  • 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位(网格剩余空间比例单位)。
  • 有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
<style>
        .box{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
        /* grid-template-rows: 100px auto 25%; *//* 3行 */
        /* grid-template-columns: 100px 100px 200px 100px; *//* 4列 */
            
        /* grid-template-rows: 1fr 1fr 1fr ; 
        grid-template-columns:1fr 1fr 1fr; */

        grid-template-rows: repeat(3,1fr) ; 
        grid-template-columns:repeat(3,1fr);}
        .box div{background: red;border: 1px black solid;}
    </style>
</head>
<body>
    <div class="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
       
    </div>
</body>
</html>

1.2、grid-template-areas、grid-template

  • area是区域的意思，grid-template-areas就是给我们的网格划分区域的。此时grid子项只要使用grid-area属性指定其隶属于那个区。
  • grid-template是grid-template-rows ,grid-template-columns和grid-template-areas属性的缩写。
<style>
        .box2{width: 300px;height: 300px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,1fr) ; 
        grid-template-columns:repeat(3,1fr);
        grid-template-areas: 
        "a1 a1 a1"
        "a2 a2 a3" 
        "a2 a2 a3";      /* 只能形成矩形，不能形成特殊图形 */
        
         /* 复合写法 */
        /* grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a3" 1fr
        "a2 a2 a3" 1fr
        / 1fr 1fr 1fr ; *//* 纵向  */  
    }
        .box2 div{background: red;border: 1px black solid;}
        .box2 div:nth-child(1){grid-area: a1;}
        .box2 div:nth-child(2){grid-area: a2;}
        .box2 div:nth-child(3){grid-area: a3;}

    </style>
</head>
<body>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
       
    </div>
</body>
</html>

在这里插入图片描述

1.3、grid-column-gap、grid-row-gap

  • grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。
  • css grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
 grid-column-gap: 10px;
 grid-row-gap: 20px;
 /* 复合写法 */
 /*  grid-gap: 20px 10px; */

在这里插入图片描述

1.4、justify-items、align-items

  • justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。
  • place-items可以让align-items和justify-items属性写在单个声明中。
  • 针对网格中的一个一个元素的
    在这里插入图片描述
<style>
        .box3{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,1fr) ; 
        grid-template-columns:repeat(3,1fr);
        /* justify-items:center;
        align-items: center; */
        place-items: end end;
        /* 第一个对应的是纵向的（align-items），第二个是水平的（justify-items） */
    }
        .box3 div{background: red;border: 1px black solid;}
    </style>
</head>
<body>
    <div class="box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
</body>
</html>

在这里插入图片描述

1.5 、justify-content、align-content

  • justify-content指定了网格元素的水平分布方式。
  • align-content指定了网格元素的水平分布方式。
  • place-content可以让align-content和justify-content属性写在一个CSS声明中。
  • 针对整个网格的
    在这里插入图片描述
 <style>
        .box3{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
        grid-template-rows: repeat(3,auto) ; 
        grid-template-columns:repeat(3,auto);/* auto自适应 */
      
        justify-content: start;
        align-content:c;
        /* 复合写法 */
       /*  place-content: space-between  space-between ; */
    }
        .box3 div{background: red;border: 1px black solid;}


    </style>
</head>
<body>
    <div class="box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
       
    </div>
</body>
</html>

2、grid子元素上的属性

在这里插入图片描述

 <style>
         .box{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
       
        grid-template-rows: repeat(3,1fr) ; 
        grid-template-columns:repeat(3,1fr);}

        .box div{background: red;border: 1px black solid;
        grid-column-start: 2;/* 纵向上启始的那条线是第二条线 */
        grid-column-end: 3;/* 纵向上结束的那条线是第三条线 */
        grid-row-start: 2;/* 横向上开始的那条线 */
        grid-row-end: 4;/* 横向上结束的那条线 ，四条线将区域锁定*/

        /*  grid-row-end: span 2; *//* 只有end有span属性，不再表示结束的位置，表示截取的网格个数 */

        /* 复合写法，通过斜线划开，不是空格 */
        /* grid-column: 2/3; */
       /*  grid-row: 2/span 2; *//* 开始/结束 */

        }

    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>
</body>
</html>

 grid-area: 3/2/4/4;/* 横向起始/纵向起始/横向结束/纵向结束 */

 <style>
        .box2{width: 500px;height: 500px;border: 1px gray dotted;display: grid;
       grid-template-rows: repeat(3,1fr) ; 
       grid-template-columns:repeat(3,1fr);
       }
       .box2 div{background: red;border: 1px black solid; }
       .box2 div:nth-child(2){/* justify-self: start;align-self:end; */place-self: end start;}


    </style>
</head>
<body>
    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
    </div>
    
</body>
</html>

四、Grid案例

1、骰子的点数

<style>
        /* 圆角边框 */
        .box{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
        }
        /* 点数 */
        .box div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box div:nth-child(1){grid-area: 2/2/3/3;}


         /* 圆角边框 */
         .box2{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
        }
        /* 点数 */
        .box2 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box2 div:nth-child(2){grid-area: 3/3/4/4;}


        /* 圆角边框 */
         .box3{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
            grid-template-areas:
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        /* 点数 */
        .box3 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box3 div:nth-child(2){grid-area:a5;}
        .box3 div:nth-child(3){grid-area:a9;}

        /* 圆角边框 */
        .box4{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
            grid-template-areas:
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        /* 点数 */
        .box4 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box4 div:nth-child(2){grid-area:a3;}
        .box4 div:nth-child(3){grid-area:a7;}
        .box4 div:nth-child(4){grid-area:a9;}

        /* 圆角边框 */
        .box5{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
            grid-template-areas:
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        /* 点数 */
        .box5 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box5 div:nth-child(2){grid-area:a3;}
        .box5 div:nth-child(3){grid-area:a7;}
        .box5 div:nth-child(4){grid-area:a9;}
        .box5 div:nth-child(5){grid-area:a5;}

        /* 圆角边框 */
        .box6{width: 100px;height: 100px;border: 1px black solid;border-radius: 5px;
            display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(3,1fr);
            place-items: center center;/* 每个网格居中处理 */
            grid-template-areas:
            "a1 a2 a3"
            "a4 a5 a6"
            "a7 a8 a9";
        }
        /* 点数 */
        .box6 div{width: 20px;height: 20px;background: black;border-radius: 50%;}
        .box6 div:nth-child(2){grid-area:a3;}
        .box6 div:nth-child(3){grid-area:a7;}
        .box6 div:nth-child(4){grid-area:a9;}
        .box6 div:nth-child(5){grid-area:a4;}
        .box6 div:nth-child(6){grid-area:a6;}

    </style>
</head>
<body>
    <div class="box">
        <div></div>
    </div>

    <div class="box2">
        <div></div>
        <div></div>
    </div>

    <div class="box3">
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="box4">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="box5">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>

    <div class="box6">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

2、百度搜索风云榜

<style>
        .box{width: 280px;height: 352px;margin: 20px auto;display: grid;
            grid-template-columns: repeat(3,1fr);
            grid-template-rows: repeat(4,1fr);
            grid-template-areas:
            "a1 a2 a2"
            "a3 a2 a2"
            "a4 a4 a5"
            "a6 a7 a7";
            grid-gap: 6px 6px;/* 间距 */
        }
        .box div{background: red;}
        .box div:nth-child(1){grid-area: a1;}
        .box div:nth-child(2){grid-area: a2;}
        .box div:nth-child(3){grid-area: a3;}
        .box div:nth-child(4){grid-area: a4;}
        .box div:nth-child(5){grid-area: a5;}
        .box div:nth-child(6){grid-area: a6;}
        .box div:nth-child(7){grid-area: a7;}
    </style>
</head>
<body>
    <div class="box">
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
        <div></div>
    </div>
</body>
</html>

在这里插入图片描述

茉栀。。。
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
display属性和flex grid布局
Berg_liu的博客
11-07 1311
Display属性表 Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫...
看了这篇文章，我也会用grid布局了
风如也的博客
07-27 823
网格布局是由一系列水平及垂直的线构成的一种布局模式，使用网格，我们能够将设计元素进行排列，帮助我们设计一系列具有固定位置以及宽度的元素的页面，使我们的网站页面更加统一。 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局。以前，只能通过复杂的 CSS 框架达到的效果，现在浏览器内置了。 一个网格通常具有许多的「列（column）与行（row）」，以及行与行、列与列之间的间隙，这个间隙一般被称为「沟槽（gutter）」。 Grid 布局与 Flex 布局有一定的相似性
前端flex布局与grid网格布局
wq123123423432的博客
06-01 412
前端flex布局与grid网格布局，
HTML+CSS_第三部分(Flex弹性盒子布局、grid网格布局、移动端、移动端流式布局、移动端rem布局、响应式布局、Bootstrap框架)
weixin_44051048的博客
11-23 1804
文章目录（1）Flex弹性盒子布局一： 父容器上的属性1、 display:flex 设置为弹性盒子（写在父容器上）2、flex-direction值 设置子项的布局方向（写在父容器上）3、Flex-wrap:值 设置子项单行还是换行显示（写在父容器上）4、Flex-flow: 值1 值2 （写在父容器上）5、justify-content:值 主轴方向上子项的对齐及分布方式 （写在父容器上）6、align-items:值 子项们相对flex容器在侧轴上的对齐方式（写在
CSS布局模式之Flex布局&Grid布局
你若盛开，清风自来
06-11 529
CSS布局（Cascading Style Sheets layout）指的是通过使用CSS样式来控制网页中元素的布局方式。在网页设计中，布局是非常重要的一个方面，因为它决定了网页中内容的呈现方式，对网页的可读性、可用性和美观性都有着重要的影响。在CSS的发展过程中，出现了许多不同的布局方案，其中Flex布局和Grid布局是最常用的两种布局方式。通过使用CSS布局，开发者可以通过少量的代码来快速而有效地实现自己所需要的布局效果。Flex布局是一种基于CSS3的新的布局方式，它可以方便地实现。
CSS之flex布局和Grid布局
Ma_programmer的博客
09-14 338
flex布局 display：flex | inline-flex 设定flex布局 flex-direction: row | row-reverse | column | column -reverse 设定主轴方向 justify-content: flex-start | center | flex-end 设定主轴对齐方式 align-content: flex-start | center | flex-end 设定副轴对齐方式...
记录flex和grid布局的代码
最新发布
03-25
在前端开发领域，布局设计是至关重要的，而Flex布局和Grid布局是现代Web设计中两种主要的布局方式。本文将深入探讨这两种布局模式，并通过代码示例帮助理解它们的工作原理和应用场景。 首先，Flex布局（Flexible ...
携程网站 移动端 Flex布局
06-08
携程网站 移动端 Flex布局，新人可以利用此资源来学习flex布局的应用 Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。本文给出了 ...
拥抱未来的CSS布局方式flex与grid布局
08-11
"拥抱未来的CSS布局方式flex与grid布局"这个主题将深入探讨两种主流的布局技术：Flexbox（弹性盒布局）和Grid Layout（网格布局），它们彻底改变了我们对网页布局的理解和实践。 **一、Flexbox布局** Flexbox，...
前端开发，grid网格布局学习全面解析
04-11
grid网格容器属性和项目属性，适用有一定的html，css基础，flex布局更好，前端学习，疑难解惑ppt教学资源，内部资料！！！！！！！！！！！！！！！！！！！！！grid网格容器属性和项目属性，适用有一定的html，css...
携程网首页主要利用flex布局实现
05-02
在实践中，携程网首页的Flex布局可能涉及到更复杂的结构和组合，例如使用CSS Grid与Flexbox混合布局，或是通过JavaScript动态调整Flex属性来实现特定的交互效果。学习和掌握Flex布局，不仅可以提升网页设计的质量，...
flex布局
gaogaogalyt的博客
06-13 399
flex布局（display: flex;）主轴、侧轴对齐方式，伸缩比，圣杯布局
Flex布局及Grid布局
obj_obj_baby的博客
07-06 4662
Flex与Grid布局
grid布局与flex布局之间的孰是孰非？
qq_45217161的博客
04-26 1359
如果只是简单的列表、导航菜单之类的布局，选择 Flex 布局足够了。如果需要更加复杂的布局，比如网格式布局、多栏排版等，则建议选择 Grid 布局。，适用于比较简单的布局场景，如导航菜单、列表排列等，特别是在移动端布局中表现更加优秀。，适用于比较复杂的布局场景，如网格布局、多栏排版等，它可以划分出不同区块，进行更加精细的布局，具有高度自适应性和可读性，且在处理大量信息和多种布局的时候表现比较优秀。Flex 布局和 Grid 布局都是现代 CSS 布局方式中非常流行的两种，可以根据不同的需求进行使用。
css布局、flex、响应式、grid
then啥
11-24 536
一、常见布局类型 表格布局：原始布局方式，利用表格的特性展示布局，没有页面逻辑且大量冗余代码，现在几乎不用 固定宽：常用960px，移动端缩放表现差，不友好 流式：使用float实现动态浮动，各分辨率下样式无法保证 flex弹性盒子：简洁且强大，主流使用 css栅格布局（grid）：将网页分成一系列行和列，将对应内容放入对应区域；新属性兼容性差 二、flex弹性盒子： 1.组成部分：弹...
B端响应式布局解决方案—— Grid 栅格布局应用详解
qq_41968486的博客
10-12 1490
栅格布局三大重要因素：列、水槽、页面边距首先要了解，栅格系统三大重要因素：列、水槽、页面边距。定义列一般PC端通常使用12列栅格，如果业务比较复杂，则可以使用24栅格。当前，也可以根据实际场景需要增加栅格数量，数量越多响应式约灵活，相应的版面被分割的会比较零碎。定义水槽宽度水槽宽度一般使用4或者8的倍数，比如16px，20px，24px。一般推荐使用16px，间距适中。最后 定义触发页面布局的关键值比如 672px，1056px，1312px等进行栅格数量删减。
前端学习之CSS---多列布局、响应式布局、网格布局
weixin_45258154的博客
06-12 694
瀑布流效果，网格线划分，响应式布局媒体查询
css3中grid和flex布局的区别是什么？
hsany330的专栏
05-31 1300
然而 Flexbox 的出现，便轻松的解决了复杂的 Web 布局。它是一种专注于创建稳定的响应式页面的布局模式，并可以轻松地正确对齐元素及其内容。如今已是大多数 Web 开发人员首选的 CSS 布局方式。 现在，又出现了一个构建 HTML 最佳布局体系的新竞争者。（冠军头衔正在争夺中…）它就是强大的 CSS Grid 布局。 那么grid布局和flex布局之间有什么区别？ flex 是弹性布局也称一维布局 ，grid是（二维布局），也就是说grid布局可以更好的操作行和列。 flex布局和grid布
前端提升篇之flex或grid布局实现多列均分布局
哆啦A瑶的博客
05-11 6193
提供一个使用弹性盒布局的多列均分布局终极解决方案，能够实现下图的效果： 其特点有： 列数可控 子元素的宽度相同 列和列之间有空隙，左右两边对齐（没有空隙） 子元素按照从左到右、从上到下的顺序排布 父元素使用flex布局： .container { width: 100%; height: auto; border: solid 1px gray; /* 使用flex布局，设置gap*/ display: flex; flex-wrap: wrap;
前端设置display:block显示布局错乱
05-25
当设置元素的display属性为block时，元素会被渲染为块级元素，它会占据父元素的整个宽度并且独占一行，因此有...4. 如果以上方法都不行，可以尝试使用flex布局或者grid布局，这些布局可以更好地控制元素的位置和大小。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值