<!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的更多相关文章

  1. 原来 flexbox 是这么工作的

    Flexbox 是一种 CSS 布局机制,可以说是目前浏览器原生支持的最好.使用最广泛的布局机制了.本文通过一些例子来说明 Flexbox 布局的工作原理,可以让我们更好的使用 Flexbox. 与 ...

  2. Flexbox 自由的布局

    css3提出了一种新的布局方式.她并没有以摧枯拉朽之势博得我的喜爱.我和她的故事总是伴随着苦涩的味道.世道变了,总要做出些选择才能跟紧步伐.她很强大,能满足你天马行空的需求而不必抓掉一大把头发.她却很 ...

  3. CSS3 Flexbox轻松实现元素的水平居中和垂直居中

    CSS3 Flexbox轻松实现元素的水平居中和垂直居中 网上有很多关于Flex的教程,对于Flex的叫法也不一,有的叫Flexbox,有的叫Flex,其实这两种叫法都没有错,只是Flexbox旧一点 ...

  4. React Native FlexBox

    FlexBox 是React Native布局的一种算法,目的是为了适配不同尺寸的屏幕而设计的. 使用时最关键的就是flex关键字的用法. flex用于修饰当前View在父视图中的占比. 占比如何计算 ...

  5. flexbox布局神器

    前言 2009年,W3C提出了一种新的方案----Flexbox布局(弹性布局),可以简便.完整.响应式地实现各种页面布局.Flex布局模型不同于块和内联模型布局,块和内联模型的布局计算依赖于块和内联 ...

  6. [译]flexbox全揭秘

    原文:http://css-tricks.com/snippets/css/a-guide-to-flexbox/ 弹性布局(弹性盒子,现今仍是w3c的候选推荐),目标在于,对于一个容器中的各个项目块 ...

  7. （转）详解css3弹性盒模型（Flexbox)

    今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似 ...

  8. CSS3 Flexbox不迷路指南

    Flexbox早有耳闻,但是决定切实尝试一番,还是因为看了这条围脖: 我觉得用flexbox可以实现,但是发觉无从下手,属性特性都不了解.趁此机会,学习下. 英文原版参考资料在这里:A Complet ...

  9. 【前端攻略】最全面的水平垂直居中方案与flexbox布局

    最近又遇到许多垂直居中的问题,这是Css布局当中十分常见的一个问题,诸如定长定宽或不定长宽的各类容器的垂直居中,其实都有很多种解决方案.而且在Css3的flexbox出现之后,解决各类居中问题变得更加 ...

随机推荐

  1. 【Android UI设计与开发】6.底部菜单栏（三）使用Fragment+PopupWindow仿QQ空间最新版底部菜单栏

    直接看栗子吧,效果基本实现,界面微调和弹窗的优化,去做的话会很耗时说,暂时就酱紫了.上传效果动态图太大了,直接手机截图的效果图如下: 至于代码的实现主要就是自定义的菜单栏,和用 PopupWindow ...

  2. ZBrush中的SubTool工具该怎样使用

    今天的ZBrush教程中将为大家引入一个新的工具SubTool,使用SubTool您可以添加PolyMesh至当前编辑的模型中,它的出现改变了过去ZBrush不能同时编辑多个模型的弊端. 查看详细的视 ...

  3. AD批量创建用户

    实验环境:Windows Server 2008R 2 由于测试需要,需要创建数百个用户,手动创建当然不可取,此时需要批量创建,操作记录如下 1 首先将要批量创建的人员信息导入到一个csv文件中,表中 ...

  4. 我的第一篇博客--SQL小语句

    开通了博客,拥有了属于自己的小小天地.先写一篇今儿刚学到的 1 remove mirroring relationship alter database datab_name set partner ...

  5. 合工大 OJ 1322 窗口

    窗口     Description 在某图形操作系统中,有N 个窗口,每个窗口都是一个两边与坐标轴分别平行的矩形区域.窗口的边界上的点也属于该窗口.窗口之间有层次的区别,在多于一个窗口重叠的区域里, ...

  6. AC日记——逃出克隆岛 （bfs）

    2059 逃出克隆岛  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题解       题目描述 Description oi小组的yh酷爱玩魔兽rpg,每天都 ...

  7. Navi.Soft20.WinCE使用手册

    1.概述 1.1应用场景 随着物联网的普及,越来越多的制造商对货品从原料配备,加工生产,销售出库等环节的要求和把控越来越高.在此情况之下,传统的ERP软件已经无法满足现有的流程. 移动设备的应用,在很 ...

  8. mysql实体关系

    数据库连接细节架构: 数据库编码: 关系数据库玩的是生活中物与物之间的关系.那么数据库要保存数据,事先就要描述情况数据如何保存.事务之间的关系如何处理等等. 现实生活中物称为实体,如商品,学生,文章, ...

  9. scrapy 的三个入门应用场景

    说明: 本文参照了官网的 dmoz 爬虫例子. 不过这个例子有些年头了,而 dmoz.org 的网页结构已经不同以前.所以我对xpath也相应地进行了修改. 概要: 本文提出了scrapy 的三个入门 ...

  10. WebAPI使用多个xml文件生成帮助文档(转)

    http://www.cnblogs.com/idoudou/p/xmldocumentation-for-web-api-include-documentation-from-beyond-the- ...