flex布局以及实现垂直居中
实现 以及 布局 居中 垂直 flex
2023-06-13 09:12:06 时间
大家好,又见面了,我是你们的朋友全栈君。
flex布局的原理
给父盒子添加flex属性,来控制盒子的位置和排列方式(当我们给父元素设置为flex布局以后,子元素的float、clear和vertical-align属性将失效) flex:布局又叫伸缩布局,弹性布局,伸缩盒布局,flex布局 flex常见的父项常见属性 flex-direction:设置主轴的方向 justify-content:设置主轴上的子元素排列方式 flex-wrap:设置子元素是否换行 align-content:设置侧轴上的子元素的排列方式(多行) align-items:设置侧轴上的子元素排列方式(单行) flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap flex常见的子项属性 flex子项目占的分数 aglin-self控制子项目自己在侧轴的排列方式 order属性定义子项的排列顺序(前后顺序)
flex设置垂直居中的两种方式
第一种给父元素设置代码如下
<style>
.box{
width:400px;
height:400px;
border:1px solid black;
display:flex;
flex-direction: column;
/* co1umn 从上到下*/
align-items: center;
/* center代表水平方向 */
justify-content: center;
/* center代表垂直方向 */
}
.content{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
line-height: 200px;
}
</style>
<body>
<div class = "box">
<div class = "content">我是垂直居中的盒子</div>
</div>
</body>
第二种给子元素设置
.box{
width:400px;
height:400px;
border:1px solid black;
display: flex;
/* 针对子元素的垂直方向对齐方式 */
align-items: center;
/* 对子元素的水平方向对齐方式 */
justify-content: center;
}
.content{
width:200px;
height:200px;
border:1px solid red;
text-align: center;
line-height: 200px;
}
<div class = "box">
<div class = "content">使用子元素方法垂直居中</div>
</div>
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/134411.html原文链接:https://javaforall.cn
相关文章
- JWT 单点登录(项目实现)「建议收藏」
- 通过memberlist库实现gossip管理集群以及集群数据交互
- Java单例模式(Singleton)以及实现「建议收藏」
- python中万物皆对象实现机制(进阶必看)
- 聊聊如何基于spring @Cacheable扩展实现缓存自动过期时间以及自动刷新
- Web服务器做了什么以及实现一个Web服务器的难度
- 基尼系数近似计算:sql (hive)实现 简单高效
- vue-router路由懒加载以及三种实现方式「建议收藏」
- windows 安装Elasticsearch、实现数据的插入以及使用kibana工具进行监控es数据
- 重定向与转发的区别以及实现_重定向与转发
- qsort函数的应用以及模拟实现
- Elastic-Job2.1.5源码-基于Zookeeper分布式锁实现选举作业主节点原理
- 从零开发一款相机APP 第十二篇:相机水印实现思路
- typecho当前页码和总页码的完美实现方式
- 利用MySQL游标实现数据游走(mysql游标的作用)
- Java多线程15:Queue、BlockingQueue以及利用BlockingQueue实现生产者/消费者模型详解编程语言
- MySQL 与 PHP 结合:实现强劲的查询功能(mysqlphp查询)
- 分区Linux硬盘分区扩容:实现数据存储空间更大化(linux扩大硬盘)
- 使用 Oracle SQL 实现多表拼接(oracle拼接sql)
- 使用Oracle触发器实现事件自动化处理(oracle触发器类型)
- 利用Oracle闪回区实现安全数据恢复(oracle闪回区)
- 慢谈 Redis 实现分布式锁 以及 Redisson 源码解析
- MSSQL运行指令——实现数据库服务的召唤(mssql运行命令)
- 轻松实现数据管理MySQL下载与使用指南(mysql下载以及使用)
- 在Redis集群中实现单一IP访问(redis集群单一ip)
- Redis实现自增循环(redis自增循环)
- C#实现解析百度天气数据,Rss解析百度新闻以及根据IP获取所在城市的方法