先说一下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内容水平垂直居中的更多相关文章

  1. div 内容水平垂直居中

    对于前端布局来说.总有一些图片水平垂直居中老是不好看,影响整体美观,百度一大堆各种自适应方法,终于找到了一种比较简单,适用于所有场景的方法.. 1.对于布局来说.一个div搞定. <div id ...

  2. 转:【译】CSS3:clip-path详解

    我的一个学生,Heather Banks,想要实现他在Squarespace看到的一个效果: 根据她的以往经验,这个网站的HTML和CSS是完全在她的能力范围以内,于是我帮助她完成了这个效果.显示na ...

  3. linux下sort命令使用详解---linux将文本文件内容加以排序命令

    转载自:http://www.cnblogs.com/hitwtx/archive/2011/12/03/2274592.html linux下sort命令使用详解---linux将文本文件内容加以排 ...

  4. div盒子水平垂直居中方法

    文章转载自:div盒子水平垂直居中的方法 - 雪明瑶 这个问题比较老,方法比较多,各有优劣,着情使用. 一.盒子没有固定的宽和高 方案1.Transforms 变形 这是最简单的方法,不仅能实现绝对居 ...

  5. div盒子水平垂直居中的方法推荐

    父盒子是position:relative 方法一:(宽高确定) div绝对定位水平垂直居中[margin 负间距], 方法二: (宽高确定) div绝对定位水平垂直居中[margin:auto实现绝 ...

  6. css的div动态水平垂直居中

      div动态水平垂直居中,思路如下: (1)先定位.如果相对于距离最近的父元素,用absolute:如果相对于body,用fixed. (2)然后,top和left都设为50%. (3)要居中的di ...

  7. CSS3属性详解(图文教程)

    本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一 ...

  8. css怪异盒模型和弹性盒布局(flex)详解及其案例

    一.怪异盒模型 怪异盒模型的属性是box-sizing,他有两个属性值: 1.content-box 这是由 CSS2.1 规定的宽度高度行为.宽度和高度分别应用到元素的内容框.在宽度和高度之外绘制元 ...

  9. CSS3过渡详解-遁地龙卷风

    第二版 0.环境准备 (1)过渡需要浏览器的支持,使用这些属性要加上浏览器厂商的前缀,我用的chrome49已经不需要前缀了, -o- Opera -webkit- Safari.Chrome -mo ...

随机推荐

  1. Qt中采用多线程实现Socket编程

    Socket通常也称作"套接字",应用程序通常通过"套接字"向网络发出请求或者应答网络请求. 本文介绍的是Qt中采用多线程Socket编程,由于工作的需要,开始 ...

  2. PAT_A1147#Heaps

    Source: PAT A1147 Heaps (30 分) Description: In computer science, a heap is a specialized tree-based ...

  3. SSO 单点登录解决方案

    转自:http://www.blogjava.net/Jack2007/archive/2014/03/11/191795.html 1 什么是单点登陆      单点登录(Single Sign O ...

  4. Java中indexof()的使用

    Java中字符串中子串的查找共有四种方法(indexof()) indexOf 方法返回一个整数值,指出 String 对象内子字符串的开始位置.如果没有找到子字符串,则返回-1. 如果 starti ...

  5. mysql use index () 优化查询的例子

    USE INDEX在你查询语句中表名的后面,添加 USE INDEX 来提供你希望 MySQ 去参考的索引列表,就可以让 MySQL 不再考虑其他可用的索引.Eg:SELECT * FROM myta ...

  6. 第五节、矩阵分解之LU分解

    一.A的LU分解:A=LU 我们之前探讨过矩阵消元,当时我们通过EA=U将A消元得到了U,这一节,我们从另一个角度分析A与U的关系 假设A是非奇异矩阵且消元过程中没有行交换,我们便可以将矩阵消元的EA ...

  7. 【ACM】nyoj_540_奇怪的排序_201308050951

    奇怪的排序时间限制:1000 ms  |  内存限制:65535 KB 难度:1描述 最近,Dr. Kong 新设计一个机器人Bill.这台机器人很聪明,会做许多事情.惟独对自然数的理解与人类不一样, ...

  8. 洛谷——P2038 无线网络发射器选址

    https://www.luogu.org/problem/show?pid=2038 题目描述 随着智能手机的日益普及,人们对无线网的需求日益增大.某城市决定对城市内的公共场所覆盖无线网. 假设该城 ...

  9. ps -ef与ps aux的区别

    ps -ef与ps aux的区别 学习:http://www.linuxidc.com/Linux/2016-07/133515.htm ps aux可以查看其内存使用情况:

  10. 汉澳sinox2014x64server已经能够下载

    大家快去下载,用迅雷快速下载 下载地址 ftp://sinox.3322.org/sinox2014x64server.img 已经能够下载 ftp://sinox.3322.org/sinox201 ...