CSS:弹性盒子Flexible Box布局

CSS:Flexible Box弹性盒子布局

一、flex布局原理

​ flex是flexible Box的缩写,意为 ”弹性布局“，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。

  • 当我们的父盒子设置为flex布局之后，子元素的 float 、clear 和 vertical-align 属性将会失效。

  • 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局

      采用了 Flex布局的元素，称为 **Flex容器**（flex container），简称 ”容器“。它的所有子元素自动成为容器成员，称为**Flex项目**（flex item），简称”项目“。

在这里插入图片描述

​ **flex布局原理：**通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。

二、flex布局父项常见属性

2.1 常见父项属性

以下由6个属性是对父元素设置的

  • flex-direction：设置主轴的方向
  • jusify-content：设置主轴上的子元素排列方式
  • flex-wrap：设置子元素是否换行
  • align-content: 设置侧轴上的子元素的排列方式(多行)
  • align-items：设置侧轴上的子元素排列方式(单行)
  • flex-flow: 复合属性，相当于同时设置了flex-direction 和 flex-wrap

2.2 flex-direction 属性

2.2.1主轴与侧轴

​ 在flex布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、x轴和y轴

  • 默认主轴方向就是x轴反向，水平向右

  • 默认侧轴方向就是y轴方向，水平向下

    在这里插入图片描述

2.2.2 属性值

​ flex-direction属性决定主轴的方向（即项目的排列方向）

​ 注意：主轴和侧轴是会变化的，就看flex-direction设置谁为主轴，剩下的就是侧轴。而我们的子元素是跟着主轴来排列的。

属性值说明
row默认值从左到右
row-reverse从右到左
column从上到下
column-reverse从下到上
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>flex布局</title>
	</head>
	<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
		</div>
	</body>
</html>

<style>
	div{
		width: 800px;
		height: 300px;
		background-color: pink;
		/* 给父级添加flex属性 */
		display: flex;
		/* 默认的主轴是x轴 row  y轴就是侧轴了 元素是跟着主轴来排列的 */
		/* flex-direction: row-reverse; */
		/* 将主轴设置为y轴,那么x轴就变为侧轴,元素是跟着主轴来排列的 */
		flex-direction: column;
	}
	div span{
		width: 150px;
		height: 100px;
		background-color: purple;
	}
</style>

界面展示效果：在这里插入图片描述

2.3 justify-content 属性

​ justify-content属性是设置 主轴上的子元素对齐方式，定义了项目在主轴上的对齐方式

注意：使用这个属性之前一定要确定号主轴是x轴还是y轴。

属性值说明
flex-start默认值 从头部开始，如果主轴是x轴，则从左到右
flex-end从尾部开始排列
center在著有剧中对齐（如果主轴是x轴 则水平居中）
space-around平均分剩余空间（ 左边空间+右边空间的方式 ）
space-between先两边贴边 在分剩余空间（ 重要 ）

2.4 flex-wrap属性

​ 当下面这种情况出现时：父容器的长度在主轴上无法全部容下所有的项目时，子元素（项目）的主轴大小会被无线的缩小，子项目不会自动进行换行。就需要通过 flex-wrap属性来处理换行操作。

<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<!-- <span>4</span> -->
		</div>
	</body>
	<style>
		div{
			width: 600px;
			height: 400px;
			background-color: pink;
			display: flex;  //父容器flex布局
			flex-direction: row;  //主轴方向
			
		}
		div span{
			width: 150px;
			height: 100px;
			background-color: purple;
			color: aliceblue;
			margin: 10px; //外边距
		}
	</style>

​ 当添加多个 <span> </span> 标签时，子项目在主轴上的宽度会被无线收缩，而不会自动换行。

在这里插入图片描述

​ flex-wrap设置子元素是否换行，flex布局中的子元素是默认不换行，项目都排在一条线（又称为”轴线“）上，如果装不开，会缩小子元素的主轴上的大小。

属性值说明
nowrap默认值，不换行
wrap换行
<body>
		<div>
			<span>1</span>
			<span>2</span>
			<span>3</span>
			<span>4</span>
			<span>5</span>
		</div>
	</body>
	<style>
		div{
			width: 600px;
			height: 400px;
			background-color: pink;
			display: flex;  /* //父容器flex布局 */
			flex-direction: row;  /* //主轴方向 */
			/* justify-content:space-around; */
			flex-wrap: wrap;
		}
		div span{
			width: 150px;
			height: 100px;
			background-color: purple;
			color: aliceblue;
			margin: 10px; //外边距
		}
	</style>

换行后的效果：在这里插入图片描述

2.5 align-items属性

​ 设置侧轴上的子元素排列方式（单行）

​ 该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

属性值说明
flex-start默认值 从上到下
flex-end从下到上
center挤在一起居中（垂直居中）
stretch拉伸（子项目没有设置高度的情况）
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </div>
</body>
<style>
    div{
        width: 600px;
        height: 400px;
        background-color: pink;
        display: flex;  /* 父容器flex布局 */
        flex-direction: row;  /* //主轴方向x */
        justify-content: center;
        align-items: center;
    }
    div span{
        width: 150px;
        height: 100px;
        background-color: purple;
        color: aliceblue;
        margin: 10px; //外边距
    }
</style>

在这里插入图片描述

​

2.6 align-content属性

​ 设置轴上的子元素的排列方式（多行），设置子项目在侧轴上的排列方式，并且只能用于子项目出现了换行的情况（多行）。在单行下没有效果！

属性值说明
flex-start默认值，从侧轴的头部开始排列
flex-end从侧轴的尾部开始排列
center在侧轴的中间显示
space-around子项在侧轴平分剩余空间
space-between子项在侧轴上先分布到两头，在平凡甚于空间
stretch设置子元素高度平分父元素高度

align-items 和 align-content 区别:

  • align-items适应单行情况下，只有上对齐、下对齐、居中和拉伸。
  • align-content适用与多行的情况下(多行)，单行无效。可以设置 上对齐、下对齐、居中对齐、拉伸 以及 平分剩余空间等操作
  • 单行找 align-items 多行找 align-content
<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
<style>
    div{
        width: 600px;
        height: 400px;
        background-color: pink;
        display: flex;  /* 父容器flex布局 */
        flex-direction: row;  /* //主轴方向x */
        justify-content: center;
        /* align-items: center; 只是对单行起效 */
        flex-wrap: wrap;
        align-content: center;
    }
    div span{
        width: 150px;
        height: 100px;
        background-color: purple;
        color: aliceblue;
        margin: 10px; //外边距
    }

在这里插入图片描述

2.7 flex-flow

​ flex-flow 属性是我们 flex-direction (主轴方向）和 flex-wrap(是否换行) 属性的符合属性。

<body>
    <div>
        <span>1</span>
        <span>2</span>
        <span>3</span>
        <span>4</span>
        <span>5</span>
        <span>6</span>
    </div>
</body>
<style>
    div{
        width: 600px;
        height: 400px;
        background-color: pink;
        display: flex;  /* 父容器flex布局 */
        flex-flow: row wrap;
        align-content: center;
    }
    div span{
        width: 150px;
        height: 100px;
        background-color: purple;
        color: aliceblue;
        margin: 10px; //外边距
    }
</style>

在这里插入图片描述

三、flex布局中子项常用属性

flex子项中常见属性主要有一下三个：

  • flex 子项占的份数
  • align-self 控制子项自己在侧轴的排列方式
  • order 定义子项的排列顺序（前后顺序）

3.1 flex 属性:

​ 定义子项目来分配甚于空间，用flex来表示占多少份。

.item{

​ flex : <number> ; /* default 0 */

}

  • 案例一：在这里插入图片描述
<body>
    <section>
        <div>1</div>
        <div>2</div>
        <div>3</div>
    </section>
</body>
<style>
    section {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 0 auto; //居中
    }
    section div:nth-child(1){
        width: 100px;
        height: 150px;
        background-color: red;
    }
    section div:nth-child(3){
        width: 100px;
        height: 150px;
        background-color: blue;
    }
    section div:nth-child(2){
        background-color: green;
        flex: 1;
    }
</style>

展示效果：在这里插入图片描述

  • 案例二：

    <body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
<style>
    p {
        display: flex;
        width: 60%;
        height: 150px;
        background-color: pink;
        margin: 100px auto; //居中
    }
    p span {
        flex:1;
        background-color: chocolate;
        margin: 10px;
    }
</style>

    在这里插入图片描述

3.2 algin-self 属性

​ align-self 控制子项自己在侧轴上的排列方式。允许单个项目有与其他项目不一样的对齐方式。可覆盖 align-items属性。默认值为auto，表示继承父项目的 align-items 属性，如果没有父元素，同等与stretch。

<body>
    <p>
        <span>1</span>
        <span>2</span>
        <span>3</span>
    </p>
</body>
<style>
    p {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        margin: 100px auto; /* 居中 */
        /* align-items:flex-end;  z只想让3号盒子下对齐*/
    }
    p span {
        width: 150px;
        height: 100px;
        background-color: purple;
        margin-right: 5px;
    }
    p span:nth-child(3){
        /* 只改变3号盒子的对齐方式 */
        align-self: flex-end;  
    }
</style>

在这里插入图片描述

3.2 order 属性

​ 定义项目的排列顺序，数值越小，排列越靠前，默认为0。

注意：与 z-index 不一样。

<body>
		<p>
            <span>1</span>
            <span>2</span>
            <span>3</span>
    </p>
</body>
<style>
    p {
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        margin: 100px auto; /* 居中 */
        /* align-items:flex-end;  z只想让3号盒子下对齐*/
    }
    p span {
        width: 150px;
        height: 100px;
        background-color: purple;
        margin-right: 5px;
    }
    p span:nth-child(3){
        /* 只改变3号盒子的对齐方式 */
        align-self: flex-end; 
        /* 默认是0，-1更小，所有在前面 */
        order: -1;
    }
</style>

在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mfbz.cn/a/416121.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

抖音无水印视频关键词批量下载操作说明|视频批量采集工具

抖音无水印视频关键词批量下载操作说明|视频批量采集工具

抖音无水印视频关键词批量下载工具是一款便捷实用的软件&#xff0c;通过关键词搜索功能可以轻松进行视频批量下载。QQ:290615413 以下是操作步骤及功能介绍&#xff1a; 打开软件后进入关键词搜索页面&#xff1a; 在软件中找到第一个选项卡&#xff0c;即为关键词搜索功能。 …
阅读更多...
JOISC2022 复制粘贴（区间DP，字符串hash）

JOISC2022 复制粘贴（区间DP，字符串hash）

题目描述 题面 分析 这道题考场没有任何头绪&#xff0c;赛后也是看了许多题解才明白状态设计和转移的一步步思考过程。 首先我们需要想到 无论是屏幕上的字符串&#xff0c;还是剪切板上的字符串&#xff0c;在任何时候都必须是目标串的子串。这个非常好像&#xff0c;如果不…
阅读更多...
视频汇聚/存储/压缩/诊断平台EasyCVR视频联网整合方案应用特点

视频汇聚/存储/压缩/诊断平台EasyCVR视频联网整合方案应用特点

随着科技的不断发展&#xff0c;监控视频在各个领域的应用越来越广泛。为了更好地管理和利用这些视频资源&#xff0c;视频联网与整合的需求也越来越多。通过视频联网技术将不同地理位置或不同设备的视频资源进行整合&#xff0c;实现实时共享和集中管理。视频联网整合方案的应…
阅读更多...
快速创建百度百科，打造专属品牌词条

快速创建百度百科，打造专属品牌词条

本文迅推客传媒将为小白详细讲解如何创建百度百科&#xff0c;并提供详细的教程。 创建百度百科账号 请先注册一个。注册完成后&#xff0c;登录百度账号。在搜索框中输入“百度百科”&#xff0c;进入百度百科官网。 选择创建词条类型 根据自己的需要选择相应的分类。例如&…
阅读更多...
Outlook邮箱IMAP怎么开启？服务器怎么填？

Outlook邮箱IMAP怎么开启？服务器怎么填？

Outlook邮箱IMAP服务器如何开启&#xff1f;Outlook设置IMAP的方法&#xff1f; Outlook邮箱作为其中的佼佼者&#xff0c;被广大用户所青睐。但在使用Outlook邮箱时&#xff0c;许多用户可能会碰到一个问题&#xff1a;如何开启IMAP服务&#xff1f;下面&#xff0c;蜂邮EDM就…
阅读更多...
学习大数据，所必需的java基础(6)

学习大数据，所必需的java基础(6)

文章目录 集合Set集合介绍HashSet集合的介绍和使用LinkedHashSet的介绍以及使用哈希值哈希值的计算方式HashSet的存储去重的过程 Map集合Map的介绍HashMap的介绍以及使用HashMap的两种遍历方式方式1&#xff1a;获取key&#xff0c;然后再根据key获取value方式2&#xff1a;同时…
阅读更多...
trie树(前缀树)

trie树(前缀树)

前缀树 1. 前缀树的的介绍2.前缀树的实现2.1插入功能2.2删除功能2.3查找前缀和查找单词功能2.4 哈希表版本 1. 前缀树的的介绍 在计算机科学中&#xff0c;trie&#xff0c;又称前缀树或字典树&#xff0c;是一种有序树&#xff0c;用于保存关联数组&#xff0c;其中的键通常是…
阅读更多...
《Spring Security 简易速速上手小册》第1章 Spring Security 概述（2024 最新版）

《Spring Security 简易速速上手小册》第1章 Spring Security 概述（2024 最新版）

文章目录 1.1 Spring Security 的重要性1.1.1 基础知识详解1.1.2 主要案例&#xff1a;用户认证与授权1.1.3 拓展案例 1&#xff1a;OAuth2 社交登录1.1.4 拓展案例 2&#xff1a;JWT 认证 1.2 Spring Security 的核心特性1.2.1 基础知识详解1.2.2 主要案例&#xff1a;基于角色…
阅读更多...
11.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-接管游戏接收网络数据包的操作

11.网络游戏逆向分析与漏洞攻防-游戏网络架构逆向分析-接管游戏接收网络数据包的操作

内容参考于&#xff1a;易道云信息技术研究院VIP课 上一个内容&#xff1a;接管游戏发送数据的操作 码云地址&#xff08;master 分支&#xff09;&#xff1a;https://gitee.com/dye_your_fingers/titan 码云版本号&#xff1a;8256eb53e8c16281bc1a29cb8d26d352bb5bbf4c 代…
阅读更多...
Android Duplicate class 排除重复类

Android Duplicate class 排除重复类

一、起因&#xff1a; 在迭代开发的时候&#xff0c;发现2个ijk很多类重复。但又2个库实现的功能是不一样&#xff0c;目前不能合并。但又想保留2个功能。需要排除其中一个库。 二、报错如何下图&#xff1a; 三、解决方法&#xff1a; 3.1 在terminal 也就是命令行处输入 …
阅读更多...
js 面试 什么是WebSockets？HTTP和HTTPS有什么不同？web worker是什么？

js 面试 什么是WebSockets？HTTP和HTTPS有什么不同？web worker是什么？

概念&#xff1a; webSocket 是一种在客户端和服务端之间建立持久连接的协议&#xff0c;它提供全双工通信通道&#xff0c;是服务器可以主动向客户端推送数据&#xff0c;同时也可以接受客户端发送的数据。 1 webSocket与https区别&#xff1f; 在网络通信中&#xff0c;We…
阅读更多...
【mysql版本修改】

【mysql版本修改】

1、使用telnet确认当前mysql版本号 telnet <MySQL服务器IP地址> <MySQL端口号> telnet 192.168.38.20 33062、使用strings查看/usr/sbin/mysqld中包含版本号的字符串 # 查看/usr/sbin/mysqld文件中是否包含对应的版本号 strings /usr/sbin/mysqld | grep 5.7.30 …
阅读更多...
Unity | 动态读取C#程序集实现热更新

Unity | 动态读取C#程序集实现热更新

目录 一、动态语言 二、创建C#dll 1.VS中创建一个C#语言的库工程 2.添加UnityEngine.dll的依赖 3.编写代码&#xff0c;生成dll 三、Unity使用dll 一、动态语言 计算机编程语言可以根据它们如何将源代码转换为可以执行的代码来分类为静态语言和动态语言。 静态语言&…
阅读更多...
Spark Bloom Filter Join

Spark Bloom Filter Join

1 综述 1.1 目的 Bloom Filter Join&#xff0c;或者说Row-level Runtime Filtering&#xff08;还额外有一条Semi-Join分支&#xff09;&#xff0c;是Spark 3.3对运行时过滤的一个最新补充   之前运行时过滤主要有两个&#xff1a;动态分区裁剪DPP&#xff08;开源实现&am…
阅读更多...
ISO_IEC_18598-2016自动化基础设施管理（AIM）系统国际标准解读（一）

ISO_IEC_18598-2016自动化基础设施管理（AIM）系统国际标准解读（一）

██ ISO_IEC_18598-2016是什么标准&#xff1f; ISO/IEC 18598国际标准是由ISO&#xff08;国际标准化组织&#xff09;/IEC&#xff08;国际电工委员会&#xff09;联合技术委员会1-信息技术的第25分委员会-信息技术设备互连小组制定的关于信息基础设施自动化管理的国际标准&…
阅读更多...
C++中atomic的使用

C++中atomic的使用

atomic使用 概述介绍使用场景头文件atomic的使用创建load()store()exchange()compare_exchange_weakcompare_exchange_strong&#xff08;&#xff09;fetch_add()fetch_sub()fetch_and()fetch_or()fetch_xor() 示例实现代码运行结果 概述 本文只要讲述C11中atomic的使用&…
阅读更多...
一文读懂Prometheus和Grafana的区别（适合小白）

一文读懂Prometheus和Grafana的区别（适合小白）

Prometheus和Grafana是两种开源软件&#xff0c;分别用于监控和可视化数据。它们的主要功能和特点如下&#xff1a; Prometheus 监控系统&#xff1a;Prometheus是一个专门用于收集和存储时间序列数据的监控系统。它可以从各种目标&#xff08;如服务器、数据库等&#xff09…
阅读更多...
Spring中的事务和事务的传播机制

Spring中的事务和事务的传播机制

事务是一组操作的集合&#xff0c;不可以被分割。事务会把所有的操作作为一个整体&#xff0c;这组操作要么全部成功&#xff0c;要么全部失败。 事务有三种操作&#xff1a; 开启事务&#xff1b;提交事务&#xff1b;回滚事务。 如果代码的执行逻辑是这样&#xff1a; 开…
阅读更多...
NutUI + taro +vue 开发遇到的问题 使用popup组件 内部元素滚动遇到的的问题

NutUI + taro +vue 开发遇到的问题 使用popup组件 内部元素滚动遇到的的问题

1 popup 弹出内容时 弹出的框内元素数据很长需要滚动时 本地可以正常滚动 打包成小程序后无法滚动 如这样的免责条款内容 代码如下 解决办法 1 把2处的单位换成百分比 弹框能滚动但是 是popup 里面所有的元素都一起滚动 导致标题都滚走了 2 scroll-y 改成&#xff1a; :scrol…
阅读更多...
Excel数据表定制分组排序

Excel数据表定制分组排序

实例需求&#xff1a;某学校体育活动统计表如下图左侧表格所示&#xff0c;数据按照班级排列&#xff0c;现在需要根据如下规格对表格进行排序 “幼儿”班级排列在表格最后按照“次数”降序排列“幼儿”班级同样按“次数”降序排列 排序结果如下图中右侧表格所示。 示例代码…
阅读更多...
最新文章

Copyright @ 2022~2023

友情链接： 我的编程经验分享 一条长河网 尧图网站开发 尧图建网站