css3 flex 详解,可以实现div内容水平垂直居中
先说一下flex一系列属性：
一、flex-direction: （元素排列方向）
※ flex-direction:row （横向从左到右排列==左对齐）
※ flex-direction:row-reverse （与row 相反）
※ flex-direction:column （从上往下排列==顶对齐）
※ flex-direction:column-reverse （与column 相反）
二、flex-wrap: （内容一行容不下的时候才有效）
※ flex-wrap:nowrap （超出不换行，很奇怪里面的宽度会变成100%）
※ flex-wrap:wrap （超出按父级的高度平分）
※ flex-wrap:wrap-reverse（与wrap 相反）
三、justify-content: （水平对齐方式）
※ flex-start （水平左对齐）
※ justify-content:flex-end; （水平右对齐）
※ justify-content:center; （水平居中对齐）
※ justify-content:space-between; （两端对齐）
※ justify-content:space-around; （两端间距对其）
四、align-items: （垂直对齐方式）
※ align-items:stretch; （默认）
※ align-items:flex-start; （上对齐，和默认差不多）
※ align-items:flex-end; （下对齐）
※ align-items:center;（居中对齐）
※ align-items:baseline; （基线对齐）
还没搞明白基线对齐是什么意思。
以上是对flex的简单介绍。下面有个小例子，
大家经常用到的，某个div里面水平垂直居中，
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#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;
}
</style>
</head>
<body>
<div id="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</body>
</html>
css3 flex 详解,可以实现div内容水平垂直居中的更多相关文章
- div 内容水平垂直居中
对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...
- 转：【译】CSS3:clip-path详解
我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...
- linux下sort命令使用详解---linux将文本文件内容加以排序命令
转载自:http://www.cnblogs.com/hitwtx/archive/2011/12/03/2274592.html linux下sort命令使用详解---linux将文本文件内容加以排 ...
- div盒子水平垂直居中方法
文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...
- div盒子水平垂直居中的方法推荐
父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...
- css的div动态水平垂直居中
div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...
- CSS3属性详解（图文教程）
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...
- css怪异盒模型和弹性盒布局(flex)详解及其案例
一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...
- CSS3过渡详解-遁地龙卷风
第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...
随机推荐
- tomcat8版本实现虚拟主机
vim /etc/hosts192.168.30.21 www.crushlinux.com192.168.30.21 www.cloud.com [root@localhost ~]# cd ...
- python PIL图像处理-图片上添加文字
首先需要安装库pillow cmd安装命令:pip install pillow 安装完后,编写脚本如下: from PIL import Image, ImageDraw, ImageFont de ...
- 创建对象—从es5到es6
原文地址 本文主要讲述了使用JavaScript创建对象的几种方式,分别是传统的Object构造函数.对象字面量.工厂模式.构造函数模式.原型模式.组合模式,以及es6的class定义类.然后从bab ...
- [bzoj3029] 守卫者的挑战 (概率期望dp)
传送门 Description 打开了黑魔法师Vani的大门,队员们在迷宫般的路上漫无目的地搜寻着关押applepi的监狱的所在地.突然,眼前一道亮光闪过."我,Nizem,是黑魔法圣殿的守 ...
- Linux思维导图之用户、组和权限
安全3A: Authenticanion认证:验证用户身份; 授权授权;依据身份进行不同权利的分配.Acouting | 劲舞团审计:监督工作. user:id -u 令牌:(护符)ID号 .Linu ...
- python-写入csv 文件
项目要做一个导出客户信息的功能,需要写入csv: 注意文件写入的方式 例如 write open(‘w’) 从头开始写,之前写的会被替换 write open(‘a’) 则代表追加,文件指针放 ...
- NOIP 2016 换教室（期望dp）
第一次做期望dp 并不知道每个阶段的期望之和就是整个的期望之和 所以一直卡在这 期望=代价*概率 然后注意只有申请了才算期望,否则按原来的. 这道题和前几个课程,申请的限制,当前选或不选,有关 这样很 ...
- HDU 3644
模拟退火算法.... 这道题,呃.我怎么感觉他就是随机的.同一个代码,时而AC,时而WA.其实还真的是随机的.呵呵呵呵呵...因为下降火太快了,没办法,而降得慢又会...TLE,虽然精度提高了. 敢问 ...
- iOS 8 模糊视图(毛玻璃效果)的简单实现UIVisualEffectView
在须要模糊的UIView上.加入一个UIVisualEffectView对象就可以. 效果例如以下图: 代码例如以下: UIImageView *imageview = [[UIImageViewal ...
- HDU 5380 Travel with candy 单调队列
pid=5380">链接 题解链接:http://www.cygmasot.com/index.php/2015/08/16/hdu_5380 题意: n C 一条数轴上有n+1个加油 ...