.flex-cont{
/*定义为flexbox的“父元素”*/
display: -webkit-box;
display: -webkit-flex;
display: flex;
/*子元素沿主轴对齐方式居中*/
-webkit-box-pack: center;
-webkit-justify-content: center;
justify-content: center;
/*子元素沿侧轴对齐方式垂直居中*/
-webkit-box-align: center;
-webkit-align-items: center;
align-items: center;
/*指定主轴的伸缩流方向是纵向的*/
-webkit-box-orient:vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
flex-direction: column;
}
.flex-item{
/*不要给flexbox里的子元素设置“margin:auto”的属性,在部分安卓机下,它会导致该元素的宽度撑开到100%占位*/
/*在旧版的规范中,使用比例伸缩布局时,子元素的内容长短不同会导致无法“等分”,这个时候,我们需要给子元素设置一个“width:0%”来解决问题*/
width: 0%;
/*给“子元素”赋予自由伸缩的能力*/
-webkit-box-flex:;
-webkit-flex:;
flex:;
}

See the Pen NqMwBN by Leo (@MrLeo) on CodePen.

.icons{
/*flex-box布局,子元素可以按需缩放*/
display: -webkit-box;
display: -moz-box;
display: -ms-box;
display: -o-box;
display: box;
/*flex-box布局,子元素可以按需缩放*/
display: -webkit-flex;
display: -moz-flex;
display: -ms-flex;
display: -o-flex;
display: flex;
/*row表示横向排列,wrap表示可以多行显示*/
-webkit-flex-flow:row wrap;
-moz-flex-flow:row wrap;
-ms-flex-flow:row wrap;
-o-flex-flow:row wrap;
flex-flow:row wrap;
}
.icons .ico{
/*flex:1;兼容旧版flex的形式*/
-webkit-box-flex:;
-moz-box-flex:;
-ms-box-flex:;
-o-box-flex:;
box-flex:;
/*flex:auto;自适应*/
-webkit-flex:1 0 auto;
-moz-flex:1 0 auto;
-ms-flex:1 0 auto;
-o-flex:1 0 auto;
flex:1 0 auto;
}

Flex-box 学习的更多相关文章

  1. Flex box弹性布局 及 响应式前端设计的优化

    Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...

  2. flex box 布局

    .box{ display:flex; } .box { display: inline-flex; } .box { display:-webkit-flex; display: flex; } f ...

  3. CSS弹性盒模型(flex box)

    本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...

  4. CSS3 Flex Box(弹性盒子)

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

  5. flex 布局学习

    flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...

  6. CSS3弹性盒子(Flex Box)

    CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...

  7. CSS3-弹性盒布局(Flex Box)

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

  8. CSS3新属性之---flex box布局实例

    flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...

  9. css3之弹性盒模型(Flex Box)

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

  10. 弹性盒子Flex Box滚动条原理,避免被撑开,永不失效

    在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll:   在Flex box布局中,有时我们内容的宽度和高度是可变的,无法 ...

随机推荐

  1. keytool 错误 java.io.IOException: incorrect AVA format

    给一个APK做签名,选择新建一个key并填写相关信息,但在Finish时,keytool报出了一个错误:keytool error: java.io.IOException: Incorrect AV ...

  2. iOS “请在微信客户端打开链接” UIWebview加载H5页面携带session、cookie、User-Agent信息 设置cookie、清除cookie、设置User-Agent

    公司新开的一个项目..内容基本上是加载H5页面显示..当时觉得挺简单的..后来发现自己掉坑里了..一些心理历程就不说了..说这个项目主要用到的知识点吧..也是自己踩得坑. 首先说说..这个项目上的内容 ...

  3. IOS 区分缓存 内存 物理存储 逻辑存储

    1. 存储器分为内部存储器(内存)和外部存储器(外存). ①内存 内存是电脑内部临时存放数据的地方,供CPU直接读取,存放在其中的数据要靠电来维持,一旦断电就会丢失.因此,在操作电脑时,应及时地将需要 ...

  4. C# PageLayoutControl的基本操作

    来自:http://www.cnblogs.com/shenchao/p/3594394.html using System; using System.Collections.Generic; us ...

  5. sphinx-2.2.10-1.rhel6.x86_64 rpm包安装的位置

    /etc/logrotate.d/sphinx /etc/rc.d/init.d/searchd/etc/sphinx/etc/sphinx/sphinx.conf/usr/bin/indexer/u ...

  6. centos下添加环境变量和启动apache

    #修改环境变量文件 vi /etc/profile #文件内容末尾添上 PATH=/usr/local/php/bin:$PATH export PATH #修改后让环境变量生效 source /et ...

  7. [原创] Web UI 自动化日期控件的处理

    序 在构建自动化套件的过程中,日期操作是一件很重要也很频繁的事情.有的日期控件的div层级结构复杂,同一个类型的日期控件在多个子系统中的表现形式也大相径庭.多数工程师为了避免重复的工作,会封装抽象一个 ...

  8. [Android 开源项目学习]Android的UITableView(1)

         最近由于项目加急,手里有好多看了差不多的开源项目,其中好多是大家经常用到的.图片的缓存BitmapFun(Android的文档中),AfinalMap,下拉刷新PullToRefresh等等 ...

  9. 深入浅出ExtJS 第二章 Ext框架基础

    2.1 面向对象的基础架构(对象模型) 2.1.1 创建类 >.定义一个类: Ext.define('demo.Demo',{ name:'Lingo', hello:function () { ...

  10. Ubuntu 15.04 安装 Nvidia Quadro系列显卡驱动

    在这之前,我用的Ubuntu都是系统自带的驱动, 由于分辨率没有任何问题, 所以一直没有安装Nvidia官方的驱动; 近期更新到 15.04 之后, 在播放avi 格式的常规视频时却出现闪烁的现象, ...