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)


相关推荐

发表回复

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

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