css3 flex 详解,可以实现div内容水平垂直居中 |
您所在的位置:网站首页 › flex怎么垂直居中 › css3 flex 详解,可以实现div内容水平垂直居中 |
先说一下flex一系列属性: 一、flex-direction: (元素排列方向) ※ flex-direction:row (横向从左到右排列==左对齐) 二、flex-wrap: (内容一行容不下的时候才有效) ※ flex-wrap:nowrap (超出不换行,很奇怪里面的宽度会变成100%) 三、justify-content: (水平对齐方式) ※ flex-start (水平左对齐) 四、align-items: (垂直对齐方式) ※ align-items:stretch; (默认) 还没搞明白基线对齐是什么意思。
以上是对flex的简单介绍。下面有个小例子, 大家经常用到的,某个div里面水平垂直居中, DOCTYPE html> #box{ display: flex; display: -webkit-flex; border: 1px solid #0000FF; height: 200px; width: 400px; align-items:center; justify-content:center; } .item{ width: 50px; height: 40px; border: 1px solid #00C1B3; } 1 2 3 4 5
|
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |