CSS学习笔记:flex布局(弹性布局)

设置flex布局

父元素添加display: flex

使用justify-content调节元素在主轴的对齐方式

给父元素添加justify-content属性,取值如下

用于调节子元素在主轴方向(水平方向)的对齐方式

 

使用align-items调节元素在侧轴的对齐方式

给父元素添加align-items属性,取值如下

用于调节子元素在侧轴方向(垂直方向)的对齐方式

align-self: 控制某个弹性盒子在侧轴的对齐方式

注意:align-self是给子元素添加的属性,用于单独控制该元素在侧轴的对齐方式

使用flex属性修改弹性盒子伸缩比

代码示例

<!DOCTYPE html>
<html lang="en">
<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>Document</title><style>* {margin: 0;padding: 0;}.box {display: flex;height: 300px;border: 1px solid #000;}.box div {height: 300px;}.box div:nth-child(1) {width: 50px;background-color: pink;}.box div:nth-child(2) {/* 占用父级剩余尺寸的3/4 */flex: 3;background-color: skyblue;}.box div:nth-child(3) {/* 占用父级剩余尺寸的1/4 */flex: 1;background-color: orange;}</style>
</head>
<body><div class="box"><div>1</div><div>2</div><div>3</div></div>
</body>
</html>

浏览器预览效果

使用flex-direction改变元素排列方向

主轴默认是水平方向, 侧轴默认是垂直方向

修改主轴方向属性: flex-direction

使用flex-wrap实现弹性盒子多行排列效果

弹性盒子换行显示: flex-wrap: wrap;

调整侧轴方向的对齐方式:align-content(取值与justify-content基本相同 )

align-item和align-content的区别:

align-items 用于单行内部的对齐,而 align-content 用于多行之间的对齐

如果你的 flex 容器只有一行,那么 align-content 将不会产生任何效果

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

华为机考入门python3--(31)牛客31-单词倒排

分类&#xff1a;字符串、正则 知识点&#xff1a; 正则提取所有符合的字符串 words re.findall(r[a-zA-Z], sentence) 列表倒序 words[::-1] 题目来自【牛客】 import re # 导入正则表达式模块def reverse_words(sentence):# 使用正则表达式将句子拆分成单词# 如可以将…

GM Bali,OKLink受邀参与Polygon AggIsland大会

5月16日-17日&#xff0c;OKLink 受到生态合作伙伴 Polygon 的特别邀请&#xff0c;来到巴厘岛参与以 AggIsland 为主题的大会活动并发表演讲&#xff0c;详细介绍 OKLink 为 Polygon 所带来的包括多个浏览器和数据解析等方面的成果&#xff0c;并与 Polygon 一起&#xff0c;对…

Apache Flink CDC 3.1.0版本知识学习

Apache Flink CDC 3.1.0版本知识学习 一、Flink CDC 3.1 快速预览二、Transformation 支持三、分库分表合并支持四、使用 Kafka Pipeline Sink 高效写入 Canal/Debezium 格式数据五、更高效地实时入湖 Paimon六、其他改进七、Flink CDC 3.1 版本兼容性 一、Flink CDC 3.1 快速预…

phpmyadmin漏洞汇总

phpmyadmin是一个非常常用的框架&#xff0c;所以学习它的常见漏洞是非常必要的。 参考大佬的文章进行自学&#xff1a;最全phpmyadmin漏洞汇总_phpmyadmin弱口令-CSDN博客 目录 phpmyadmin简介 查看phpmyadmin版本 漏洞及利用 万能密码登入 影响版本 漏洞POC 远程代码…

【传知代码】无监督动画中关节动画的运动表示(论文复现)

前言&#xff1a;在数字动画的广袤领域中&#xff0c;关节动画以其真实、流畅的运动表现&#xff0c;一直占据着举足轻重的地位。无论是电影中的震撼特效&#xff0c;还是游戏世界的角色互动&#xff0c;关节动画都以其细腻的运动表现&#xff0c;赋予虚拟世界以生动与活力。然…

Excel某列中有不连续的数据,怎么提取数据到新的列?

这里演示使用高级筛选的例子&#xff1a; 1.设置筛选条件 在D2单元格输入公式&#xff1a;COUNTA(A4)>0 这里有两个注意事项&#xff1a; *. 公式是设置在D2单元格&#xff0c;D1单元格保持为空&#xff0c; **. 为什么公式中选A4单元格&#xff0c;A列的第一个数据在A3…

CPU数据传送控制方式

引入 为了实现CPU与I/O设备信息交换的同步 无条件传送 示例1&#xff1a; 示例2&#xff1a; 程序查询方式 引入 工作过程 单个外设 多个外设 特点 中断传送方式 工作过程 特点 DMA 概述 DMAC功能 总线请求信号HOLD 总线请求响应信号HOLDA 工作过程 小结

景源畅信:新手做抖音运营难不难?

在这个信息爆炸的时代&#xff0c;社交媒体平台如抖音已经成为了人们日常生活中不可或缺的一部分。随着抖音的兴起&#xff0c;越来越多的人开始尝试进入这个领域&#xff0c;希望通过抖音运营实现自己的价值。然而&#xff0c;对于新手来说&#xff0c;抖音运营是否真的容易呢…

文心智能体大赛:情深智导

情深智导 概述限制澄清个性化 预览体验 概述 情深向导&#xff0c;致力于为您和您的孩子提供科学、个性化的情感支持与指导。无论您在家庭教育上遇到什么困惑&#xff0c;或是想了解孩子的内心世界&#xff0c;我都会在您身边&#xff0c;与您共同探索&#xff0c;助力亲子关系…

keepalived交叉编译

前言 Keepalived可以实现对服务器的健康检查&#xff0c;当主服务器出现故障时&#xff0c;自动将服务切换到备份服务器上&#xff0c;确保服务的连续性&#xff0c;避免单点故障。它还可以管理一个虚拟 IP 地址&#xff0c;在主备服务器之间进行灵活切换&#xff0c;对外提供…

使用 Python 编程语言进行供应链分析

前言 要分析一家公司的供应链&#xff0c;我们需要供应链不同阶段的数据&#xff0c;如有关采购、制造、运输、库存管理、销售和客户人口统计的数据。我为这项任务找到了一个理想的数据集&#xff0c;其中包括一家时尚和美容初创公司的供应链数据。 1. 相关数据集 让我们导入…

打造坦克游戏:类方法的深入解析

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;坦克游戏与类方法的结合 二、坦克类的属性与方法概述 1. 属性定义与初…

Modbus协议基础

文章目录 Modbus概述Modbus TCP/IP Modbus概述 Modbus是由Modicon&#xff08;现为施耐德电气公司的一个品牌&#xff09;在1979年发明的&#xff0c;是全球第一个真正用于工业现场的应用层总线协议。 为更好地普及和推动Modbus在基于以太网上的分布式应用&#xff0c;目前施…

Ubuntu 安装 LibreOffice

1. 删除预安装的LibreOffice Ubuntu 和其他的 Linux 发行版带有预安装的 LibreOffice。这可能不是最新的&#xff0c;这是因为发行版有特定的发行周期。在进行新安装之前&#xff0c;你可以通过以下命令删除 Ubuntu 及其衍生发行版中的的旧版本。 sudo apt remove –purge li…

vs code怎么补全路径,怎么快捷输入文件路径

安装插件&#xff1a; 链接&#xff1a;https://marketplace.visualstudio.com/items?itemNamejakob101.RelativePath 使用 按住 Ctrl Shift H&#xff0c;弹出窗口&#xff0c;输入文件补全&#xff0c;回车就可以了 排除文件 如果你的项目下文件太多&#xff0c;它会…

基础—SQL—图形化界面工具的DataGrip使用(2)

一、回顾与引言 &#xff08;1&#xff09; 上次内容&#xff0c;博客讲到了DDL语句的数据库操作、表操作、表字段的操作的相关语法&#xff0c;然而之前都是在MySQL的命令行当中去操作演示的。这种方式可以用&#xff0c;但是使用的话&#xff0c;第一&#xff0c;在我们日常…

编译原理 期末复习笔记整理(上)

资料借鉴&#xff1a; 【编译原理】期末复习 零基础自学_哔哩哔哩_bilibili 编译原理笔记 第一章 引论 1.编译原理逻辑过程&#xff1a; 词法分析 语法分析 语义分析 中间代码生成 编译代码生成 2.词法分析 任务: 输入源程序&#xff0c;对…

解决 fatal: Not a git repository (or any of the parent directories): .git 问题

解决方法&#xff1a;在命令行 输入 git init 然后回车就好了

全面解析Java.lang.ClassCastException异常

全面解析Java.lang.ClassCastException异常 全面解析Java.lang.ClassCastException异常&#xff1a;解决方案与最佳实践 &#x1f680;&#x1f4da;摘要引言1. 什么是Java.lang.ClassCastException&#xff1f;代码示例 2. 报错原因2.1 类型不兼容2.2 泛型类型擦除2.3 接口和实…

02 FreeRTOS 任务

1、创建任务函数 1.1 动态内存的使用 在之前我们如果要创建一个与学生有关的任务&#xff0c;我们会定义&#xff1a; //打印50个学生的信息 char name[50][100]; int age[50]; int sex[50]; //1表示男&#xff0c;0表示女 int score[50]; 如果之后要对其进行修改会非常麻烦&…