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内部子元素垂直居中内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
最近一直在捣鼓如何搭建React组件库,至于为什么会产生这个想法,主要是因为组件...
WAP 的主页与 HTML 的主页非常不同。用于 WAP 的标记语言是 WML (Wireless Marku...
自己想插入一张喜欢的图片作为这个网站的背景,但又不知道怎么操作,所以下面小...
网制作网页的时候,需要选择男女,所以需要添加下拉菜单,今天我们就来看看dw制...
使用Adobe Dreamweaver时,在代码视图里, 如果有中文, 用鼠标点击时, 光标的落位...
在很多项目中,配置文件是不可缺少的,一般配置文件会用变量或者数组进行设置,...
面试血泪史 不要问我面的是不是架构师。我只是面的低级前端。总结不易点个赞吧。...
任务 (task) 定义了事件发生时所执行的动作,比如在输入一个卡片或选择一个链接...
1.我不会挽留任何一个企图离开我的人,你是例外。 2.有些记忆,注定无法抹去,...
效果:标题自带序号,代码块配色,代码块左上角仿mac图标 先打开主题文件夹 文件...