前端的学习-CSS(弹性布局-flex)

一:什么是弹性布局-Flex

                flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。

                 语法:

.box{display: flex;
}
.box{display: inline-flex;
}

                注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。 

                基本概念: 

                按照我自己的理解,横向代表主轴的方向,纵向代表交叉轴的方向,横向的方向由左到右为开始到结束,纵向则是由上到下。

                我将被设置弹性布局的盒子称作父元素,将里面的内容称为子元素。方便记忆。

                通常设置盒子页面都是按照标准流进行排列。块元素的话就是从上到下排列。如下图。 

 

                现在给父元素也就是绿色的盒子设置弹性布局。 子元素的盒子会自动按照主轴方向排列。

 

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹性布局</title><style type="text/css">.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;}.main-box>div {width: 200px;height: 200px;border: 1px solid red;font-size: 20px;color: #000;}</style></head><body><div class="main-box"><div>1</div><div>2</div><div>3</div></div></body>
</html>

 

                以下6个属性设置在容器上。

                        flex-direction:项目的排列方向

                        flex-wrap:项目如何换行

                        flex-flow: flex-direction 属性和 flex-wrap的简写方式。

                        justify-content:项目在主轴上的对齐方式

                        align-items:项目在交叉轴上如何对齐

                        align-content:多根轴线的对齐方式 

        1:  flex-direction:项目的排列方向

                 flex-direction,默认排列为主轴方向,也就是水平方向。

box {flex-direction: row | row-reverse | column | column-reverse;
}

                row:默认方向,主轴的方向

                row-reverse:主轴方向,但元素会从主轴结束的方向开始排列,并且元素的顺序会反过来。

                column:交叉轴方向

                colmun-reverse:交叉轴方向,但元素会从交叉轴结束的方向开始排列,并且元素的顺序会反过来。。

flex-direction: row-reverse;

        设置交叉轴方向 

flex-direction: column;

 

 

        设置交叉轴反向  

flex-direction: column-reverse;

 2:flex-wrap:项目如何换行 

                首先弹性布局默认是不会换行,当子元素的宽度或者高度总和加起来大于父元素的宽度时,子元素会被压缩。如下。

 

        这时如果需要换行,则需要flex-warp属性来控制,flex-warp默认是 flex-warp: no-warp;

这时将其值为:flex-warp: warp;

flex-wrap: wrap;

        交叉轴方向换行 

 

.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */flex-direction: column;flex-wrap: wrap;
}
3:justify-content:项目在主轴上的对齐方式 
.box {justify-content: flex-start | flex-end | center | space-between |space-around;
}
justify-content: flex-start;

 

justify-content: flex-end;

 

 

justify-content: space-between;

 

 

justify-content: space-around;

justify-content: space-evenly;

 

 

                 space-around与space-evenly的区别是,space-evenly的间隙全是一样的,而,sapce-around的最左右两别的间隙和子元素之间的间隙是不一样的,space-beween的只有中间存在空隙。 

 4: align-items:项目在交叉轴上如何对齐
.box {align-items: flex-start | flex-end | center | baseline | stretch;
}
align-items: flex-start;

align-items: flex-end;

align-items: center;

 

align-items: baseline;以第一行文字的基线作为对齐的基准。

align-items: baseline;

 

                如果子元素未设置高度,而设置了align-items: stretch; 则会占满整个父元素。

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹性布局</title><style type="text/css">.main-box {width: 800px;height: 300px;background-color: aquamarine;margin: 0 auto;/* 设置弹性盒子 */display: flex;/* 设置交叉轴方向 */align-items: stretch;}.main-box>div {width: 100px;/* height: 300px; */border: 1px solid red;font-size: 20px;color: #000;}</style></head><body><div class="main-box"><div class="box1">1</div><div class="box2">2</div><div class="box3">3</div><div class="box4">4</div><div class="box5">5</div></div></body>
</html>

 

 5: align-content:多根轴线的对齐方式 

                align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用。

.box {align-content: flex-start | flex-end | center | space-between | spacearound | stretch;
}
align-content: flex-start;

 

align-content: flex-end;

 

 

align-content: space-around;

 

 

align-content: space-between;

 

 

align-content: space-evenly;

 

align-content: center;

 

 

align-content: stretch;

 

 

 今天就先这样。。。。。。

 

 

 

 

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

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

相关文章

SpringBoot整合Knife4j接口文档

1. 在项目入口模块pom文件导入依赖 <!-- knife4j&#xff08;API 文档工具&#xff09; --><dependency><groupId>com.github.xiaoymin</groupId><artifactId>knife4j-openapi2-spring-boot-starter</artifactId><version>${knife4j…

新款奔驰S450升级动态按摩座椅有哪些功能

奔驰 S450 升级前排动态按摩座椅通常具有以下功能&#xff1a; 1. 多种按摩模式和强度选择&#xff1a;通过精心设计的气囊和机械装置&#xff0c;能够模拟如揉捏、敲击、推拿等不同的按摩手法&#xff0c;为驾驶者和前排乘客舒缓肌肉疲劳&#xff0c;放松身心。 2. 广泛的按…

6.C基础_输入输出函数

putchar 功能&#xff1a;输出一个字符 函数声明&#xff1a; int putchar(int c);返回值&#xff1a;参数c的ASCLL码值 c&#xff1a;要输出的字符&#xff0c;可以为字符常量、字符变量或表达式 注意点&#xff1a;输出的结果不带\n getchar 功能&#xff1a;从键盘读…

SpringCache集成Redis

1. 添加config配置类 配置SpringCache 与 redis 的集成 配置类 2. 在service层中加注解 在Service层中增加注解 CacheConfig() 里面的CacheNmes是redis的nameSpace命名空间 方法上的Cacheable是key的值 请求结果 第一次会查数据库&#xff0c;后面相同的查询会直接走redis&am…

LBS 开发微课堂|Polyline绘制优化:效果更丰富,性能更佳!

为了让广大的开发者 更深入地了解 百度地图开放平台的技术能力 轻松掌握满满的技术干货 更加简单地接入 开放平台的服务 我们特别推出了 “位置服务&#xff08;LBS&#xff09;开发微课堂” 系列技术案例 第一期的主题是 《Polyline 绘制优化升级》 你还想了解哪些…

vulhub:Apache解析漏洞CVE-2017-15715

Apache HTTPD是一款HTTP服务器&#xff0c;它可以通过mod_php来运行PHP网页。其2.4.0~2.4.29版本中存在一个换行解析漏洞&#xff0c;在解析PHP时&#xff0c;1.php\x0A将被按照PHP后缀进行解析&#xff0c;导致绕过一些服务器的安全策略。 #启动靶机 cd /Vulnhub/vulhub-mast…

程序员的魔法石!

本文由 ChatMoney团队出品 AI自己写代码&#xff0c;这只是传说&#xff1f;还是摸鱼新指南&#xff1f; AI出现之前&#xff0c;从来都是老板或产品经理提需求&#xff0c;程序员熬夜加班吭哧吭哧写代码或者是从Github&#xff0c;Stackoverflow上controlc&#xff0c;control…

JavaFX布局-GridPane

JavaFX布局-GridPane 常用实行alignmenthgapvgappaddinggridLinesVisible 实现方式Java实现fxml实现 使用行和列来组织其子节点将节点放置在二维网格中的任何单元格&#xff0c;同时也可以设置跨越行、跨越列 常用实行 alignment 对齐方式&#xff0c;设置内容居中&#xff0…

数据库文件管理

数据库文件与普通文件区别: 1.普通文件对数据管理(增删改查)效率低 2.数据库对数据管理效率高,使用方便 常用数据库: 1.关系型数据库&#xff1a; 将复杂的数据结构简化为二维表格形式 大型:Oracle、DB2 中型:MySql、SQLServer 小型:Sqlite 2.非关…

第三十一天 chrome调试工具

打开调试工具 页面空白处右击 检查 或者F12 使用调试工具 ctrl滚轮改变代码大小 左边是html 右边是css css可以直接改动数值左右箭头或者直接输入 查看颜色 ctrl0 复原浏览器大小 点击元素右侧出现样式引入 没有的话 说明类名或者样式引用错误 这里的.new-left是存在的 如果类…

【Android Studio】UI 布局

文章目录 view布局LinearLayout view 在Android开发中&#xff0c;View是一个非常重要的概念&#xff0c;它是所有用户界面组件的基类。View类及其子类构成了Android应用中的用户界面。每个View都占用屏幕上的一个矩形区域&#xff0c;并可以响应用户输入&#xff08;如触摸、按…

鸿蒙(API 12 Beta2版)NDK开发【JSVM-API使用规范】

JSVM-API使用规范 生命周期管理 【规则】 合理使用OH_JSVM_OpenHandleScope和OH_JSVM_CloseHandleScope管理JSVM_Value的生命周期&#xff0c;做到生命周期最小化&#xff0c;避免发生内存泄漏问题。 每个JSVM_Value属于特定的HandleScope&#xff0c;HandleScope通过OH_JSV…

MySQL精简笔记

基础类型 bit&#xff0c;tinyint&#xff0c;smallint&#xff0c;int&#xff0c;bigintfload&#xff0c;double&#xff08;M&#xff1a;整数小数的位数&#xff0c;D&#xff1a;小数的位数&#xff09;decimal&#xff0c;numeric&#xff08;M&#xff0c;D)&#xff0…

大模型分布式训练之DeepSpeed优化器并行(ZeRO)原理

由于大模型参数量非常庞大&#xff0c;所以我们常常需要用到分布式训练来解决训练过程中计算资源不足的问题&#xff0c;现在也出现了很多大模型相关的分布式训练框架&#xff0c;但是使用的比较多的还是deepspeed的数据并行&#xff0c;那么deepspeed是怎么实现数据并行的呢 文…

【Unity】web gl inputFied 中文输入,同时支持TextMeshInputFied,支持全屏

同时支持TextMeshInputFied&#xff0c;支持全屏。 使用github包【WebGLInput】&#xff1a;https://github.com/kou-yeung/WebGLInput 需要资源的在这里也可以下载 https://download.csdn.net/download/weixin_46472622/89600795 用于unity web gl 中文输入&#xff0c;只需…

【人工智能】边缘计算与 AI:实时智能的未来

&#x1f48e; 我的主页&#xff1a;2的n次方_ &#x1f48e;1. 引言 随着物联网设备数量的爆炸性增长和对实时处理需求的增加&#xff0c;边缘计算与人工智能&#xff08;Edge AI&#xff09;成为一个热门话题。Edge AI 通过在本地设备上运行 AI 算法&#xff0c;减少对云计…

大数据-61 Kafka 高级特性 消息消费02-主题与分区 自定义反序列化 拦截器 位移提交 位移管理 重平衡

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; 目前已经更新到了&#xff1a; Hadoop&#xff08;已更完&#xff09;HDFS&#xff08;已更完&#xff09;MapReduce&#xff08;已更完&am…

Python酷库之旅-第三方库Pandas(062)

目录 一、用法精讲 241、pandas.Series.view方法 241-1、语法 241-2、参数 241-3、功能 241-4、返回值 241-5、说明 241-6、用法 241-6-1、数据准备 241-6-2、代码示例 241-6-3、结果输出 242、pandas.Series.compare方法 242-1、语法 242-2、参数 242-3、功能 …

最新小猫咪PHP加密系统源码V1.4_本地API接口_带后台

简介&#xff1a; 最新小猫咪PHP加密系统源码V1.4_完全本地化加密API接口_带后台 小猫咪PHP加密系统历时半年&#xff0c;它再一次迎来更新&#xff0c;更新加密算法&#xff08;这应该是最后一次更新加密算法了&#xff0c;以后主要更新都在框架功能上面了&#xff09;&…

Python 爬虫项目实战(一):破解网易云 VIP 免费下载付费歌曲

前言 网络爬虫&#xff08;Web Crawler&#xff09;&#xff0c;也称为网页蜘蛛&#xff08;Web Spider&#xff09;或网页机器人&#xff08;Web Bot&#xff09;&#xff0c;是一种按照既定规则自动浏览网络并提取信息的程序。爬虫的主要用途包括数据采集、网络索引、内容抓…