Flex-box 学习
.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 学习的更多相关文章
- Flex box弹性布局 及 响应式前端设计的优化
Flex box弹性布局 Flex box是CSS3新添加的一种模型属性,它的出现有力的打破了我们常常使用的浮动布局.实现垂直等高.水平均分.按比例划分,可以实现许多我们之前做不到的自适应布局.如果你 ...
- flex box 布局
.box{ display:flex; } .box { display: inline-flex; } .box { display:-webkit-flex; display: flex; } f ...
- CSS弹性盒模型(flex box)
本文介绍的是 CSS3 规范中引入的新布局模型:弹性盒模型(flex box).随着响应式用户界面的流行,Web 应用一般都要求适配不同的设备尺寸和浏览器分辨率. 浏览器支持: 弹性盒布局的容器(fl ...
- CSS3 Flex Box(弹性盒子)
CSS3 Flex Box(弹性盒子) 一.简介 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及 ...
- flex 布局学习
flex 布局学习 寻根溯源话布局 一切都始于这样一个问题:怎样通过 CSS 简单而优雅的实现水平.垂直同时居中.记得刚开始学习 CSS 的时候,看到 float 属性不由得感觉眼前一亮,顺理成章的联 ...
- CSS3弹性盒子(Flex Box)
CSS3弹性盒子(Flex Box) 一.容器的属性:flex-directionflex-wrapflex-flowjustify-contentalign-itemsalign-content 1 ...
- CSS3-弹性盒布局(Flex Box)
弹性盒布局(Flex Box) 一.概念 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型 ...
- CSS3新属性之---flex box布局实例
flex box布局实例 flex的强大之处在于不管什么布局,几行命令即可实现 /*本节模板div元素(代表骰子的一个面)是Flex容器,span元素(代表一个点)是Flex项目.如果有多个项目,就要 ...
- css3之弹性盒模型(Flex Box)
CSS3 弹性盒子(Flex Box) 弹性盒子是 CSS3 的一种新的布局模式. CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时 ...
- 弹性盒子Flex Box滚动条原理,避免被撑开,永不失效
在HTML中,要实现区域内容的滚动,只需要设定好元素的宽度和高度,然后设置CSS属性overflow 为auto或者scroll: 在Flex box布局中,有时我们内容的宽度和高度是可变的,无法 ...
随机推荐
- linux man使用方法 和centos安装中文man包 --转
http://blog.chinaunix.net/uid-25100840-id-302308.html 这两天学习<linux设备驱动程序开发详解>中的异步通知,其中有一个fcntl( ...
- 分布式缓存技术redis学习(一)——redis简介以及linux上的安装
redis简介 redis是NoSQL(No Only SQL,非关系型数据库)的一种,NoSQL是以Key-Value的形式存储数据.当前主流的分布式缓存技术有redis,memcached,ssd ...
- java中set和get方法的理解
对于JAVA初学者来说,set和get这两个方法似乎已经很熟悉了,这两个方法是JAVA变成中的基本用法,也是出现频率相当高的两个方法. 为了让JAVA初学者能更好的理解这两个方法的使用和意义,今天笔者 ...
- javascript冷知识
本人很少写博客,所以文笔很不好,如果解释的不够清楚的,欢迎点评 1.+号(一元加操作符): 如果放在数值前的话,对数值不会产生任何影响,不过放在其他的数据类型前面的话,就等于调用number()将他转 ...
- JQuery实现回车代替Tab键(按回车跳到下一栏)
一个提交按钮以后,用户如果按了键盘的回车键,默认情况下,就会提交这个表单了.这样对于用户输入各个表单项目,用户体验很不好,输入完一个项目,或者用鼠标选择下一个项目,或者用键盘的Tab键选中下一个项目. ...
- json,xml,Html解析
1.json解析 javabean文件 public class TopNewsDetails { public String retcode; public Data data; public cl ...
- XACML-PolicySet与request结构简介
本文由@呆代待殆原创,转载请注明出处. 一.PolicySet的结构 PolicySet 的基本嵌套结构如上图所示,下面让我们一个一个来说明. PolicySet:XACML策略架构的顶层元素,由Po ...
- framework&&library's root
框架和文件集合的路径应该是相对路径而不是绝对路径 写法如下图所示:
- (四)u-boot2013.01.01 for TQ210:《mkconfig分析》
config.mk主要功能是配置单板信息和编译环境,将会被u-boot的makefile所调用,本文仍然侧重于句法分析. ####################################### ...
- JAX-WS开发WebService程序
近来公司里要用的到WebService做开发,所以就自己学习了一下,刚开始感觉挺难的,但是真正学会以后,原来这么简单. 今天把这些东西哦记下来,以便日后的复习. 我来介绍一下我的开发环境:Eclips ...