CSS伸缩盒模型

CSS伸缩盒模型

伸缩盒模型是CSS中的一种布局手段,可以使元素具有弹性,让元素可以跟随页面大小的改变而改变。

1. 伸缩容器

给元素设置display:flexdisplay:inline-flex ,就是伸缩容器。

2. 主轴与侧轴

  • 主轴: 伸缩项目沿着主轴排列,主轴默认是水平的,默认方向是:从左到右。
  • 侧轴: 与主轴垂直的就是侧轴,侧轴默认是垂直的,默认方向是:从上到下。

主轴的属性:

属性名作用
flex-direction
主轴方向

row :主轴方向水平从左到右(默认)
row-reverse :主轴方向水平从右到左
column :主轴方向垂直从上到下
column-reverse :主轴方向垂直从下到上
flex-wrap
主轴换行

nowrap :不换行(默认)
wrap :自动换行
wrap-reverse :反向换行
flex-flow
复合属性
flex-direction 和 flex-wrap
justify-content
主轴对齐

flex-start :主轴起点对齐(默认)
flex-end :主轴终点对齐
center :居中对齐
space-between :均匀分布,两端对齐(最常用)
space-around :均匀分布,两端距离是中间距离的一半
space-evenly :完全平分

注意:改变了主轴的方向,侧轴方向也随之改变。

侧轴的属性:

属性名作用
align-items
侧轴一行对齐

flex-start :顶端对齐
flex-end :尾端对齐
center :水平对齐
baseline : 伸缩项目的第一行文字的基线对齐
stretch :如果伸缩项目未设置高度,将占满整个容器的高度(默认)
align-content
侧轴多行对齐

flex-start :顶端对齐
flex-end :尾端对齐
center :与侧轴的中点对齐
space-between :两端对齐,中间平均分布
space-around :均匀分布,上下两端距离是中间距离的一半
space-evenly : 完全平分
stretch :占满整个侧轴(默认)

3. flex练习1

用flex完成以下排列:

image-20240202212002463

3.1 代码演示

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>flex练习1</title><style>*{box-sizing: border-box;margin: 0;padding: 0;}.wrapper{width: 400px;height: 200px;margin: auto;border: 1px solid #ccc;display: flex;/* align-items指定元素在纵轴上的排布方式 */align-items: center;/* justify-content指定元素在主轴上的排布方式 */justify-content: space-around;}.box{width: 40px;height: 40px;border-radius: 50%;background-color: #f00;}</style>
</head>
<body><div class="wrapper"><div class="box"></div><div class="box"></div><div class="box"></div><div class="box"></div></div>
</body>
</html>

4. flex练习2

用flex,完成骰子的点数。

image-20240202212159838

4.1 分析思路

image-20240202213028669

4.2 代码演示

<!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>骰子点数</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}.wrapper {margin: 100px 100px;width: 500px;height: 500px;border-radius: 10px;background-color: #232323;display: flex;flex-wrap: wrap;align-items: center;justify-content: space-around;}.dot {width: 20px;height: 20px;border-radius: 50%;background-color: #000;}.box-common {width: 100px;height: 100px;display: flex;background-color: #fff;padding: 4px;margin: 60px;border-radius: 8px;}.box {align-items: center;justify-content: center;}.box2 {flex-direction: column;justify-content: space-between;align-items: center;}/* align-self子元素属性,控制自身的排列 */.dot2-1 {align-self: flex-start;}/* align-self子元素属性,控制自身的排列 */.dot2-2 {align-self: flex-end;}/* 3点的写法 */.box3 {justify-content: space-between;}.dot3-1 {align-self: flex-start;}.dot3-2 {align-self: center;}.dot3-3 {align-self: flex-end;}/* box4 */.box4 {flex-wrap: wrap;}.dot4 {width: 50%;height: 50%;display: flex;}.dot4:nth-child(2) {justify-content: flex-end;}.dot4:nth-child(3) {align-items: flex-end;}.dot4:nth-child(4) {justify-content: flex-end;align-items: flex-end;}</style></head><body><div class="wrapper"><!-- 一点 父容器,主轴居中,侧轴居中--><div class="box box-common"><div class="dot"></div></div><!-- 二点 主容器主轴为侧轴,居中,每一个子项单独控制,第一个flex-start,第二个flex-end--><div class="box2 box-common"><div class="dot dot2-1"></div><div class="dot dot2-2"></div></div><!-- 三点 同2点写法一样,只不过中间的点是center--><div class="box3 box-common"><div class="dot dot3-1"></div><div class="dot dot3-2"></div><div class="dot dot3-3"></div></div><!-- 四点 分为四个部分,嵌套两层flex盒子--><div class="box4 box-common"><div class="dot4"><div class="dot"></div></div><div class="dot4"><div class="dot"></div></div><div class="dot4"><div class="dot"></div></div><div class="dot4"><div class="dot"></div></div></div></div></body>
</html>

5. 青蛙小游戏

Flexbox Froggy(弹性盒小青蛙)是一个帮助你快速学习前端 Flex 布局的小游戏,可以通过玩游戏的方式进行巩固flex知识。

项目地址:https://flexboxfroggy.com/

image-20240202213434991

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

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

相关文章

python coding with ChatGPT 打卡第17天| 二叉树:找树左下角的值、路径总和

相关推荐 python coding with ChatGPT 打卡第12天| 二叉树&#xff1a;理论基础 python coding with ChatGPT 打卡第13天| 二叉树的深度优先遍历 python coding with ChatGPT 打卡第14天| 二叉树的广度优先遍历 python coding with ChatGPT 打卡第15天| 二叉树&#xff1a;翻转…

SpringBoot+随机盐值+双重MD5实现加密登录

&#x1f3e1;浩泽学编程&#xff1a;个人主页 &#x1f525; 推荐专栏&#xff1a;《深入浅出SpringBoot》《java对AI的调用开发》 《RabbitMQ》《Spring》《SpringMVC》 &#x1f6f8;学无止境&#xff0c;不骄不躁&#xff0c;知行合一 文章目录 前言一、salt…

阿里云游戏服务器收费价格表,一年和1个月报价

阿里云游戏服务器租用价格表&#xff1a;4核16G服务器26元1个月、146元半年&#xff0c;游戏专业服务器8核32G配置90元一个月、271元3个月&#xff0c;阿里云服务器网aliyunfuwuqi.com分享阿里云游戏专用服务器详细配置和精准报价&#xff1a; 阿里云游戏服务器租用价格表 阿…

Linux系统调试课:硬件断点

沉淀、分享、成长,让自己和他人都能有所收获!😄 📢在linux内核编程中,经常会遇到由于内存被篡改,例如 buffer overflow,野指针,write after free等。查找分析此类问题非常的麻烦。 一、什么是硬件断点 硬件断点,是Linux内核中是一种被ptrace和内核内调试器使用调试…

Codeforces Round 923 (Div. 3) A - E

CF1927A Make it White 代码如下&#xff1a; //朴素版 #include<bits/stdc.h> using namespace std; using ll long long; const ll N 200005; #define inf 0x7fffffff void solve() {ll n;cin>>n;string a;cin>>a;ll x-1,y0;a a;for(ll i1;i<n;i){i…

【数据分享】1929-2023年全球站点的逐月平均降水量(Shp\Excel\免费获取)

气象数据是在各项研究中都经常使用的数据&#xff0c;气象指标包括气温、风速、降水、湿度等指标&#xff0c;说到常用的降水数据&#xff0c;最详细的降水数据是具体到气象监测站点的降水数据&#xff01; 有关气象指标的监测站点数据&#xff0c;之前我们分享过1929-2023年全…

为什么要用建造者模式

因为如果不使用建造者模式&#xff0c;使用一个类时&#xff0c;类中可能会创建很多重载的构造方法。 当使用了建造者模式&#xff0c;使用一个类时&#xff0c;可以选择性地给对象的属性赋值&#xff0c;避免类中可能会创建很多重载的构造方法。 以下是最简单的例子&#xff…

Spring Security 4.X(XML文件配置session超时,单点登录-session并发控制,退出/logout)

目录 前言 一、Java web设置session超时 二、session并发控制 三、退出/logout设置 前言 本文是继SSM项目集成Spring Security 4.X版本&#xff08;使用spring-security.xml 配置文件方式&#xff09;_spring security4.x 会话管理配置文件版-CSDN博客https://blog.csdn.ne…

6.Swift字面量

Swift 字面量 在 Swift 中&#xff0c;字面量是指直接指定数值、字符串、布尔值等常量的值的表示方式。使用字面量可以直接在代码中指定常量的值&#xff0c;而不需要通过变量或常量来存储。Swift 支持多种类型的字面量&#xff0c;包括整数、浮点数、布尔值、字符串、数组、字…

作业2024/2/6

第五章 静态成员与友元 一、填空题 1、一个类的头文件如下所示&#xff0c;num初始化值为5&#xff0c;程序产生对象T&#xff0c;且修改num为10&#xff0c;并使用show()函数输出num的值10。 #include <iostream.h> class Test { private: static int num; publi…

Oracle的权限

通过用户登录plsql工具后&#xff0c;如果在创建视图(或其他对象)时&#xff0c;没有指明视图或对象的用户&#xff0c;该视图或对象将直接创建在当前登录用户下。 GRANT SELECT ON user2.table1 TO user1;//将用户2的表1的select权限给用户1 GRANT ALL ON user2.table1 TO u…

DAY5 作业

1.TCP三次握手 2.TCP四次挥手 3.TCP和UDP的区别 相同点&#xff1a;都属于传输层的协议 不同点&#xff1a; TCP&#xff1a;1&#xff09;提供面向连接的&#xff0c;可靠的数据传输服务&#xff1b; 2&#xff09;传输过程中&#xff0c;数据无误&#xff0c;数据无丢失、数…

龙芯+RT-Thread+LVGL实战笔记(34)——密码锁初步

【写在前面】春节期间,本系列教程会不定期更新,毕竟这是一年当中最适合放下工作的时期。祝各位朋友新年大吉,身体健康。来年继续关注笔者和CSDN平台,收获更多的知识和技能。按照惯例,还是在开篇做一些声明: 有些硬件模块笔者并没有,如LED点阵、压力传感模块、RFID模块等…

【C++第二阶段】空指针访问成员函数常成员函数常成员属性

你好你好&#xff01; 以下内容仅为当前认识&#xff0c;可能有不足之处&#xff0c;欢迎讨论&#xff01; 文章目录 空指针访问成员函数常成员函数&常成员属性 空指针访问成员函数 类对象类型的空指针可以访问成员函数&#xff0c;但是不能够访问带有成员属性的成员函数。…

大数据调用链监控平台技术原理

一、AOP技术总结 二、监控逻辑动态织入原理 三、JVM动态织入流程 四、调用链监控平台技术简要总结 &#xff08;一&#xff09;、单服务的无感知自动日志埋点 jvm层面的字节码织入埋点&#xff0c;javaagent方式启动。 &#xff08;二&#xff09;、多服务调用链串联 trace…

transformer剪枝论文汇总

文章目录 NN Pruning摘要实验 大模型剪枝LLM-PrunerSparseGPT LTPVTPWidth & Depth PruningPatch SlimmingDynamicViTSPViTDynamicBERTViT SlimmingFastFormersNViTUVCPost-training pruning NN Pruning 《Block Pruning For Faster Transformers》 《为更快的transformer…

43、WEB攻防——通用漏洞任意文件下载删除重装敏读取黑白审计

文章目录 有关文件方面的漏洞&#xff1a;文件上传、文件包含和文件下载。 文件读取&#xff1a;基本和文件下载利用类似&#xff1b; 文件下载&#xff1a;利用下载获取源码或数据库配置文件及系统敏感文件为后续出思路。正常情况下&#xff0c;文件下载不能给一个路径就下&a…

关于TDSQL(MySQL)的简单知识分享

0. 前言 最近在系统改造过程中&#xff0c;接触到了国产分布式数据库TDSQL&#xff0c;记录一下关于TDSQL的部分知识点。 1. TDSQL简介 TDSQL是腾讯推出的一款兼容MySQL的自主可控、高一致性分布式数据库产品。 1.1 TDSQL优点&#xff1a; 数据强一致性高性能低成本线性水…

OPC UA客户端工具Softing OPC Client使用_推荐使用

OPC UA客户端工具Softing OPC Client使用_推荐使用 Softing OPC Client工具介绍 Softing OPC Client工具是德国Softing公司出品的标准OPC客户端。 是我数年来用过的最完备的OPC UA客户端工具。全部的数据类型都支持&#xff0c;功能齐备。 是查看或测试OPC服务器的最好工具了…

分布式事务解决方案AT模式

AT模式是Seata框架中的一种分布式事务解决方案&#xff0c;它利用两阶段提交&#xff08;2PC&#xff09;的概念&#xff0c;通过日志记录&#xff08;在undo_log中&#xff09;来实现在分布式系统中数据的一致性。AT模式可以解决分布式事务中的数据不一致问题&#xff0c;适合…