保姆级flex弹性布局教程

最新推荐文章于 2024-04-30 16:57:21 发布
最新推荐文章于 2024-04-30 16:57:21 发布
阅读量592 收藏 1
点赞数 1
文章标签： javascript 前端 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Dpxuaobao/article/details/131810312
版权

目录

入门

  1. flex 是什么？
    . flex 是 Flexible Box 的缩写，就是弹性盒子布局的意思
  2. flex优点?
    .Flex布局非常灵活，可以在任何容器中使用。可以轻松扩展和修改。
    .Flex布局具有响应式设计，因此可以在不同的屏幕尺寸和设备上使用。
    .Flex布局非常简单易用，几乎没有学习曲线。
    .Flex布局支持动画效果，可以轻松实现各种动画效果。
    .Flex布局非常高效，可以快速实现复杂的布局和UI设计。
    主要就是根据下面两个轴来进行操作布局
    请添加图片描述

代码使用

justify-content - main轴-水平布局

正常我们写多个块元素时会造成自动换行
例如：
请添加图片描述

左对齐

当我们需要元素水平排列是只需在样式中添加 display: flex; 即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 600px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

右对齐

上面的是flex默认的左对齐，如果需要右对齐就需要再新增一个样式 justify-content: flex-end;
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 右对齐 */
            justify-content: flex-end;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

水平居中

水平居中只需将其更改为 justify-content: center;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平居中 */
            justify-content: center;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：请添加图片描述

两端对齐

两端对齐则需更改为 justify-content: space-between;
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 两端对齐 */
            justify-content: space-between;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

两端对齐中间距离为两倍

如果需要 两端对齐，中间的距离是两端和容器距离的2倍则需将其更改为 justify-content: space-around; 即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 两端对齐，中间的距离是两端和容器距离的2倍。 */
            justify-content: space-around;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

两端对齐距离相等

如果需要两端对齐，中间距和容器两端的距离相等则将其改为 justify-content: space-evenly;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 两端对齐，中间距和容器两端的距离相等。 */
            justify-content: space-evenly;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：请添加图片描述

align-items - cross轴-垂直布局

垂直居中

需要垂直方向居中则需要增加 align-items: center;
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 垂直居中 */
            align-items: center;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

底部对齐

需要cross轴底部对齐时需要更改 align-items: flex-end;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* cross轴底部对齐 */
            align-items: flex-end;
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：请添加图片描述

水平垂直居中

需要水平垂直居中时添加 justify-content: center; align-items: center;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            align-items: center;       /*  垂直居中 */
            
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

flex-direction - 项目方向

水平反序排列

水平方向反序排列只需增加 flex-direction: row-reverse;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            /* 水平方向，反序排列 */
            flex-direction: row-reverse;
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

垂直正序排列

垂直方向正序排列只需修改 flex-direction: column;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            /* 垂直方向，正序排列 */
            flex-direction: column;
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

垂直反序排列

垂直方向反序排列只需修改 flex-direction: column-reverse;即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            /* 垂直方向，反序排列 */
            flex-direction: column-reverse;
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

flex-wrap - 换行、换列

nowrap 默认值，不换行、换列。
当flex项目的总宽度超过容器的宽度，flex项目将按照原有比例强行等分，且不换行。
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            align-items: center;       /* 垂直居中 */
			/* 默认不换行 */
            flex-wrap: nowrap;
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="width: 500px;">第一个子元素</div>
        <div style="width: 500px;">第二个子元素</div>
        <div style="width: 600px;">第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

自动换行换列

换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器只需将其修改为 flex-wrap: wrap; 即可
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>flex弹性布局</title>
    <style>
         .box{
            width: 100%;
            height: 300px;
            border: 1px solid blue;
            /* flex默认水平布局 */
            display: flex;
            /* 水平、垂直居中对齐 */
            justify-content: center;   /*  水平居中 */
            align-items: center;       /* 垂直居中 */
            /* 自动换行 */
            flex-wrap: wrap;
        }
        .box>div{
            margin-top: 10px;
            border: 1px solid red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="width: 500px;">第一个子元素</div>
        <div style="width: 500px;">第二个子元素</div>
        <div style="width: 600px;">第三个子元素</div>
    </div>
</body>
</html>

效果：
请添加图片描述

这就是简单的基础flex弹性布局啦！！

bug 886
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
保姆级搭建rancher教程
09-06
看着手册能自己搭建出来，保姆级教程，我自己一步一步写的，看完还不会的只能说你不适合运维，咱换行吧。你可以尝试去搞搞开发，开发写写代码就行。
flex弹性盒子布局（详细）
互联网小队
09-30 7421
弹性盒模型 1、伸缩容器display Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称”容器”。它的所有子元素 自动成为容器成员，称为 Flex 项目（flex item），简称”项目”。 容器默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）。 主轴的开 始位置（与边框的交叉点）叫做 m
Flex布局 （上万字）超详细讲解 这篇就够了
程序员碎像的博客
02-12 5442
Flex布局，全称为“Flexible Box Layout”，意为“弹性盒布局”。它是一种现代的CSS布局模式，旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间，即使它们的大小未知或动态变化。灵活性：Flex布局允许项目在容器中灵活地扩展和收缩，以填充可用空间或调整大小以适应内容。对齐方式：Flex布局提供了各种对齐选项，可以轻松地实现水平和垂直对齐。方向控制：可以方便地改变主轴的方向，使项目在水平或垂直方向上排列。空间分配。
弹性盒子（display: flex）布局超全讲解|Flex 布局教程
热门推荐
肥晨开发的学习之路
06-16 9万+
弹性布局（Flex布局）是一种现代的CSS布局方式，通过使用display: flex属性来创建一个弹性容器，并在其中使用灵活的盒子模型来进行元素的排列和定位。
超详细的flex弹性布局+实例分析
xw1193195009的博客
04-11 9050
1.基本概念 什么是flex？ flex全称是FlexibleBox，即弹性盒子，用来进行弹性布局，弹性布局也是目前前端应用最广的布局之一。 flex布局的优点，为什么要用flex布局？ 1.可以为盒子模型提供最大的灵活性，任何一个容器都可以指定为flex布局。 2.更加符合响应式设计的特点，方便页面在不同设备上的布局显示。 主要概念介绍 main axis：主轴，如果内部元素是横向排列的，那么此时x轴是主轴，如果内部元素是纵向排列的，则主轴为y轴。 cross axis：交叉轴，与主轴垂直的轴
flex弹性布局（详解）
wshwsh_的博客
08-09 8717
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。CSS3 弹性盒（ Flexible Box 或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。
flex弹性盒子布局
weixin_45249263的博客
02-13 1万+
flex是flexible box 的缩写，即为“弹性布局”，用来为盒子模型提供最大的灵活性，任何容器都可以指定为flex布局；
flex布局超级详细的完整教程(看完印象深刻)
idiot_MAN的博客
07-07 7196
flex布局超级详细教程 flex布局父项常见属性 、flex-direction:设置主轴的方向 、justify-content:主轴上的子元素排列方式3.flex-wrap:子元素是否换行 .align-content:侧轴上的子元素的排列方式(多行). align-items:侧轴上的子元素的排列方式(单行).flex-flow flex布局子项常见属性.flex属性 .align-self控制子项自己在侧轴的排列方式.order属性定义子项的排列顺序 flex-group子项目延伸比率 .....
【CSS】flex布局用法解析，快速上手flex布局，flex:1是什么意思？肯定看的懂好吧？
余浩的博客
12-24 5061
flex-wrap属性定义，如果一条轴线排不下，如何换行。nowrap（默认）：不换行。wrap：换行，第一行在上方。（常用此项）wrap-reverse：换行，第一行在下方。flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap// 主轴水平向右，并且元素自动换行。
只需5分钟！一文读懂CSS布局（二） -- flex布局
小丞同学
05-25 4215
一文读懂CSS布局（二） – flex布局 在我们上一篇CSS布局文章中详细的讲解了grid布局，这篇文章就带大家来学习一下flex布局！ 全文思维导图，建议收藏！
Flex布局
01-12 201
Flex布局flex布局是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局，包括行内元素，例如： .box{ display: inline-flex;}Webkit 内核的浏览器，必须加上-webkit前缀。.box{ display: -webkit-flex; /* Safari */ displ...
Windows搭建yolov5史诗保姆级教程
03-22
这个资源将为您提供在...无论您是初学者还是有一定经验的开发人员，本教程都将以保姆级的方式引导您完成整个过程。跟随本教程，您将轻松掌握在Windows平台上搭建Yolov5模型的技能，为您的目标检测项目提供强大支持。
中视频项目保姆级实战教程-视频教程网盘链接提取码下载 .txt
05-22
十节视频课，主要讲内容制作和账号运营：包括选题、素材、文案、配音、剪辑以及运营维护的一些实战经验和实操演示。我讲的都是我们自己做出结果的，适合大家去模仿复制的实战玩法。通过这十节课，你能快速掌握中视频...
2023闲鱼无货源超详细保姆级教程-视频教程网盘链接提取码下载.txt
12-18
本课程将深入探讨2023年闲鱼无货源情况，为您提供超详细的解决方案。我们将详细介绍如何寻找替代货源、建立稳定的供应链以及利用社交媒体拓展...这是一份保姆级的教程，确保您能迅速适应并获得成功。 视频大小：772M
pytorch保姆级安装教程
09-13
安装pytorch保姆级教程
vue快速入门（四十六）Router的安装与使用
不起眼小菜菜的博客
04-26 658
步骤很详细，直接上教程……
报表控件Stimulsoft在JavaScript报告工具中的事件：查看器事件（上）
励志做最业余的专业博主，控件产品可以私我~
04-28 769
在本文中，我们为JS报告工具中的查看器事件提供了全面的指南，包括它们的详细描述、参数列表等一系列详细内容。
bpmn-js推荐几款常用的插件
最新发布
飞云先生
04-30 40
bpmn-js整体框架库的风格是以组件的方式进行实现的，这样的结构也更加便于我们更好的对其进行功能扩展，以及客制化功能实现。其实bpmn.io已经为我们实现了较多场景的组件的实现，了解对应组件的功能更能便于我们区分是否需要自己实现，降低重复造轮子的行为，提高开发效率，本篇文章主要是介绍常见的bpmn-js中使用的组件库。
用Typescript写自动化工作流
联蔚盘云的博客
04-29 911
acao 的命令还有一些其他用法，比如指定执行某个 job 或者忽略依赖 通过命令行参数的方式注入等等，详细使用方式可以查看文档这个项目最近也在持续更新中，后续也会支持更多的预设，web ui 的操作方式也在计划中小伙伴想参与预设的开发也欢迎 pr 呀。
ubuntu20.04安装教程保姆级教程
09-10
安装Ubuntu 20.04系统的保姆级教程如下所示： 准备工作： 1. 下载Ubuntu 20.04系统镜像文件。 2. 制作系统启动盘，可以使用Rufus工具来制作，按照其使用教程进行操作。 开始安装： 1. 确保你有一个500GB大小的固态...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值