本站首页 收藏本站
广告位联系

APP正在开发中...
返回顶部
您的位置： 主页 > 网页 > css >

收藏
分享到

CSS3中使用flex和grid实现等高元素布局的代码

css 来源：互联网 作者：佚名 发布时间：2025-02-12 22:32:22 人浏览
摘要

一、简单的两列实现 1、先看页面效果 2、css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { padding: 10px; width: 100ch; margin: 0 auto; box-shadow: inset 0 0 0 2px #ccc; } .column { margin: 20px; background-color: #ccc

一、简单的两列实现

1、先看页面效果

2、css代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

.container {

  padding: 10px;

  width: 100ch;

  margin: 0 auto;

  box-shadow: inset 0 0 0 2px #ccc;

}

.column {

  margin: 20px;

  background-color: #ccc;

  padding: 10px;

}

.flexbox {

  display: flex;

}

.grid {

  display: grid;

  grid-auto-flow: column;

}

3、html代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

  <div class="container">flex布局</div>

<div class="container flexbox">

  <div class="column">

    <div class="element">

      <p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

    </div>

  </div>

  <div class="column">

    <div class="element">

      <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

    </div>

  </div>

</div>

<div class="container">grid布局</div>

<div class="container grid">

  <div class="column">

    <div class="element">

      <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

    </div>

  </div>

  <div class="column">

    <div class="element">

      <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

    </div>

  </div>

</div>

 二、每行放置3列，多出来的自动到下一行

1、还是先看页面效果

2、css代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

.container {

  padding: 10px;

  width: 100ch;

  margin: 0 auto;

  box-shadow: inset 0 0 0 2px #ccc;

}

.column {

  margin: 20px;

  background-color: #ccc;

  padding: 10px;

}

.flexbox {

  display: flex;

}

.flexbox.col-3 {

  flex-wrap: wrap;

}

.flexbox.col-3 .column {

  margin: 0.5rem;

  width: calc((100% / 3) - 1rem);

}

.grid {

  display: grid;

  grid-auto-flow: column;

}

.grid.col-3 {

  grid-gap: 1rem;

  grid-template-columns: repeat(3, 1fr);

  grid-auto-flow: unset;

}

.grid.col-3 .column {

  margin: 0;

}

3、html代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

<div class="container">flex布局</div>

  <div class="container flexbox col-3">

    <div class="column">

      <div class="element">

        <p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

  <div class="container">grid布局</div>

  <div class="container grid col-3">

    <div class="column">

      <div class="element">

        <p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

三、全部代码

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>使用flex和grid实现等高元素布局</title>

  <style>

    * {

      margin: 0;

      padding: 0;

      box-sizing: border-box;

    }

    .container {

      padding: 10px;

      width: 100ch;

      margin: 0 auto;

      box-shadow: inset 0 0 0 2px #ccc;

    }

    .column {

      margin: 20px;

      background-color: #ccc;

      padding: 10px;

    }

    .flexbox {

      display: flex;

    }

    .flexbox.col-3 {

      flex-wrap: wrap;

    }

    .flexbox.col-3 .column {

      margin: 0.5rem;

      width: calc((100% / 3) - 1rem);

    }

    .grid {

      display: grid;

      grid-auto-flow: column;

    }

    .grid.col-3 {

      grid-gap: 1rem;

      grid-template-columns: repeat(3, 1fr);

      grid-auto-flow: unset;

    }

    .grid.col-3 .column {

      margin: 0;

    }

  </style>

</head>

<body>

  <div class="container">flex布局</div>

  <div class="container flexbox">

    <div class="column">

      <div class="element">

        <p> 松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

  <div class="container">grid布局</div>

  <div class="container grid">

    <div class="column">

      <div class="element">

        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

  <div class="container">flex布局</div>

  <div class="container flexbox col-3">

    <div class="column">

      <div class="element">

        <p>flexbox col-3: 甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

  <div class="container">grid布局</div>

  <div class="container grid col-3">

    <div class="column">

      <div class="element">

        <p>grid col-3:甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>松饼冰淇淋小熊软糖。甜苹果派，蛋糕，糖果，胡萝卜蛋糕。糖蛋奶酥，柠檬糖软糖。</p>

      </div>

    </div>

    <div class="column">

      <div class="element">

        <p>蛋奶酥馅饼，柠檬糖，小熊软糖，棒棒糖，甜点，芝麻饼干。提拉米苏粉布丁。蛋糕芝士蛋糕糕点焦糖提拉米苏。</p>

      </div>

    </div>

  </div>

</body>

</html>

版权声明 : 本文内容来源于互联网或用户自行发布贡献，该文观点仅代表原作者本人。本站仅提供信息存储空间服务和不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权， 违法违规的内容， 请发送邮件至2530232025#qq.cn(#换@)举报，一经查实，本站将立刻删除。

您可能感兴趣的文章 :

原文链接 :
相关文章

  • css渐变色背景gradient的介绍

    css渐变色背景gradient的介绍
    使用渐变色作为背景 可以直接将渐变色用作元素的背景，可以看做是一种特殊的背景图片。（是作为背景background一个属性值不是背景颜色

  • CSS3中使用flex和grid实现等高元素布局的代码

    CSS3中使用flex和grid实现等高元素布局的代码
    一、简单的两列实现 1、先看页面效果 2、css代码 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 .container { padding: 10px; width: 100ch; margin: 0 auto; box-shadow: i

  • css grid网格布局(栅格布局)的代码

    css grid网格布局(栅格布局)的代码
    CSS中gap并不是新的属性，在CSS3新特性中多列布局为其添加了一个新能力。间隙属性除了运用在CSS栅格之外，CSS3新特性中弹性布局同样可以使

  • css实现图片旋转功能的代码

    css实现图片旋转功能的代码
    一 css实现图片旋转90度 1 2 3 4 .icon{ -moz-transform:rotate(-90deg); -webkit-transform:rotate(-90deg); } 二 水平翻转 1 2 3 4 5 6 7 8 9 .icon { color: #f64e78; font-size
  • CSS自定义浏览器滚动条样式的代码
    CSS自定义浏览器滚动条样式指南 在现代网页设计中，细节决定成败。滚动条作为用户与页面交互的重要组成部分，其样式往往被忽视。本文
  • CSS background-size属性介绍
    background-size是 CSS 中一个非常重要的属性，用于控制元素背景图片的尺寸。通过设置background-size，开发者可以根据布局需求，灵活地调整背景
  • CSS border边框的全面指南介绍
    CSS 是前端开发中不可或缺的工具，而border属性则是控制元素边框的核心之一。通过灵活使用border，开发者可以为网页布局带来丰富的视觉效
  • CSS中隐藏滚动条的同时保留滚动功能
    在CSS中，我们可以通过一些技巧来隐藏滚动条，同时保留滚动功能。以下是几种常用的方法和具体的实现步骤。 1. 使用overflow和::-webkit-scr

  • CSS布局技巧实现元素左右排列的方法

    CSS布局技巧实现元素左右排列的方法
    开发中经常会遇到一个场景，使用 CSS 实现一个子元素靠右，其余子元素靠左。 这里总结一下常见的实现方式。 1. flex 布局 flexbox 是一种常

  • CSS给div一个带有圆角的渐变边框效果

    CSS给div一个带有圆角的渐变边框效果
    单纯的设置border-radius，是不行的，这样设置完以后渐变色边框虽然会显示,但是圆角不能出来，解决方法如下 1.先看效果 2.这是个带有渐变效
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计