大概了解了flexbox
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>FLEX</title>
</head>
<body>
<style>
footer{
display:flex;
flex-flow:row wrap;
align-items: stretch;
/*
justify-content : flex-end;
主轴排列方式
*/
/*
justify-content : flex-start;
*/
justify-content : center;
/*
justify-content : space-between;
*/ align-content : flex-start;
/*
侧轴排列方式
flex-end ： 开头
center 中心
space-between 均匀排列
space-around 另一种均匀排列
stretch 伸缩排列
*/
}
div{
/*
flex: 1 0 7rem;
width:15%;
*/
}
div:nth-child(1){
/*flex和在sencha里面的flex一样的
flex-grow flex-shrink flex-basis;
*/
flex : 1;
}
div:nth-child(2){
/*
在不改变结构的情况下，更改页面排列方式
*/
order : 1;
flex : 2
}
</style>
<!--
神奇的flex布局..
-->
<footer>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</footer>
</body>
</html>
大概了解了flexbox的更多相关文章
- 原来 flexbox 是这么工作的
Flexbox 是一种 CSS 布局机制,可以说是目前浏览器原生支持的最好.使用最广泛的布局机制了.本文通过一些例子来说明 Flexbox 布局的工作原理,可以让我们更好的使用 Flexbox. 与 ...
- Flexbox 自由的布局
css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...
- CSS3 Flexbox轻松实现元素的水平居中和垂直居中
CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...
- React Native FlexBox
FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...
- flexbox布局神器
前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...
- [译]flexbox全揭秘
原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...
- （转）详解css3弹性盒模型（Flexbox)
今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...
- CSS3 Flexbox不迷路指南
Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...
- 【前端攻略】最全面的水平垂直居中方案与flexbox布局
最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...
随机推荐
- 分层开发(MySchool总结)
由于分层之间存在各层之间的关系窗体之间的方法跳转,故有需要者可以进行下载本地文件 MySchool.rar 3304KB 5/22/2016 9:43:28 AM ,代码中有注释, 上述代码,属个人所 ...
- android strings.xml 报 is not translated in af,
57 down vote In your ADT go to window->Preferences->Android->Lint Error Checking Find there ...
- YII获取刚插入数据的id主键
单条数据时model->attributes['id']; 循环插入时使用 Yii::app()->db->getLastInsertID() 获取 循环插入时需要每次插入后重置 m ...
- Centos中yum方式安装java
查看CentOS自带JDK是否已安装.◆输入:yum list installed |grep java. 若有自带安装的JDK,如何卸载CentOS系统自带Java环境?◆卸载JDK相关文件输入:y ...
- jenkins忘记管理员登陆密码的补救措施
jenkins可以作为我们日常运维过程中代码上线的发版平台,所以对jenkins的安全可靠的维护是十分重要的. 1)在登陆jenkins的时候,如果忘记普通用户的登陆密码,只要能用管理员账号登陆,还可 ...
- 关于Java多态
什么是多态 同一个实现接口,使用不同的实例而执行不同的操作 子类转换成父类的规则: *将一个父类的引用指向一个子类对象时,称为上转型,自动进行类型转换 *此时通过父类引用变量调用的方法是子类覆盖或继承 ...
- bootstrap和jquery mobile的对比
最近一直在研究bootstrap这东西,确实是个好的框架,但是诸多优势背后也隐藏着一些不好的地方,对此,我把它和另一套响应式框架jquery mobile做了一下对比,我的总结如下: 1.boo ...
- Linux ssh登录和软件安装详解
阿哲Style Linux第一天 ssh登录和软件安装详解 Linux学习第一天 操作环境: Ubuntu 16.04 Win10系统,使用putty_V0.63 本身学习Linux就是想在服务器 ...
- vim自动添加注释
我想了下,要做好一件事, 1,首先喜欢它最才有动机去了解它 2,道听途说about那东西的,会去了解并去玩转 3,兴趣需要培养 一 添加vim头部信息. 系统:C67 追加以下代码到 /etc/vim ...
- rem详解及使用方法
好像有一段时间没有写博客了……今天刚好总结一下rem的使用方法 首先,先说一个常识,浏览器的默认字体高都是16px.步入正题-----〉 兼容性: 目前,IE9+,Firefox.Chrome.Saf ...