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 ...
随机推荐
- Qt中采用多线程实现Socket编程
Socket通常也称作"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 本文介绍的是Qt中采用多线程Socket编程,由于工作的需要,开始 ...
- PAT_A1147#Heaps
Source: PAT A1147 Heaps (30 分) Description: In computer science, a heap is a specialized tree-based ...
- SSO 单点登录解决方案
转自:http://www.blogjava.net/Jack2007/archive/2014/03/11/191795.html 1 什么是单点登陆 单点登录(Single Sign O ...
- Java中indexof()的使用
Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回-1. 如果 starti ...
- mysql use index () 优化查询的例子
USE INDEX在你查询语句中表名的后面,添加 USE INDEX 来提供你希望 MySQ 去参考的索引列表,就可以让 MySQL 不再考虑其他可用的索引.Eg:SELECT * FROM myta ...
- 第五节、矩阵分解之LU分解
一.A的LU分解:A=LU 我们之前探讨过矩阵消元,当时我们通过EA=U将A消元得到了U,这一节,我们从另一个角度分析A与U的关系 假设A是非奇异矩阵且消元过程中没有行交换,我们便可以将矩阵消元的EA ...
- 【ACM】nyoj_540_奇怪的排序_201308050951
奇怪的排序时间限制:1000 ms | 内存限制:65535 KB 难度:1描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一样, ...
- 洛谷——P2038 无线网络发射器选址
https://www.luogu.org/problem/show?pid=2038 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城 ...
- ps -ef与ps aux的区别
ps -ef与ps aux的区别 学习:http://www.linuxidc.com/Linux/2016-07/133515.htm ps aux可以查看其内存使用情况:
- 汉澳sinox2014x64server已经能够下载
大家快去下载,用迅雷快速下载 下载地址 ftp://sinox.3322.org/sinox2014x64server.img 已经能够下载 ftp://sinox.3322.org/sinox201 ...