web前端学习（两种布局方式）

最新推荐文章于 2024-05-06 10:59:29 发布
最新推荐文章于 2024-05-06 10:59:29 发布
阅读量426 收藏 2
点赞数
文章标签： 前端 学习 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Xiaoxian____/article/details/126083129
版权

目录

Flex弹性盒模型

flex-direction

flex-wrap

flex-flow

justify-content

align-items 

作用在flex子项上的CSS属性

Flex案例

1. 骰子的点数

2.自适应

grid网格布局

grid-template-columns和grid-template-rows

grid-template-areas和grid-template

grid-column-gap和grid-row-gap

justify-items和align-items

justify-content和align-content 

作用在grid子项上的CSS属性 

骰子 

百度风云榜

Flex弹性盒模型

随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

作用在flex容器上

作用在flex子项上

 flex-direction

order

flex-wrap

flex-grow

flex-flow

flex-shrink

justify-content

flex-basis

align-items

flex

align-content

align-self

flex-direction

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

取值

含义

 row

默认值，显示为行。方向为当前文档水平流方向，
默认情况下是从左往右。

row-reverse

显示为行。但方向和row属性值是反的

column

显示为列

column-reverse

显示为列。但方向和column属性值是反的

flex-wrap

flex-wrap用来控制子项整体单行显示还是换行显示。

取值

含义

 nowrap

默认值，表示单行显示，不换行。

wrap-reverse

宽度不足换行显示，但是是从下往上开始，
也就是原本换行在下面的子项现在跑到上面。

wrap宽度不足换行显示

flex-flow

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

justify-content

justify-content属性决定了主轴方向上子项的对齐和分布方式。

取值

含义

 flex-start

默认值，表现为起始位置对齐。

flex-end

表现为结束位置对齐。

center

表现为居中对齐。

space-between

表现为两端对齐。between是中间的意思，意思是多余的空白间距只在元素中间区域分配。

space-around

around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

space-evenly

evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

align-items 

align-items中的items指的就是flex子项们，因此align-items指的就是flex子项们相对于flex容器在侧轴方向上的对齐方式。 

取值

含义

 stretch

默认值，flex子项拉伸。

flex-start

表现为容器顶部对齐。

flex-end

表现为容器底部对齐。

center

表现为垂直居中对齐。

    <style>
    /*  #parent{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
    #box{ width:150px; height:50px; background:red; margin:auto;} */

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

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; /* flex-wrap:wrap; flex-direction: column; */ flex-flow: column wrap;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}

    #box3{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly; flex-wrap:wrap;}
    #box3 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}

    #box4{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; justify-content: space-evenly;  flex-wrap:wrap;  align-items: flex-start; align-content: space-around; }
    #box4 div{ width:50px; background:red;}
    </style>
</head>
<body>
    <!-- <div id="parent">
        <div id="box"></div>
    </div> -->

    <!-- <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> -->

    <!-- <div id="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>1</div>
        <div>2</div>
    </div> -->

    <!-- <div id="box3">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
    </div> -->
    <div id="box4">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>

作用在flex子项上的CSS属性

取值

含义

order

可以通过设置order改变某一个flex子项的排序位置。
所有flex子项的默认order属性值是0。

 flex-grow

属性中的grow是扩展的意思，扩展的就是flex子项所占据的宽度，扩展所侵占的空
间就是除去元素外的剩余的空白间隙。默认值为0。

flex-shrink

  属性中的shrink是“收缩”的意思，flex-shrink主要处理
当flex容器空间不足时候，单个元素的收缩比例。默认值是1。

flex-basis

flex-basis定义了在分配剩余空间之前元素的默认大小。

flex

flex属性是flex-grow，flex-shrink和flex-basis的缩写。

align-self

align-self指控制单独某一个flex子项的垂直对齐方式。

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:30%; height:30%; background:black; border-radius: 50%;}

    #box2{ width:100px; height:100px; border:1px black solid; border-radius: 5px; display: flex; justify-content: space-between;}
    #box2 div{ width:30%; height:30%; 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>

2.自适应

        *{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>

grid网格布局

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

作用在grid容器上

作用在grid子项上

 grid-template-columns

grid-column-start

grid-template-rows

grid-column-end

grid-template-areas

grid-row-start

grid-template

grid-row-end

grid-column-gap

grid-column

grid-row-gap

grid-row

grid-gap

grid-area

justify-items

justify-self

align-items

align-self

place-items

place-self

justify-content

align-content

place-content

grid-template-columns和grid-template-rows

对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位（网格剩余空间比例单位）。有时候，我们网格的划分是很规律的，如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。

    .box{ width:300px; height:300px; border:1px gray dotted; display: grid;
        /* grid-template-rows: 100px auto 25%;
        grid-template-columns: 100px 100px 200px 100px; */
       /*  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> -->

grid-template-areas和grid-template

.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;}

    <div class="box2">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div>

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;

justify-items和align-items

justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。

place-items可以让align-items和justify-items属性写在单个声明中。

取值

含义

 stretch

默认值，拉伸。表现为水平或垂直填充。

Start

表现为容器左侧或顶部对齐。

end

表现为容器右侧或底部对齐。

center

表现为水平或垂直居中对齐。

  /*  justify-items: end;
        align-items:end; */
       /*  place-items: start end; */
       /* justify-content: space-between;
       align-content: space-between; */
       place-content: space-between space-between;

justify-content和align-content 

justify-content指定了网格元素的水平分布方式。align-content指定了网格元素的垂直分布方式。place-content可以让align-content和justify-content属性写在一个CSS声明中。  

取值

含义

 stretch

默认值，拉伸。表现为水平或垂直填充。

start

表现为容器左侧或顶部对齐。

end

表现为容器右侧或底部对齐。

center

表现为水平或垂直居中对齐。

space-between

表现为两端对齐。

space-around

享有独立不重叠的空白空间。

space-evenly

平均分配空白空间

作用在grid子项上的CSS属性 

取值

含义

grid-column-start

水平方向上占据的起始位置。

 grid-column-end

水平方向上占据的结束位置。（span属性）

grid-row-start

垂直方向上占据的起始位置。

grid-row-end

垂直方向上占据的结束位置。（span属性）

grid-column

grid-column-start + grid-column-end的缩写。

grid-row

grid-row-start + grid-row-end的缩写。

grid-area

表示当前网格所占用的区域，名字和位置两种表示方法。

justify-self

单个网格元素的水平对齐方式。

align-self

单个网格元素的垂直对齐方式。

place-self

align-self和justify-self的缩写。

    <style>
     .box{ width:300px; height:300px; 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: span 2; */
        /* grid-column: 2 / 3;
        grid-row: 2 / span 2; */
        grid-area: 3 / 2 / 4 / 4;   /* 第一个值是水平的起始位置 , 第二个值是垂直的起始位置，三个值是水平的结束位置，第四个值是垂直的结束位置 */
    }

    .box2{ width:300px; height:300px; 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="box">
        <div></div>
    </div> -->

    <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>

骰子 

 

   .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>

百度风云榜

    .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>

Xiaoxian____
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
web前端工程师：5分钟学会Web自适应
02-25
特别说明：在开始这一切之前，请开发移动界面的工程师们在头部加上下面这条meta:所谓宽度自适应严格来说是一种PC端的自适应布局方式在移动端的延伸。在处理PC端的前端界面时候需要用到全屏布局时采用的就是此种布局方式。它的实现方式也比较简单，将外层容器元素按照百分比铺满地方式，里面的子元素固定或者左右浮动。由于父级元素采用百分比的布局方式，随着屏幕的拉伸，它的宽度会无限的拉伸。而子元素由于采用了浮动，那么它们的位置也会固定在两端。该宽度自适应在新的时代有了新的方法，随着弹性布局的普及，它经常被flex或者box这样的伸缩性布局方式替代，变得越来越“弹性”十足。“完全自适应式”是卤煮对此方案的叫法，
【CSS】常用flex布局和grid布局
JackCao_Grass的博客
04-12 358
【CSS】常用flex布局和grid布局
html5支持左右键切换页面代码,HTML5+JS打造的一个跑动小人（左右方向键控制）...
weixin_39621819的博客
05-30 480
HTML5+JS打造的一个跑动小人(左右方向键控制)_网页代码站(www.webdm.cn)您的浏览器不支持canvas标签,推荐您更换谷歌游览器，全面兼容html5。var eventjs = {//添加事件bind: function(elem, type, handler){if (elem.addEventListener) {elem.addEventListener(type, han...
css3 实现大转盘
weixin_34391445的博客
03-06 509
效果 完整代码 <!DOCTYPE html> <html lang="CN"> <head> <meta charset="UTF-8"> <meta name="keywords" content="关键字" /> <meta name="des...
拥抱未来的CSS布局方式flex与grid布局
08-11
本系列文章为对CSS中flex布局与grid布局的详细介绍
CSS拓展——Flex布局和Grid网络布局
qq_52957637的博客
08-01 950
CSS拓展——Flex布局和Grid网络布局
css grid布局和flex布局是什么?
xiaowu2022的博客
12-29 401
在css中，grid布局指的是“网格布局”，是一个二维系统，可以同时处理行和列，可以通过将css规则用于父元素和该元素的子元素来使用网格布局；而flex布局指的是“弹性布局”，是一个一维系统，用来为盒状模型提供最大的灵活性。 （推荐教程：CSS视频教程） 一、flex布局简介 flex是flexible box（弹性布局）的简介，是一个一维系统，用来为盒状模型提供最大的灵活性。 使用：任何容器（行内元素可设置为display:inline-block）; 特点：空间分布在行中进行，而非整体 二、grid布局
display属性和flex grid布局
Berg_liu的博客
11-07 1268
Display属性表 Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫...
web大前端布局
GoldenPigGirl的博客
10-21 777
web大前端布局 想必新手学习代码首先都要接触到前端而在前端里面布局也是一件非常重要之一下面我们先来了解一下布局吧 常用的布局 常用的布局一般分为一下几大类： 文档布局（text）： 文档流本质是 nomal flow （普通流、常规流） 元素在文档中的特点 块级元素，和内联元素。 块级元素：是自带有这行效果，在文档中独占一行的效果，块状元素会自上而下的排列且在默认宽度是父元素的100%而高度默...
Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip
05-23
Web-前端html+css从入门到精通 208. 响应式布局之两种操作模式.zip
移动端rem布局的两种实现方法
12-03
其中一种是通过css的媒体查询，另外一种是通过引入js来控制，这两种方法各有各的优点，但是我还是喜欢用引入js的方法来实现rem布局，尽管现在市面上大多数都在使用css媒体查询的方式实现，在此我就将这两种方法做一...
面试题（1、 响应式布局如何实现 2、三种方式实现一个 div 水平和垂直方向的居中 3、 数据类型判断 4、 rem 布局原理 5、 Arguments 6、 原型和原型链 ）1.doc.pdf
01-03
1、 响应式布局如何实现 2、三种方式实现一个 div 水平和垂直方向的居中 3、 数据类型判断 4、 rem 布局原理 5、 Arguments 6、 原型和原型链
Web应用前端技术的探索与实践
02-05
3.2 Frameset和Div两种方式的对比 5 3.2.1 frameset布局的优点 5 3.2.2 frameset布局的缺点 5 3.2.3 DIV传统布局与frameset相比的优点 5 3.2.4 DIV传统布局与frameset相比的缺点与解决办法 6 3.2.5 大量使用ajax的...
CSS的Grid布局与Flex布局
日常笔记/总结/系列知识梳理
11-09 761
Grid布局是一种CSS布局模式，它使用一个二维的网格系统来定位元素。它允许您将容器分为行和列，然后将元素放置在特定的行和列中。Grid布局非常适合创建复杂的网页布局和对齐元素。 Flex布局是Flexible Box的缩写，称为弹性盒布局，是一种用于为盒状模型提供最大灵活性的布局方式。任何容器都可以被指定为Flex布局，而行内元素也可以使用Flex布局。
CSS之flex布局和Grid布局
Ma_programmer的博客
09-14 329
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 设定副轴对齐方式...
css3 布局、flex布局、grid布局的常用属性(笔记)
weixin_60547084的博客
08-16 891
grid-column: grid-column-start / grid-column-end，简写方式。如果当前有三列，start 所对应的就是1、2、3，而end 所对应的就是2、3、4，写其中一个就可以。当前网格的开始与结束位置，一个单元格表示 1，两个单元格表示 2。注意：如果 n 大于当前总列数，并不会到第二行去，而是会添加列。row-reverse：水平摆放，相反(123 变 321)column-reverse：垂直摆放，相反。row：水平摆放(默认)column：垂直摆放。......
css flex和grid布局总结
qq_62402668的博客
05-19 179
参考链接：CSS 网格布局 | 菜鸟教程 Flex 布局语法教程 | 菜鸟教程 Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 CSS Grid（网格）布局，是一个二维的基于网络的布局系统。 区别：flex是一维布局，grid是二维布局 Grid 属性值 flex 属性值： 容器上 flex-direction flex-wrap flex-flow justify-content align-items..
CSS Flex布局 Grid 简单方阵布局
qq_40144303的博客
01-05 250
grid 和 flex 实现 基础的方阵布局
使用IIS部署Vue项目
最新发布
weixin_44656422的博客
05-06 314
使用IIS部署Vue项目，后端必须跨域，不要在Vue中用proxy跨域，那个只在dev环境中有用！IIS安装，不用全部打勾，有些他默认就是方块 ■ 选择性安装的，就维持原样就可以。
web前端两行三列布局
04-24
Web前端的两行三列布局是一种常见的网页布局方式，可以将页面分为两行三列的格子，每个格子可以放置不同的内容。以下是一种实现方式： HTML结构： ```html <div class="container"> <div class="row"> <div class="column">1</div> <div class="column">2</div> <div class="column">3</div> </div> <div class="row"> <div class="column">4</div> <div class="column">5</div> <div class="column">6</div> </div> </div> ``` CSS样式： ```css .container { display: flex; flex-wrap: wrap; } .row { flex: 1; display: flex; } .column { flex: 1; padding: 10px; } ``` 上述代码中，使用了flex布局来实现两行三列的布局。`.container`是最外层的容器，设置了`display: flex;`来使其成为一个flex容器，并且使用`flex-wrap: wrap;`来实现换行。 `.row`表示每一行，也是一个flex容器，通过设置`flex: 1;`来平均分配剩余空间。 `.column`表示每个格子，同样使用`flex: 1;`来平均分配剩余空间，并设置了一些内边距（padding）来增加间距。 这样就可以实现一个简单的两行三列布局。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值