程序员经验分享-hwhale

教你快速上手Flex弹性盒布局（容器属性）

2023-11-03

简介

  • Flex弹性布局
    • CSS3弹性盒（Flexilble Box或flexbox）是一种布局方式，常用与当页面需要适应不同的屏幕大小以及设备类型是能够确保元素拥有恰当的行为
  • 作用
    • 能够更加高效方便地控制元素的对齐，排列
    • 无论元素的尺寸是固定高度的还是动态的，都可以自动计算布局内元素的尺寸
    • 控制元素在页面内的布局方向
    • 按照不同的DOM所指定排序方式对屏幕上的元素重新排列
  • 好处
    • 可以让子元素排列在一行
    • 使子元素的高度一致

一，Flex布局语法

1.1，display: flex
  • 创建一个html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>
  • 这是一个没有任何描述的样子
  • 原来想要移动内容都需要浮动，现在我们在盒子里添加display: flex属性
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>
  • 现在添加display: flex内容自动浮动，但是我们没有做float浮动，也没有做边框塌陷处理
    在这里插入图片描述
  • display: flex属性写的有两个地方：
    第一个父写在容器
    第二个是子元素里

结论
就这一行就能让子元素并列排在一行，并且元素高度一样！！！

二，Flex属性

  • 容器属性
    • 设置给父元素的属性
  • 项目属性
    • 设置给子元素的属性

三，容器属性

容器属性 说明
flex-direction 决定主轴的方向（即项目的排列方向）
flex-wrap 定义如果在一条轴线排不下，如何换行
flex-flow 复合属性：是flex-direction和flex-wrap属性的简写形式
justify-content 定义项目在主轴上的对齐方式
align-items 定义项目在纵轴上的对齐方式
align-content 定义多根轴线的对齐方式
3.1，flex-direction
  • 决定主轴的方向（即项目的排列方向）
    • row：横向从左到右排列（左对齐），默认的排列方式
    • row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
    • column：纵向排列
    • column-reverse：反转纵向排列，从后王前排，最后一项排在上面
3.2，flex-direction：row；
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

横向从左到右排列（左对齐），默认的排列方式
在这里插入图片描述

3.3，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row-reverse;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

row-reverse：反转横向排列（右对齐），从后往前排，最后一项排在最前面
在这里插入图片描述

3.4，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

纵向排列
在这里插入图片描述

3.5，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column-reverse;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

反转纵向排列，从后王前排，最后一项排在上面
在这里插入图片描述

四，justify-content -main-轴-水平布局

使用这个之前要先把flex-direction：row调成默认

4.1，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            justify-content:center;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

flex项目水平居中

在这里插入图片描述

4.2，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            justify-content:flex-end;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

flex项目靠右对齐

在这里插入图片描述

4.3，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            justify-content:space-between;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

flex项目两端对齐

在这里插入图片描述

4.4，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            justify-content: space-around;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

flex项目两端对齐，项目间的距离是两端和容器距离的2倍。
在这里插入图片描述

4.5，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            justify-content: space-evenly;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

flex项目两端对齐，项目间距和容器两端的距离相等。
在这里插入图片描述

五，align-items - cross轴-垂直布局

  • 设置弹性盒子元素在侧轴（纵轴）方向上的对齐方式
    • stretch：默认值，如果项目未设置高度过auto，子元素会被拉伸以适应容器
    • flex-start：元素位于容器开头
    • flex-end：元素位于容器结尾
    • center：元素位于容器中心
    • baseline：元素位于容器的基线上
      使用这个之前要先把flex-direction:column调成纵向
5.1，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
            align-items:center;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

垂直方向居中
在这里插入图片描述

5.2，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:column;
            align-items:flex-end;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div>第一个子元素</div>
        <div>第二个子元素</div>
        <div>第三个子元素</div>
    </div>
</body>
</html>

cross轴底部对齐
在这里插入图片描述

5.3，align-items:flex-end;

使用这个之前要先把flex-direction：row调成默认
然后再div里加上高度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:flex-end;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

默认值，如果项目未设置高度过auto，子元素会被拉伸以适应容器
在这里插入图片描述

5.4，align-items:flex-start;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:flex-start;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器开头
在这里插入图片描述

5.5，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:center;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器中心
在这里插入图片描述

5.6，align-items:baseline;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:baseline;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px;">第一个子元素</div>
        <div style="height: 200px;">第二个子元素</div>
        <div style="height: 300px;">第三个子元素</div>
    </div>
</body>
</html>

元素位于容器的基线上
在这里插入图片描述

六，flex-wrap - 换行、换列

6.1，align-items:stretch;;

注意
在div加上宽度

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

在这里插入图片描述

6.2，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
            flex-wrap: nowrap;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

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

在这里插入图片描述

6.3，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>Document</title>
    <style>
        .box{
            width: 100%;
            height: 600px;
            border: 1px solid black;
            display: flex;
            flex-direction:row;
            align-items:stretch;
            flex-wrap: wrap;
        
        }
        .box>div{
            border: 1px solid black;
        }
    </style>
</head>
<body>
    <div class="box">
        <div style="height: 100px; width: 40%;">第一个子元素</div>
        <div style="height: 200px; width: 40%;">第二个子元素</div>
        <div style="height: 300px; width: 40%;">第三个子元素</div>
    </div>
</body>
</html>

换行、换列。当flex项目的总宽度超过容器的宽度，将自然换行、换列。且每一行（列）等分容器。
在这里插入图片描述

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

Flex布局

css

CSS3

javascript

html

教你快速上手Flex弹性盒布局（容器属性） 的相关文章

随机推荐

  • js逆向解析，js爬虫

    废话不多说 直接开干 吸取了百度精华 来写文章了 难度系数 两颗星 大概逻辑 1 请求url 2 找到请求参数 3 分析参数产生过程 4 整合参数 1 请求url http fanyi youdao com 2 找到请求参数 3 分析参数产

  • SQL中的循环、for循环、游标

    SQL中的循环 for循环 游标 1 利用游标循环更新 删除MemberAccount表中的数据 DECLARE My Cursor CURSOR 定义游标 FOR SELECT FROM dbo MemberAccount 查出需要的集合

  • K8S的概念和基本应用

    学习视频 Kubernetes基本概念和应用 哔哩哔哩 bilibili 零 架构概览 master节点 管理调度集群资源 一般为多节点构成 可以是物理机 也可以是虚拟机 worker节点 资源的提供者 一般为多节点构成 可以是物理机 也可

  • 在vue项目当中实现对某个数据的复制vue-clipboard2

    在vue项目当中实现对某个数据的复制 运用插件是十分方便快捷的vue clipboard2 安装 npm install save vue clipboard2 main js import Vue from vue import VueC

  • 推荐-社交推荐相关

    总结 近时间矩阵分解 社交信息的融合模型 2018 模型性能 不同社交推荐方法在不同数据集中不同用户社交强度下的性能对比 研究难点与热点 数据稀疏性 社交关系的有效挖掘 社交噪声 可解释性社交推荐 可扩展型社交推荐模型与多源信息的融合 社交

  • Linux 面试常见（55题）

    TOC删除线格式 一 文件管理 目录操作 创建目录 mkdir mkdir命令可以创建一个新的目录 例如 在当前目录下创建一个名为 test 的目录 mkdir test 2 删除目录 rmdir rmdir命令可以删除一个空目录 例如 要

  • 结构体输入输出（c语言）

    include

  • 实现Echarts词云和随机颜色(vue2)

    1 首先需要安装echarts和echarts wordcloud插件 2 echarts的版本和echarts wordcloud版本有对应要求才能实现 否则会报错 经过查询如果是用的是echarts4那么需要对应着echarts wor

  • python自动化课程笔记（十一）封装、继承、多态

    class Dog object good dog 说明文档 def init self new name color age 5 self name new name self color color self age age def s

  • Tomcat安装及部署

    Aphorism 安装 忽略下载过程 1 解压文件 把 tomcat 安装包解压到 D Program Files 下 2 启动 tomcat 在 tomcat 文件包的 bin 文件夹中 双击 startup bat 文件启动tomcat

  • 给定一个链表，删除链表的倒数第 n 个节点，并且返回链表的头结点。(C++实现）

    题目介绍 给定一个链表 删除链表的倒数第 n 个节点 并且返回链表的头结点 示例 给定一个链表 1 gt 2 gt 3 gt 4 gt 5 和 n 2 当删除了倒数第二个节点后 链表变为 1 gt 2 gt 3 gt 5 说明 给定的 n

  • Oil Deposits

    http poj org problem id 1562 Oil Deposits Description The GeoSurvComp geologic survey company is responsible for detecti

  • 10个超炫超有用的js库/插件

    原文地址 http blog csdn net shyy123 article details 7471782 1 CodeMirror CodeMirror 是一款 Online Source Editor 基于 Javascript 短

  • MyEclipse集成PMD代码检测插件自定义规则配置文件

    把我今天最新更新的MyEclipse2014集成PMD代码检测插件自定义规则配置文件JAVA版发布出来吧 方便自己以后回顾的同时 也看看能不能帮到有这方面需求的小伙伴们 文件名 cplatform pmd5 2 3 rules xml

  • Android.bp文件简介

    Android bp Android bp的出现就是为了替换Android mk文件 bp跟mk文件不同 它是纯粹的配置 没有分支 循环等流程控制 不能做算数逻辑运算 如果需要控制逻辑 那么只能通过Go语言编写 语法 根据设计 Androi

  • 为什么opencv用GPU实现比用CPU实现的慢？

    问题 打算通过OpenCV的GPU模块优化现有代码的运行效率 怀抱着美好愿望开始了代码的改写工作 改写的过程并不顺利 遇到了不少问题 例如 gpu模块提供的接口非常坑爹 相当一部分不支持浮点类型 像histogram integral这类常

  • SpringCloud实践（四） 通过Feign组件实现消费者

    在前面使用了RestTemplate和Ribbon来实现了服务消费者 Feign 是一个集成了Ribbon和Eureka的组件 通过声明的方式 就可以实现Http客户端 简化了http客户端 服务消费者 对于Feign 我们只要记得两个特点

  • Aspose工具实现word和ppt转pdf功能及遇到的一些问题

    Aspose工具包从word和ppt转到pdf的实现过程 直接放项目地址 说一下实现过程中遇到的坑 直接放项目地址 https github com lichangliu1098 File2Pdf 说一下实现过程中遇到的坑 jar包的引入

  • Zabbix部署详细步骤

    以下是在Ubuntu上安装Zabbix的详细步骤 1 更新系统 使用以下命令更新Ubuntu系统 sudo apt get update sudo apt get upgrade 2 安装依赖项 在安装Zabbix之前 需要先安装一些依赖项

  • 教你快速上手Flex弹性盒布局（容器属性）

    目录 简介 一 Flex布局语法 1 1 display flex 二 Flex属性 三 容器属性 3 1 flex direction 3 2 flex direction row 3 3 flex direction row rever

热门标签