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

APP正在开发中...
返回顶部
您的位置： 主页 > 网络编程 > CSS/HTML >

收藏
分享到

flex(弹性布局)教程之常用布局介绍

CSS/HTML 来源：互联网 作者：佚名 发布时间：2022-09-11 21:01:44 人浏览
摘要

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。 一、

2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

一、Flex 布局是什么？

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

任何一个容器都可以指定为 Flex 布局。

1

2

3

.box{

  display: flex;

}

行内元素也可以使用 Flex 布局。

1

2

3

.box{

  display: inline-flex;

}

Webkit 内核的浏览器，必须加上-webkit前缀。

1

2

3

4

.box{

  display: -webkit-flex; /* Safari */

  display: flex;

}

注意，设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效。

二、常用布局

公共样式：

1

2

3

4

5

6

7

8

9

10

    <style>

        * {

            margin: 0;

            padding: 0;

        }

 

        .has-flex {

            display: flex;

        }

    </style>

 垂直居中 子元素左右分布

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

        .father-one {

            width: 100%;

            height: 200px;

            background-color: #fffcef;

            align-items: center; /*纵轴）方向上的对齐方式。*/

            justify-content: space-between; /* 均匀排列每个元素 首个元素放置于起点，末尾元素放置于终点,中间元素的中间间隔相等 */

            justify-content: space-around; /* 均匀排列每个元素 每个元素周围分配相同的空间 */

            justify-content: space-evenly; /* 均匀排列每个元素   每个元素之间的间隔相等 */

        }

 

        .fa-one-child1 {

            height: 30px;

            width: 30px;

            background-color: #a6acde;

        }

 

        .fa-one-child2 {

            height: 40px;

            width: 40px;

            background-color: #e4b9f0;

        }

 

        .fa-one-child3 {

            height: 50px;

            width: 50px;

            background-color: #f3b009;

        }

 

        .fa-one-child4 {

            height: 60px;

            width: 60px;

            background-color: #f77c4f;

        }

html

1

2

3

4

5

6

7

8

9

<!--垂直居中 子元素左右分布 star-->

<h3>垂直居中 子元素左右分布</h3>

<div class="father-one has-flex">

    <div class="fa-one-child1"></div>

    <div class="fa-one-child2"></div>

    <div class="fa-one-child3"></div>

    <div class="fa-one-child4"></div>

</div>

<!--垂直居中 子元素左右分布 end-->

水平垂直居中

css

1

2

3

4

5

6

7

8

9

10

11

12

13

        .father-two {

            width: 100%;

            height: 200px;

            align-items: center; /*纵轴）方向上的对齐方式。*/

            justify-content: center; /*    横轴）方向上的对齐方式*/

            background-color: red;

        }

 

        .child {

            width: 50%;

            height: 60px;

            background-color: rosybrown;

        }

html

1

2

3

4

5

6

<!--水平垂直居中 star-->

<h3>水平垂直居中</h3>

<div class="father-two has-flex">

    <div class="child"></div>

</div>

<!--水平垂直居中 end-->

水平垂直居中 图标在上文字在下

css

1

2

3

4

5

6

7

        .father-three {

            height: 80px;

            background-color: #f77c4f;

            align-items: center;

            justify-content: center;

            flex-direction: column;

        }

html

1

2

3

4

5

6

7

<!--水平垂直居中 图标在上文字在下 star-->

<h3>水平垂直居中 图标在上文字在下</h3>

<div class="has-flex father-three">

    <i class="fa fa-file-text-o" aria-hidden="true"></i>

    <p>测试</p>

</div>

<!--水平垂直居中 图标在上文字在下 end-->

子元素平分父元素,且自适应等高

 css

1

2

3

4

5

6

7

8

9

10

        .father-four {

            background-color: #ffd5eb;

        }

 

        .fa-four-child {

            flex: 1;

            text-align: center;

            background-color: #ffffff;

            border: 1px solid;

        }

html

1

2

3

4

5

6

7

8

9

<!--子元素平分父元素,且自适应等高   star-->

<h3>子元素平分父元素,且自适应等高 </h3>

<div class="has-flex father-four">

    <div class="fa-four-child">第一个</div>

    <div class="fa-four-child">第二个</div>

    <div class="fa-four-child">第三个</div>

    <div class="fa-four-child" style="height: 90px">第四个</div>

</div>

<!--子元素平分父元素,且自适应等高  end-->

 子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行

css

1

2

3

4

5

6

7

8

9

10

11

        .father-five {

            height: 100px;

            background-color: #a6acde;

            justify-content: space-between;

            flex-wrap: wrap;

        }

 

        .fa-five-child {

            width: 21%;

            background-color: #f77c4f;

        }

html

1

2

3

4

5

6

7

8

9

10

11

12

13

<!--子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行   star-->

<h3>子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行 </h3>

<div class="has-flex father-five">

    <div class="fa-five-child">第一个</div>

    <div class="fa-five-child">第二个</div>

    <div class="fa-five-child">第三个</div>

    <div class="fa-five-child">第四个</div>

    <div class="fa-five-child">第五个</div>

    <div class="fa-five-child">第六个</div>

    <div class="fa-five-child">第七个</div>

    <div class="fa-five-child">第八个</div>

</div>

<!--子元素平分父元素,两边对齐中间自适应相同宽度间隔，且自动换行  end-->

 三栏布局,两边固定宽中间自适应

css

1

2

3

4

5

6

7

8

9

10

11

12

13

14

        .father-six {

            height: 100px;

        }

 

        .one-child,

        .three-child {

            width: 300px;

            background-color: #a6acde;

        }

 

        .two-child {

            flex: 1;

            background-color: #eeeeee;

        }

html

1

2

3

4

5

6

7

8

<!--三栏布局,两边固定宽中间自适应   star-->

<h3>三栏布局,两边固定宽中间自适应 </h3>

<div class="has-flex father-six">

    <div class="fa-six-child one-child">第一个</div>

    <div class="fa-six-child two-child">第二个</div>

    <div class="fa-six-child three-child">第三个</div>

</div>

<!--三栏布局,两边固定宽中间自适应  end-->

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

您可能感兴趣的文章 :

原文链接 : https://www.cnblogs.com/yingzi1028/archive/2022/09/06/16662838.html
相关文章
  • flex布局下两端对齐，不满左对齐
    弹性布局多列换行居左布局 解决方案一 问题情境： 在flex布局下，多行排列，如何让flex布局最后一行没有排满时，向左对齐排列且与上面的
  • flex(弹性布局)教程之常用布局介绍
    2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味

  • HTML常用标签超详细整理

    HTML常用标签超详细整理
    HTML概述 1.1 什么是HTML HTML是做网站的、Web开发、互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发，还支持

  • CSS将div内容垂直居中的介绍

    CSS将div内容垂直居中的介绍
    一、行高（line-height）法 如果要垂直居中的只有一行或几个文字，那它的制作最为简单，只要让文字的行高和容器的高度相同即可，比如：
  • 详解CSS基础知识和样式
    什么是CSS CSS(Cascading Style Sheet):层叠样式表语言。 CSS的作用是： 修饰HTML页面，设置HTML页面中的某些元素的样式，让HTML页面更好看。 在HTM

  • CSS不受控制的position fixed的介绍

    CSS不受控制的position fixed的介绍
    失效的 position:fixed 在许多情况下，position:fixed将会失效。MDN用一句话概括了这种情况： 当元素祖先的 transform 属性非 none 时，定位容器由视

  • CSS故障艺术的介绍

    CSS故障艺术的介绍
    概述 本文的主题是 Glitch Art，故障艺术。 什么是故障艺术？我们熟知的抖音的 LOGO 正是故障艺术其中一种表现形式。它有一种魔幻的感觉，

  • CSS不规则边框的生成方案的介绍

    CSS不规则边框的生成方案的介绍
    需求背景，给不规则图形添加边框 在我们日常开发中，时长会遇到一些非矩形、非圆形的图案。类似下面这些： 使用纯 CSS，搭配一些技巧

  • CSS玩转图片Base64编码的介绍

    CSS玩转图片Base64编码的介绍
    什么是 base64 编码? 我不是来讲概念的，直接切入正题，图片的 base64 编码就是可以将一副图片数据编码成一串字符串，使用该字符串代替图

  • 不要在HTML中滥用div

    不要在HTML中滥用div
    概述 做前端开发的同学都知道，一个网页的基本组成部分是 HTML，JavaScript 和 CSS。开发人员通常更关注 JavaScript 和 CSS ，实践着各种语言规范
推荐阅读
最新更新
友情链接
  • 本站所有内容来源于互联网或用户自行发布，本站仅提供信息存储空间服务，不拥有版权，不承担法律责任。如有侵犯您的权益，请您联系站长处理！
  • Copyright © 2017-2022 F11.CN All Rights Reserved. F11站长开发者网 版权所有 | 苏ICP备2022031554号-1 | 51LA统计