FlexBox简称“弹性盒子”,除了用于实现弹性布局,还可以用来居中内容,改变标记中的源码顺序。首先说明IE9及以下浏览器不支持FlexBox。

.flex{
display:flex;
flex:1;
justify-content:space-between;
}

 这里使用了比较新的语法。但是,要想支持安卓浏览器(v4及以下版本操作系统)和IE10,最终代码得这样写:

.flex {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}

     这些代码一个都不能少,因为近几年来浏览器不断以实验性特性推出新功能,而这些实验性特性都要加“厂商前缀”。每家浏览器厂商都有自己的前缀。比如-ms-是Microsoft, -webkit-是WebKit, -moz-是Mozilla。于是,每个新特性要在所有浏览器中生效,就得写好几遍。首先是带各家厂商前缀的,最后一行才是W3C标准规定的。 下面介绍的都是简写模式。

flex里主要的几个属性:

1、flex-flow:row warp,包含两个属性flex-direction和flex-warp,flex-direction中为column垂直排列,column-reverse垂直反序排列,row横向排列,row-reverse,横向反序排列。

2、align-items:在交叉轴上对齐元素,center:居中定位。flex-start:从父元素起始边开始对齐。flex-end:与flex-start相反。baseline:让Flexbox元素中的所有项沿基线对齐。 stretch:让Flexbox中的所有项(没交叉轴)拉伸至与父元素一样大。
          3、justify-content :在主轴上对齐元素,flex-start,flex-end,center跟上面差不多,不做过多解释,space-between和space-around处理盒子之间的间距,只是space-around在两侧都有间距而space-between中间有间距。

   4、flex:1 1 100px,包含三个属性flex-grow、 flex-shrink和flex-basis,第一个属性指是相对于其他伸缩项,当前伸缩项在空间允许的情况下可以伸展的量。 第二个属性是在空间不够的情况下,当前伸缩项相对于其他伸缩项可以收缩的量。 第三个属性是是伸缩项伸缩的基准值。
   5、align-self:单个元素对齐方式,属性与align-items属性一致。  

   6、order:1,定义元素出场顺序,可以为负数,负数排在最前面。

  关于Flexbox的对齐,最重要的是理解坐标轴。有两个轴,“主轴”和“交叉轴”。这两个轴代表什么取决于Flexbox排列的方向。比如,如果将Flexbox的方向设置为row,则主轴就是横轴,而交叉轴就是纵轴。
反之,如果Flexbox的方向是column,则主轴就是纵轴,而交叉轴为横轴。

 关于响应式设计推荐一本书《响应式Web设计+HTML5和CSS3实战+第2版》。

 

学习笔记flexbox新布局的更多相关文章

  1. 【前端】移动端Web开发学习笔记【2】 & flex布局

    上一篇:移动端Web开发学习笔记[1] meta标签 width设置的是layout viewport 的宽度 initial-scale=1.0 自带 width=device-width 最佳实践 ...

  2. amazeui学习笔记--css(常用组件3)--按钮组Button-group

    amazeui学习笔记--css(常用组件3)--按钮组Button-group 一.总结 1.按钮组用法:把一系列要使用的 .am-btn 按钮放入 .am-btn-group . 2.按钮工具栏: ...

  3. React Native 学习笔记--进阶(二)--动画

    React Native 进阶(二)–动画 动画 流畅.有意义的动画对于移动应用用户体验来说是非常必要的.我们可以联合使用两个互补的系统:用于全局的布局动画LayoutAnimation,和用于创建更 ...

  4. js学习笔记:webpack基础入门(一)

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  5. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  6. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

  7. 2014年暑假c#学习笔记目录

    2014年暑假c#学习笔记 一.C#编程基础 1. c#编程基础之枚举 2. c#编程基础之函数可变参数 3. c#编程基础之字符串基础 4. c#编程基础之字符串函数 5.c#编程基础之ref.ou ...

  8. JAVA GUI编程学习笔记目录

    2014年暑假JAVA GUI编程学习笔记目录 1.JAVA之GUI编程概述 2.JAVA之GUI编程布局 3.JAVA之GUI编程Frame窗口 4.JAVA之GUI编程事件监听机制 5.JAVA之 ...

  9. seaJs学习笔记2 – seaJs组建库的使用

    原文地址:seaJs学习笔记2 – seaJs组建库的使用 我觉得学习新东西并不是会使用它就够了的,会使用仅仅代表你看懂了,理解了,二不代表你深入了,彻悟了它的精髓. 所以不断的学习将是源源不断. 最 ...

随机推荐

  1. 修改testng源码,添加beforeMethod和afterMethod中的日志到test中(可以不改源码,废弃)

    在使用testng生成报告的时候,只会记录test方法中的日志,但是一般会在beforeMethod.beforeTest.afterMethod.afterTest中做一下数据的处理,这里面的日志没 ...

  2. Linux I2C驱动--用户态驱动简单示例

    1. Linux内核支持I2C通用设备驱动(用户态驱动:由应用层实现对硬件的控制可以称之为用户态驱动),实现文件位于drivers/i2c/i2c-dev.c,设备文件为/dev/i2c-0 2. I ...

  3. Linux安装python3.6.3

    一: (1)wget https://www.python.org/ftp/python/3.6.3/Python-3.6.3.tgz 下载安装包 (可以到网站下载,然后上传到Linux) (2)ta ...

  4. vue使用nprogress页面加载进度条

    vue使用nprogress页面加载进度条 NProgress是页面跳转是出现在浏览器顶部的进度条 官网:http://ricostacruz.com/nprogress/ github:https: ...

  5. MongoDB实战开发

    [目标]:本文将以实战的形式,向您展示如何用C#访问MongoDB,完成常见的数据库操作任务, 同时,也将介绍MongoDB的客户端(命令行工作模式)以及一些基础的命令. [说明]:MongoDB是什 ...

  6. WCF系列教程之WCF消息交换模式之单项模式

    1.使用WCF单项模式须知 (1).WCF服务端接受客户端的请求,但是不会对客户端进行回复 (2).使用单项模式的服务端接口,不能包含ref或者out类型的参数,至于为什么,请参考C# ref与out ...

  7. lucene关于IndexReader总结

    IndexReader.使用过程中有时会出现document被删除,reader还是原来的reader没有改变,所以使用openifchanged保证, 又因为IndexReader 初始化很耗费资源 ...

  8. 【JS】逻辑运算符 非! 与&& 或||

    JS中的逻辑运算符在处理布尔值的判断时,和其他语言没有什么不同,不过在处理对象时,就需要好好梳理记忆下了. 逻辑非(!) 如果一个操作数是一个对象,返回false; 如果一个操作数是一个空字符串,返回 ...

  9. Python 如何计算当前时间减少或增加一个月

    问题 今天在之前的代码中发现了一个bug,有个计算当前时间减少一个月的函数,其报出下面的异常信息: ValueError: day is out of range for month 看一下代码: i ...

  10. zato——Channels Outgoing connections

    Channels,服务获得请求.方式 AMQP JMS WebSphere MQ plain HTTP SOAP ZeroMQ 其中,只有HTTP是同步的 Plain HTTP和SOAP暴漏服务直接通 ...