flex弹性布局和grid网格布局

最新推荐文章于 2024-06-19 08:45:00 发布
最新推荐文章于 2024-06-19 08:45:00 发布
阅读量190 收藏
点赞数
文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_61422721/article/details/126107169
版权

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #parent{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex;}
    #box{ width:150px; height:50px; background:red; margin:auto;} 
    </style>
</head>
<body>
    <div id="parent">
        <div id="box"></div>
    </div>
</body>
</html>

1.flex-direction

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

取值

含义

 row

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

row-reverse

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

column

显示为列

column-reverse

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #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;}
    </style>
</head>
<body>
    <div id="box">
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </div> 
</body>
</html>

2.flex-wrap

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

取值

含义

 nowrap

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

wrap

宽度不足换行显示

wrap-reverse

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; flex-wrap:wrap; flex-direction: column;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    </style>
</head>
<body>
    <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>
</body>
</html>

3.flex-flow

  • flex-flow属性是flex-direction和flex-wrap的缩写，表示flex布局的flow流动特性。第一个值表示方向，第二个值表示换行，中间用空格隔开。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; flex-flow: column wrap;}
    #box2 div{ width:50px; height:50px; color:white; line-height: 50px; text-align: center; background:red;}
    </style>
</head>
<body>
    <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>
</body>
</html>

4.justify-content

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

取值

含义

 flex-start

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

flex-end

表现为结束位置对齐。

center

表现为居中对齐。

space-between

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

space-around

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

space-evenly

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #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;}
    </style>
</head>
<body>
    <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>
</body>
</html>

5.align-items

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

取值

含义

 stretch

默认值，flex子项拉伸。

flex-start

表现为容器顶部对齐。

flex-end

表现为容器底部对齐。

center

表现为垂直居中对齐。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #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; }
    #box4 div{ width:50px; background:red;}
    </style>
</head>
<body>
    <div id="box4">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>
</body>
</html>

6.align-content

  • align-content可以看成和justify-content是相似且对立的属性，如果所有flex子项只有一行，则align-content属性是没有任何效果的。

取值

含义

stretch

默认值。每一行flex子元素都等比例拉伸。例如，如果共两行flex子元素，则每一行拉伸高度是50%。

 flex-start

表现为起始位置对齐。

flex-end

表现为结束位置对齐。

center

表现为居中对齐。

space-between

表现为两端对齐。

space-around

每一行元素上下都享有独立不重叠的空白空间。

space-evenly

每一行元素都完全上下等分。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #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="box4">
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
        <div>测试文本</div>
        <div>测试文本测试文本</div>
        <div>测试文本测试文本测试文本</div>
        <div>测试文本</div>
    </div>
</body>
</html>

7.作用在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子项的垂直对齐方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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){ background:yellow; color:black; flex-grow: 1;}
    #box div:nth-child(3){ background:blue; color:black; flex-grow: 2;}

    #box2{ width:300px; height:300px; border:1px black solid; margin:20px auto; display: flex; align-items: flex-end;}
    #box2 div{ width:50px; color:white; line-height: 50px; text-align: center; background:red;}
    #box2 div:nth-child(2){ background:yellow; color:black; align-self: center;}
    #box2 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>

    <div id="box2">
        <div>1</div>
        <div>测试文字</div>
        <div>3</div>
        <div>4</div>
    </div>
</body>
</html>

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

1.grid-template-columns和grid-template-rows 

  • 对网格进行横纵划分，形成二维布局。单位可以是像素，百分比，自适应以及fr单位
  • 如果需要添加多个横纵网格时，可以利用repeat()语法进行简化操作。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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;}
    </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>

2.grid-template-areas和grid-template

  • grid-template-area是给网格划分区域的。grid子项只要使用grid-area属性指定其隶属于哪个区。      
  • grid-template是grid-template-rows，grid-template-columns和grid-template-areas属性的缩写。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box2{ width:300px; height:300px; border:1px gray dotted; display: grid;
        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>

3.grid-column-gap和grid-row-gap

  • grid-column-gap和grid-row-gap属性用来定义网格中网格间隙的尺寸。      
  • CSS grid-gap属性是grid-column-gap和grid-row-gap属性的缩写。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box2{ width:300px; height:300px; border:1px gray dotted; display: grid;
        grid-template: 
        "a1 a1 a1" 1fr
        "a2 a2 a3" 1fr
        "a2 a2 a3" 1fr
        /1fr 1fr 1fr;
        grid-gap:20px 10px;
    }
    .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>

4.justify-items和align-items

  • justify-items指定了网格元素的水平呈现方式，是水平拉伸显示，还是左中右对齐。align-items指定了网格元素的垂直呈现方式，是垂直拉伸显示，还是上中下对齐。      
  • place-items可以让align-items和justify-items属性写在单个声明中。

取值

含义

 stretch

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

Start

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

end

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

center

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box3{ width:500px; height:500px; border:1px gray dotted; display: grid;
        grid-template-rows: repeat(3 , 100px);
        grid-template-columns: repeat(3 , 100px);
        place-items: start end;
    </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>

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

平均分配空白空间

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box3{ width:500px; height:500px; border:1px gray dotted; display: grid;
        grid-template-rows: repeat(3 , 100px);
        grid-template-columns: repeat(3 , 100px);
        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>

6.作用在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的缩写。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <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-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){ 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>
</body>
</html>

 

m0_61422721
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
运用Grid或者flex布局制作页面
06-10
CSS Grid布局，全称为“二维网格布局系统”，它允许你将网页设计成一个由行和列组成的网格系统，每个单元格可以放置一个元素。通过设置行和列的大小，以及定义单元格之间的间距，你可以精确地控制网页元素的位置。...
display属性和flex grid布局
Berg_liu的博客
11-07 1317
Display属性表 Flex布局 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。 项目默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫...
CSS布局模式之Flex布局&Grid布局
你若盛开，清风自来
06-11 541
CSS布局（Cascading Style Sheets layout）指的是通过使用CSS样式来控制网页中元素的布局方式。在网页设计中，布局是非常重要的一个方面，因为它决定了网页中内容的呈现方式，对网页的可读性、可用性和美观性都有着重要的影响。在CSS的发展过程中，出现了许多不同的布局方案，其中Flex布局和Grid布局是最常用的两种布局方式。通过使用CSS布局，开发者可以通过少量的代码来快速而有效地实现自己所需要的布局效果。Flex布局是一种基于CSS3的新的布局方式，它可以方便地实现。
CSS布局——Flex布局和Grid布局
最新发布
kaisersama__的博客
06-19 497
在上面的代码中，.container是Flex容器，通过设置将其定义为Flex容器，并使用和属性将Flex项目在主轴和交叉轴上居中排布。.item是Flex项目，通过设置flex: 1;实现项目的灵活伸缩，并设置margin属性实现项目之间的间距。
【CSS】常用flex布局和grid布局
JackCao_Grass的博客
04-12 380
【CSS】常用flex布局和grid布局
CSS拓展——Flex布局和Grid网络布局
qq_52957637的博客
08-01 1027
CSS拓展——Flex布局和Grid网络布局
【前端知识之CSS】flex弹性布局和grid网格布局
weixin_44337386的博客
05-12 1991
本系列主要整理前端面试中需要掌握的知识点。本节介绍flex弹性布局和grid网格布局。
记录flex和grid布局的代码
03-25
在前端开发领域，布局设计是至关重要的，而Flex布局和Grid布局是现代Web设计中两种主要的布局方式。本文将深入探讨这两种布局模式，并通过代码示例帮助理解它们的工作原理和应用场景。 首先，Flex布局（Flexible ...
grid-flex:网格和弹性
04-19
总的来说，网格布局和弹性布局是现代前端开发中的必备技能，它们让开发者能够构建出更加灵活、适应各种屏幕尺寸的用户界面。理解和熟练运用这些技术，对于提升网站用户体验和提高开发效率都至关重要。
拥抱未来的CSS布局方式flex与grid布局
08-11
"拥抱未来的CSS布局方式flex与grid布局"这个主题将深入探讨两种主流的布局技术：Flexbox（弹性盒布局）和Grid Layout（网格布局），它们彻底改变了我们对网页布局的理解和实践。 **一、Flexbox布局** Flexbox，...
CSS Grid 网格布局教程.docx
03-30
CSS Grid 网格布局是现代网页设计中的一个重要工具，它提供了一种高效且灵活的方式来组织页面内容。相比传统的布局方式，如浮动和定位，CSS Grid 提供了二维的布局能力，可以轻松创建复杂的网格系统。 一、CSS Grid...
android 上下控制方向盘_Android学习——自定义简易的方向盘操作控件
weixin_28771365的博客
02-22 806
最近在做一款交互性较为复杂的APP，需要开发一个方向操作控件。最终用自定义控件做了一个简单的版本。 这里我准备了两张素材图，作为方向盘被点击和没被点击的背景图。下面看看自定义的Wheel类public class Wheel extends View implements View.OnTouchListener{int xPosition;//点击按钮的x坐标int yPosition;//点击...
Flex布局及Grid布局
obj_obj_baby的博客
07-06 4688
Flex与Grid布局
CSS的Grid布局与Flex布局
日常笔记/总结/系列知识梳理
11-09 1019
Grid布局是一种CSS布局模式，它使用一个二维的网格系统来定位元素。它允许您将容器分为行和列，然后将元素放置在特定的行和列中。Grid布局非常适合创建复杂的网页布局和对齐元素。 Flex布局是Flexible Box的缩写，称为弹性盒布局，是一种用于为盒状模型提供最大灵活性的布局方式。任何容器都可以被指定为Flex布局，而行内元素也可以使用Flex布局。
CSS 居然有比Flex更强大的布局？——Grid网格布局
张先生的前端日志
07-11 1461
Flex布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局，Grid 布局则是将容器划分成“行"和“列”，产生单元格，然后指定"项目所在”的单元格，可以看作是二维布局，Grid布局远比 Flex布局强大。...
Css布局之Flex布局和Grid布局
m0_74069684的博客
09-05 220
这里主要给大家总结一下推荐使用的两种布局流：弹性盒子布局流和网格布局流。
css【详解】grid布局—— 网格布局（栅格布局）
热门推荐
朝阳39的博客
04-11 4万+
目录 gird布局 和 flex布局的区别 Grid 布局的基本术语 网格布局的使用方法 启用网格布局display: grid 划分列grid-template-columns 绝对值 px 百分比值 % 比例值 fr auto值 minmax()函数值 repeat()函数值 划分行grid-template-rows 自动填充auto-fill 给网格线命名 [] 设置行/列的间距 指定区域 不属于任何区域的单元格，用.表示 多个单元格合并成一个区域 改...
CSS中的flex和grid布局
Peggy0829的博客
06-22 863
1.flex布局 flex布局：flex布局是弹性布局，用来为盒模型提供最大的灵活性。任何一个容器都可以指定为flex布局。但是，设置为flex布局后，子元素的float，clear，vertical-align属性都会失效。 我们对于采用flex布局的元素，称为容器，对于子元素，称为项目。 布局原理：通过给父盒子添加flex属性，来控制子盒子的位置和排列方式。 1. 1 一些常见的父项属性（容器） flex-direction：设置主轴方向 row：默认值，水平方向从左到右 column：侧轴，垂直
css布局 flex布局 grid网格布局 布局练习
好好学习天天向上
06-04 1858
flex是CSS3中新增的布局手段，它主要用来代替浮动来完成页面的布局。主轴：弹性元素的排列方式为主轴 侧轴：与主轴垂直方向为侧轴justify开头表示与主轴相关 align开头表示侧轴相关指定容器中弹性元素的排列方式，设置主轴方向 row 默认值，弹性元素在容器中水平排列 从左向右 row-reverse 默认值，弹性元素在容器中水平排列 从右向左 column 弹性元素纵向排列 自上向下 column-reverse 弹性元素纵向排列 自下向上 设置弹性元素是否在弹性容器中自动换行 nowrap:默认值
Flex 弹性布局、Grid网格布局和多列布局
06-06
Grid 网格布局是一种将网页划分为行和列的布局方式，可以实现复杂的网格布局效果。Grid 布局非常适合于大型网站和应用程序的布局，可以实现高度定制化和复杂性要求较高的布局效果。 多列布局是一种将内容按照列排列...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值