1、Flex是Flexible Box的缩写，意为]弹性布局]，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vert ical -align属性将失效。
&nbs p; 采用Flex布局的元素，称为Flex容器（flex cont ai ner），简称]容器]。它的所有子元素自动成为容器成员，称为Flex项目（flex IT em），简称]项目]。容器默认存在两根轴：水平的主轴（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 -i tems align-content
2、块内元素垂直居中实现
<!DOCTY PE ht ML >
<html lang="en">
<head>
< ;m eta charset="UTF-8">
<title>关于元素垂直居中</title>
<style>
html, body {
border: 0;
m arg in: 0;
padding: 0;
h ei ght: 100%;
width: 100%;
}
.div-main {
dis play : flex;
align-items: center ;
justify-content: center;
height: 30%;
width: 50%;
background: # 00a2d4;
}
.s ub -s pan {
mar gin : auto;
font- Size: xx-large;
}
</style>
</head>
<body>
<div class="div-main">
<span class="sub-span">
洛神赋
</span>
</div>
</body>
</html>
到此这篇关于Flex布局实现div内部子元素垂直居中的示例的 文章 就介绍到这了,更多相关Flex div内部子元素垂直居中内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
总结
以上是 为你收集整理的 Flex布局实现div内部子元素垂直居中的示例 全部内容，希望文章能够帮你解决 Flex布局实现div内部子元素垂直居中的示例 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于Flex布局实现div内部子元素垂直居中的示例的详细内容...