flex布局以及实现垂直居中

flex布局以及实现垂直居中flex布局的原理给父盒子添加flex属性,来控制盒子的位置和排列方式(当我们给父元素设置为flex布局以后,子元素的float、clear和vertical-align属性将失效)flex:布局又叫伸缩布局,弹性布局,伸缩盒布局,flex布局flex常见的父项常见属性flex-direction:设置主轴的方向justify-content:设置主轴上的子元素排列方式flex-wrap:设置子元素是否换行align-content:设置侧轴上的子元素的排列方式(多行)align-items

大家好,又见面了,我是你们的朋友全栈君。

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>
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/134411.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(1)


相关推荐

  • 关于列表转字符串这个过程的曲折

    关于列表转字符串这个过程的曲折

  • PCA最小平方误差理论推导

    PCA最小平方误差理论推导PCA求解其实是寻找最佳投影方向,即多个方向的标准正交基构成一个超平面。理论思想:在高维空间中,我们实际上是要找到一个d维超平面,使得数据点到这个超平面的距离平方和最小

    2021年12月30日
  • RJ45网线接口_千兆网线水晶头接几根线

    RJ45网线接口_千兆网线水晶头接几根线RJ45接口通常用于数据传输,最常见的应用为网卡接口。RJ45是各种不同接头的一种类型(例如:RJ11也是接头的一种类型,不过它是电话上用的)。  RJ45头根据线的排序不同,分为有两种T568A,T568B,T568B是橙白、橙、绿白、蓝、蓝白、绿、棕白、棕;T568A是绿白、绿、橙白、蓝、蓝白、橙、棕白、棕;因此使用RJ45接头的线也有两种即:直通线、交叉线。常见的RJ45接口有两类:用于以太网网卡、路由器以太网接口等的DTE类型,还有用于交换机等的DCE类型。DTE我们可以称做“数据终端设备

  • 数据库连接池的好处有哪些_计算机系统坏了怎么修复

    数据库连接池的好处有哪些_计算机系统坏了怎么修复对于一个简单的数据库应用,由于对于数据库的访问不是很频繁。这时可以简单地在需要访问数据库时,就新创建一个连接,用完后就关闭它,这样做也不会带来什么明显的性能上的开销。但是对于一个复杂的数据库应用,情况就完全不同了。频繁的建立、关闭连接,会极大的减低系统的性能,因为对于连接的使用成了系统性能的瓶颈。    连接复用。通过建立一个数据库连接池以及一套连接使用管理策略,使得一个数据库连接可以得

  • vue不适合seo_网站排名优化就要易速达

    vue不适合seo_网站排名优化就要易速达​在开始之前,我们先来了解一下什么是SEO。SEO(SearchEngineOptimization):汉译为搜索引擎优化。是一种方式:利用搜索引擎的规则提高网站在有关搜索引擎内的自然排名。目的是让其在行业内占据领先地位,获得品牌收益。很大程度上是网站经营者的一种商业行为,将自己或自己公司的排名前移。说白了就是你的SEO做的越好,当别人搜索某个关键词时,你的网站在搜索结果中就排的越…

  • 浅析C语言之uint8_t / uint16_t / uint32_t /uint64_t[通俗易懂]

    浅析C语言之uint8_t / uint16_t / uint32_t /uint64_t[通俗易懂]一、C语言基本数据类型回顾在C语言中有6种基本数据类型:short、int、long、float、double、char1、数值类型1)整型:short、int、long2)浮点型:float、double2、字符类型:char二、typedef回顾typedef用来定义关键字或标识符的别名,例如:typedefdoublewages;typedefwage

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号