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):# 使用正则表达式将句子拆分成单词# 如可以将…

Android启动动画SplashScreen,Error inflating class的问题

1、官网实现 链接&#xff1a;https://developer.android.google.cn/training/wearables/apps/splash-screen?hlzh-cn 2、遇到的问题 在启动新的activity&#xff0c;com.google.android.material.tabs.TabLayout控件无法inflate&#xff0c;出现 Error inflating class c…

代码随想录算法训练营第36期DAY42

DAY42 62不同路径 AC了&#xff0c;舒服&#xff01;待会看看优质解答。 class Solution {public: int uniquePaths(int m, int n) { vector<vector<int>> dp(m,vector<int>(n,1)); for(int i0;i<m;i){ for(int j0;j<n…

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

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

MPJLambdaWrapperX leftJoin 用法

MPJLambdaWrapperX 是 Mybatis-Plus 的一个扩展类&#xff0c;用于构造更复杂的数据表关联查询条件。它主要用于实现 SQL 的 JOIN 操作&#xff0c;如 LEFT JOIN、RIGHT JOIN 等。下面重点介绍如何使用 MPJLambdaWrapperX 来完成 LEFT JOIN 操作。 基本用法 首先确保你的项目…

python打印exception信息

一直以为掌握以下内容就够了。 try:#正常执行语句pass except:#如果正常执行语句不对&#xff0c;执行替代语句pass finally:不论正常执行语句执行如何&#xff0c;最后都会执行.finally这部分可以省略pass因为我try部分写的业务逻辑复杂&#xff0c;配置了多少活动&#xff0…

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 快速预…

代码随想录算法训练营第四十一天|509. 斐波那契数、70. 爬楼梯、746. 使用最小花费爬楼梯

代码随想录算法训练营第四十一天 509. 斐波那契数 题目链接&#xff1a;509. 斐波那契数 动规五部曲&#xff1a; 确定dp数组以及下标的含义&#xff1a;第i个数的斐波那契数值是dp[i]确定递推公式&#xff1a;dp[i] dp[i - 1] dp[i - 2];dp数组如何初始化&#xff1a;dp[…

汽车电子专栏目录一览

最近开始整理汽车电子专栏的目录。 方便找到想要的内容&#xff0c;与大家一起学习。 目录 一、 AUTOSAR规范与ECU软件开发篇幅目录 二、 CDD复杂驱动讲解篇幅目录 三、ETAS的运用 四、自动驾驶芯片驾驶芯片 五、三电技术 六、S32KXXMCU&#xff08;NXP汽车常用芯片&…

phpmyadmin漏洞汇总

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

【MySQL精通之路】数据类型

目录 1.数字数据类型 1.1 数字数据类型语法 1.2 整数类型&#xff08;精确值&#xff09;-Integer、INT、SMALLINT、TINYINT、MEDIUMINT、BIGINT 1.3 定点类型&#xff08;精确值&#xff09;-DECIMAL&#xff0c;NUMERIC 1.4 浮点类型&#xff08;近似值&#xff09;-FLOA…

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

前言&#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;anyway&#xff0c;要继续往换工作的方向走啊。加油&#xff01;&#xff01; 503.下一个更大元素II 想对了地方&#xff0c;但是没有坚持&#xff0c;应该搞两遍&#xff0c;就把所有…

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

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

海光DCU编译安装Cupy

现在国产GPU比较重视AI&#xff0c;大都对Pytorch和TensorFlow做了移植。但是像Numpy&#xff0c;cupy这些科学计算库也非常重要&#xff0c;数据分析和处理也是一个非常大的需求。 Cupy对AMD的Rocm的支持目前还是实验性的&#xff0c;只支持4.3和5.0两个版本。海光DCU与 Rocm…

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

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

keepalived交叉编译

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

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

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