Flex合理布局完成div內部子原素竖☀直垂直居中的

2021-03-23 14:43 jianzhan

1、Flex是Flexible Box的简称,意思是”延展性合理布局”,用于为盒状实体模型出示较大的灵便性。一切一个器皿都可以以特定为Flex合理布局。留意,设成Flex合理布局之后,子原素的float、clear和vertical-align特性将无效。

       选用Flex合理布局的原素,称之为Flex器皿(flex container),通称”器皿”。它的全部子原素全自动变成器皿组员,称之为Flex新项目(flex item),通称”新项目”。器皿默认设置存有二根轴:水准的主轴(main axis)和竖直的交叉式轴(cross axis)。主轴的刚开始部位(与外框的交叉式点)称为main start,完毕部位称为main end;交叉式轴的刚开始部位称为cross start,完毕部位称为cross end。新项目默认设置沿主轴排序。单独新项目占有的主轴室内空间称为main size,占有的交叉式轴室内空间称为cross size。

flex-direction   flex-wrap     flex-flo   justify-conten  align-items   align-content

2、块内原素竖直垂直居中完成

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>有关原素竖直垂直居中</title>
    <style>
        html, body {
            border: 0;
            margin: 0;
            padding: 0;
            height: 100%;
            width: 100%;
        }
 
        .div-main {
            display: flex;
            align-items: center;
            justify-content: center;
            height: 30%;
            width: 50%;
            background: #00a2d4;
        }
 
        .sub-span {
            margin: auto;
            font-size: xx-large;
        }
 
    </style>
</head>
 
<body>
 
<div class="div-main">
 
    <span class="sub-span">
    洛神赋
    </span>
</div>
</body>
</html>

 

到此这篇有关Flex合理布局完成div內部子原素竖直垂直居中的实例的文章内容就详细介绍到这了,大量有关Flex div內部子原素竖直垂直居中內容请检索脚本制作之家之前的文章内容或再次访问下边的有关文章内容,期待大伙儿之后多多的适用脚本制作之家!