display:flex;

align-items://水平对齐方式

justify-content://垂直对齐方式

flex://盒子所占大小(如果你盒子里面只有两个div，那么你设置其中之一个flex，那么另外一个会自动填充)

CSS3 flex的使用方法的更多相关文章

  1. css3 flex流动自适应响应式布局样式类

    1.再说css3 flex 一旦一个容器赋予了display:flex属性,将会有以下特点: 项目无法设置浮动. 列表的样式会被清除. 无法使用vertical-align设置垂直对齐方式. 目前互联 ...

  2. 判断浏览器是否支持某个css3属性的javascript方法

    判断浏览器是否支持css3某个属性的方法: /** * 判断浏览器是否支持某一个CSS3属性 * @param {String} 属性名称 * @return {Boolean} true/false ...

  3. CSS3 Flex布局整理(三)-项目属性

    一.Flex布局中 Flex Item属性控制,可以指定显示顺序.剩余空间的放大,缩小.交叉轴的排列 1.order:定义项目的排列顺序,数值越小,排列越靠前,默认为0.类似z-index 2.fle ...

  4. CSS3 Flex布局整理(二)-容器属性

    一.Flex容器属性介绍 1.flex-flow :水平或垂直方向上的流动方式,包裹处理,其中包括了flex-direction属性和flex-wrap属性. 2.justify-content:定义 ...

  5. CSS3 Flex布局整理(一)

    一.说明 1.在以往的布局方案中,都是基于盒装模型,依赖display属性+position属性+float属性等. 他对于那些特殊布局非常不方便,比如,垂直居中等. 并且不同浏览器的盒模型还有些差异 ...

  6. CSS3 Flex Box（弹性盒子）

    CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...

  7. CSS3 Flex布局（伸缩布局盒模型）学习

    CSS3 Flex布局(伸缩布局盒模型)学习 转自:http://www.xifengxx.com/web-front-end/1408.html CSS2定义了四种布局:块布局.行内布局.表格布局盒 ...

  8. CSS3 Flex布局（项目）

    一.order属性 order属性定义项目的排列顺序.数值越小,排列越靠前,默认为0. 二.flex-grow属性 flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大. ...

  9. CSS3 Flex布局（容器）

    一.flex-direction属性 row(默认值):主轴为水平方向,起点在左端. row-reverse:主轴为水平方向,起点在右端. column:主轴为垂直方向,起点在上沿. column-r ...

随机推荐

  1. Mediator 中介者 MD

    中介者模式 简介 用一个中介者对象封装一系列的对象交互,中介者使各对象不需要显示地相互作用,从而使耦合松散,而且可以独立地改变它们之间的交互. 中介者模式也称为调解者模式或者调停者模式. 当程序存在大 ...

  2. 配置Tomcat apr运行模式

    tomcat中一共有三种运行模式,分别是:bio,nio,apr bio是阻塞式IO操作,使用的是传统的java i/o处理方式,对于每一个请求都要创建一个线程来进行处理,所以开销较大不适合处理高并发 ...

  3. 解决EditPlus在设置了UTF-8之后，编写的HTML页面仍出现汉字乱码问题

    解决EditPlus在设置了UTF-8之后.编写的HTML页面仍出现汉字乱码问题   相信有些同学在使用EditPlus编写HTML页面时发现,尽管已经设置好了UTF-8的编码格式.但却发现HTML页 ...

  4. Kafka：ZK+Kafka+Spark Streaming集群环境搭建（十八）ES6.2.2 增删改查基本操作

    #文档元数据 一个文档不仅仅包含它的数据 ,也包含 元数据 —— 有关 文档的信息. 三个必须的元数据元素如下:## _index    文档在哪存放 ## _type    文档表示的对象类别 ## ...

  5. mysql生成不重复随机数(unique number generation)

    转自:http://blog.csdn.net/dreamer2020/article/details/52049629 问题来源 业务中有时会遇到要生成不重复随机数的情况,例如,新生成一个商品编号. ...

  6. maven 打包可执行jar的方法

    转自:http://blog.csdn.net/johnnywww/article/details/7964326 1.修改pom.xml增加如下内容 <plugin> <group ...

  7. Linux中10个有用的命令行补齐命令

    本文转自GeekFan,感觉确实比较极客范啊,[TAB][TAB]补全都知道,但是你知道可以定制化补全吗? ---------------------------------------------- ...

  8. css背景全屏-视差

    <!DOCTYPE html> <html> <head> <title></title> <style> *{margin:0 ...

  9. 我的webrequest经验

    1 webrequest 是什么:编程方式模拟web请求,利用webrequest可以实现 相当于一个浏览器请求一个网页的效果,但是它始终是模拟请求, 与浏览器输入框输入网址请求不一样. 2 程序设计 ...

  10. Java 代码行统计（转）

    package codecounter; import java.io.BufferedReader; import java.io.File; import java.io.FileNotFound ...