搜索
首页web前端css教程一文详解CSS3中的Flex布局

一文详解CSS3中的Flex布局

青灯夜游
青灯夜游
Nov 01, 2022 pm 07:29 PM
csscss3flex

本篇文章带大家了解一下CSS3中的Flex布局，希望对大家有所帮助！

一文详解CSS3中的Flex布局

简介

什么是Flex布局

Flex是Flexible Box 的缩写，也称为弹性盒子布局。
Flex布局组成：

  • flex容器（flex container）
  • flex项（flex items）
  • 主轴（main axis）
  • 交叉轴（cross axis）

Flex布局的作用

在flex布局未出现前，网页布局的方式为标准流，浮动，定位等。在解决比较复杂的问题相对麻烦。【学习视频分享：css视频教程、web前端】

而flex布局可以：

  • 自动弹性伸缩
  • 更轻松地设计灵活的响应式布局结构
  • 精确灵活控制块级盒子的布局方式
  • 在pc端和移动端都适用

Flex容器（父元素）属性

在使用flex布局之前首先定义 Flex 容器。

display:flex;

定义 Flex 容器后可以使用相应的属性， 改变子元素的布局方式，让子元素可以自动的挤压或拉伸。

相应属性：

1. justify-content  主轴元素对齐方式
2. align-items      交叉轴元素对齐方式
3. flex-direction   设置主轴方向
4. flex-wrap        主轴一行满了换行
5. align-content    交叉轴行对齐方式
6. flex-flow        同时设置 flex-direction和 flex-wrap属性

1. justify-content

容器的justify-content属性可以设置子元素在主轴方向的对齐方式。（记得先display:flex;定义容器）

justify-content: center;//居中对齐

image.png

justify-content: space-between;//间距在子元素之间

image.png

justify-content: space-evenly;//主轴方向所有地方的间距都相等

image.png

justify-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）

image.png
代码：

<!DOCTYPE html>
<html>


  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主轴对齐方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      .box {
        display: flex;


        /* justify-content: center; */
        /* justify-content: space-between; */
        /* justify-content: space-evenly; */
        justify-content: space-around;

        height: 200px;
        margin: auto;
        border: 1px solid #000;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>


  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>


</html>

2. align-items

容器的align-items属性可以设置子元素在交叉轴方向的对齐方式。

由此我们可以设置将容器属性justify-content和 align-items 设置为居中，让元素实现完美居中。

align-items: center;//居中

image.png

align-items: stretch;//拉伸,默认值(现有状态,这里测试去掉子级的高度)

image.png

align-items: flex-start;//将子元素在容器顶部对齐

image.png

align-items: flex-end;//将子元素在容器底部对齐

image.png
代码：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>交叉轴对齐方式</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }


      .father {
        display: flex;
        /* 居中 */
        /* align-items: center; */


        /* 拉伸,默认值(现有状态,测试的时候去掉子级的高度) */
        /* align-items: stretch; */


        /* align-items: flex-start; */
        align-items: flex-end;
        height: 300px;
        margin: auto;
        border: 1px solid #000;
      }

      .father div {
        /* 如果不设置宽，由内容撑开 */
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    </style>
  </head>


  <body>
    <div>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  </body>


</html>

3. flex-direction

容器的flex-direction属性可以改变flex布局的主轴方向。flex主轴方向默认为水平向右方向。如果修改主轴方向，那么交叉轴方向也会与之改变。

flex-direction: column;//主轴方向为垂直方向（从上到下）

image.png

flex-direction: column-reverse;//主轴方向为垂直方向（从下到上）

image.png

flex-direction: row;//主轴方向为水平方向（从左到右）

image.png

flex-direction: row-reverse;//主轴方向为水平方向（从右到左）

image.png
修改主轴方向后实现垂直居中：

display:flex;
flex-direction: column;
justify-content: center;

image.png

4. flex-wrap

当定义flex容器之后，如果子元素过多超出主轴方向宽度，容器内的子元素会自动伸缩。
如：

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7弹性盒子换行6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
      * {
        margin: 0;
        padding: 0;
      }


      .box {
        display: flex;
        height: 500px;
        border: 1px solid #000;
      }

      .box div {
        width: 100px;
        height: 100px;
        background-color: pink;
      }
    531ac245ce3e4fe3d50054a55f265927
  9c3bca370b5104690d9ef395f2c5f8d1


  6c04bd5ca3fcae76e30b72ad730ca86d
    dc6dce4a544fdca2df29d5ac0ea9906b
      dc6dce4a544fdca2df29d5ac0ea9906b116b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b216b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b316b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b416b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b516b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b616b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b716b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b816b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b916b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956


73a6ac4ed44ffec12cee46588e518a5e

image.png
解决：容器的flex-wrap属性可以让超出容器主轴方向的子元素换行显示。

flex-wrap: nowrap;//默认值，不换行
flex-wrap: wrap;//换行，从上到下

image.png

flex-wrap: wrap-reverse;//换行，从下到上

image.png

5. align-content

容器的align-content属性可以调节子元素行的对齐方式（需要先设置换行之后）。

align-content: center;//居中对齐
align-content: space-around;//间距加在子元素的两侧（中间大的是两个子元素的加在一起）
align-content: space-between;//间距在子元素之间

前三者的属性跟主轴对齐方式一样就不再赘述。

align-content: stretch;拉伸,默认值(现有状态,这里测试去掉子级的高度)

image.png

6.flex-flow

flex-flow属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性。

flex-flow: row wrap;

Flex项（子元素）属性

我们可以设置相应属性让flex 容器的直接子元素成为弹性（flex）项目。（在使用flex布局之前首先定义 Flex 容器。）

相应属性：

1. flex-grow
2. flex-shrink
3. flex-basis
4. flex
5. align-self
6. order

1. flex-grow

使用flex-grow属性来定义弹性盒子内部子元素的放大比例（当所有子元素宽度之和小于父元素的宽度时子元素如何分配父元素的剩余空间）。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        /* 没有设置宽度 */
        background:red;
        flex-grow: 1;
      }


      .box2{
        background:blue;
        flex-grow: 2;
      }


      .box3{
        background:orange;
        flex-grow: 1;
      }
    531ac245ce3e4fe3d50054a55f265927
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    dc6dce4a544fdca2df29d5ac0ea9906b
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

image.png

2. flex-shrink

使用flex-shrink属性来定义弹性盒子内部子元素的缩小比例（当所有子元素宽度之和大于父元素的宽度时子元素如何缩小自己的宽度）。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        width: 100px;
        background:red;
        flex-shrink: 1;
      }


      .box2{
        width: 100px;
        background:blue;
        flex-shrink: 2;
      }


      .box3{
        width: 100px;
        background:orange;
        flex-shrink: 1;
      }
    531ac245ce3e4fe3d50054a55f265927
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    dc6dce4a544fdca2df29d5ac0ea9906b
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

image.png

3. flex-basis

使用flex-basis属性来设置子元素的宽度，默认值为auto（作用跟width一样,优先级比width高，就算width在后面也会显示flex-basis）。

4. flex

使用flex属性来同时设置flex-grow、flex-shrink、flex-basis这3个属性，flex属性就是一个复合属性。
实际应用一般用复合属性。
语法：

flex: grow shrink basis;//顺序不能改变,默认值为0 1 auto;

5. align-self

使用align-self属性设置子元素项目的对齐方式。

注意：align-self属性会覆盖容器的 align-items 属性所设置的对齐方式。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
      .father{
        display:flex;
        width:200px;
        height:150px;
        align-items: center;
        border: 1px solid #000;
      }


      .box1{
        width: 100px;
        height: 50px;
        background:red;
        align-self: flex-start;
      }


      .box2{
        width: 100px;
        height: 50px;
        background:blue;
      }


      .box3{
        width: 100px;
        height: 50px;
        background:orange;
      }
    531ac245ce3e4fe3d50054a55f265927
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    dc6dce4a544fdca2df29d5ac0ea9906b
      dc6dce4a544fdca2df29d5ac0ea9906b116b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b216b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b316b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

image.png

6. order

使用order属性来定义子元素的排列顺序。

76c82f278ac045591c9159d381de2c57
100db36a723c770d327fc0aef2ce13b1
  93f0f5c25f18dab9d176bd4f6de5d30e
    a80eb7cbb6fff8b0ff70bae37074b813
    db71bb30709ba44a555bb4f052ca6598
    8f6d5a544bbc0d98e0f297ef053f784d
    b2386ffb911b14667cb8f0f91ea547a7Document6e916e0f7d1e588d4f442bf645aedb2f
    c9ccee2e6ea535a969eb3f532ad9fe89
      .father{
        display:flex;
        width:200px;
        height:150px;
      }


      .box1{
        width: 100px;
        background:red;
        order: 2;
      }


      .box2{
        width: 100px;
        background:blue;
        order: 1;
      }


      .box3{
        width: 100px;
        background:orange;
        order: 3;
      }
    531ac245ce3e4fe3d50054a55f265927
  9c3bca370b5104690d9ef395f2c5f8d1
  6c04bd5ca3fcae76e30b72ad730ca86d
    dc6dce4a544fdca2df29d5ac0ea9906b
      dc6dce4a544fdca2df29d5ac0ea9906b116b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b216b28748ea4df4d9c2150843fecfba68
      dc6dce4a544fdca2df29d5ac0ea9906b316b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
  36cc49f0c466276486e50c850b7e4956
73a6ac4ed44ffec12cee46588e518a5e

image.png

更多编程相关知识，请访问：编程视频！！

以上是一文详解CSS3中的Flex布局的详细内容。更多信息请关注PHP中文网其他相关文章！

声明
本文转载于：csdn。如有侵权，请联系admin@php.cn删除
相关文章
模拟鼠标运动模拟鼠标运动Apr 22, 2025 am 11:45 AM

如果您曾经在现场演讲或课程中必须显示一个互动动画，那么您可能知道它并不总是那么容易与您的幻灯片进行互动

通过Astro Action和Fuse.js为搜索提供动力通过Astro Action和Fuse.js为搜索提供动力Apr 22, 2025 am 11:41 AM

对于Astro，我们可以在构建过程中生成大部分网站，但是有一小部分服务器端代码可以使用Fuse.js之类的搜索功能来处理搜索功能。在此演示中，我们将使用保险丝搜索一组个人“书签”

未定义：第三个布尔值未定义：第三个布尔值Apr 22, 2025 am 11:38 AM

我想在我的一个项目中实现一条通知消息，类似于您在保存文档时在Google文档中看到的信息。换句话说，一个

捍卫三元声明捍卫三元声明Apr 22, 2025 am 11:25 AM

几个月前，我正在使用黑客新闻（就像一个人一样），并且遇到了一篇（现已删除的）文章，内容涉及不使用if语句。如果您是这个想法的新手（就像我

使用网络语音API进行多语言翻译使用网络语音API进行多语言翻译Apr 22, 2025 am 11:23 AM

自科幻小说以来，我们就幻想着与我们交谈的机器。今天这很普遍。即便如此，制造的技术

JetPack Gutenberg块JetPack Gutenberg块Apr 22, 2025 am 11:20 AM

我记得当古腾堡被释放到核心时，因为那天我在WordCamp我们。现在已经过去了几个月，所以我想我们越来越多的人

在VUE中创建可重复使用的分页组件在VUE中创建可重复使用的分页组件Apr 22, 2025 am 11:17 AM

大多数Web应用程序背后的想法是从数据库中获取数据，并以最佳方式将其呈现给用户。当我们处理数据时

使用'盒子阴影”和剪辑路径一起使用'盒子阴影”和剪辑路径一起Apr 22, 2025 am 11:13 AM

让我们对您可以做一些有意义的事情做一些逐步的情况，但是您仍然可以用CSS欺骗来完成它。在这个

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸！

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前ByDDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前ByDDD
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
1 个月前ByDDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前ByDDD
<🎜>：死铁路 - 如何完成所有挑战
3 周前ByDDD
显示更多

热工具

VSCode Windows 64位 下载

VSCode Windows 64位 下载

微软推出的免费、功能强大的一款IDE编辑器

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序，非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具，帮助Web开发人员更好地理解保护Web应用程序的过程，并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞，难度各不相同。请注意，该软件中

PhpStorm Mac 版本

PhpStorm Mac 版本

最新（2018.2.1 ）专业的PHP集成开发工具

SublimeText3 英文版

SublimeText3 英文版

推荐：为Win版本，支持代码提示！

Atom编辑器mac版下载

Atom编辑器mac版下载

最流行的的开源编辑器

显示更多

热门话题

gmail邮箱登陆入口在哪里
7644
15
CakePHP 教程
1392
52
steam的账户名称是什么格式
91
11
win11激活密钥永久
73
19
NYT连接提示和答案
34
152
显示更多