Flex 布局教程:语法篇

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

Flex 布局教程:实例篇

http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

一个学习Flex布局的小游戏

http://flexboxfroggy.com/#zh-cn

定义和用法

flex 属性用于设置或检索弹性盒模型对象的子元素如何分配空间。

flex 属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性。

  • flex-basis 属性用于设置或检索弹性盒伸缩基准值。
  • flex-grow 属性用于设置或检索弹性盒的扩展比率。
  • flex-shrink 属性用于设置或检索弹性盒的收缩比率。

比如:

#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: flex;
} #main div:nth-of-type(1) {flex-grow: 1;}
#main div:nth-of-type(2) {flex-grow: 3;}
#main div:nth-of-type(3) {flex-grow: 1;}
#main div:nth-of-type(4) {flex-grow: 1;}
#main div:nth-of-type(5) {flex-grow: 1;} 那么第二个div的宽度是其他的div的3倍,总共有1+1+1+1+3 = 7,那么第二个占150,其他几个各占50;

再比如:

<ul class="flex">
<li>a</li>
<li>b</li>
<li>c</li>
</ul> .flex{display:flex;width:800px;margin:0;padding:0;list-style:none;}
.flex :nth-child(1){flex:1 1 300px;}
.flex :nth-child(2){flex:2 2 200px;}
.flex :nth-child(3){flex:3 3 400px;}

本例定义了父容器宽(即主轴宽)为800px,由于子元素设置了伸缩基准值flex-basis,相加300+200+400=900,那么子元素将会溢出900-800=100px;
由于同时设置了收缩因子,所以加权综合可得300*1+200*2+400*3=1900px;
于是我们可以计算a,b,c将被移除的溢出量是多少:
a被移除溢出量:(300*1/1900)*100,即约等于16px
b被移除溢出量:(200*2/1900)*100,即约等于21px
c被移除溢出量:(400*3/1900)*100,即约等于63px
最后a,b,c的实际宽度分别为:300-16=284px, 200-21=179px, 400-63=337px

Flex布局(引用阮一峰大神)的更多相关文章

  1. 阮一峰大神的快排?刚才还在纠结sort()的我!真是个小傻瓜

    看到这个标题之后 我毫不犹豫的点进去了 趁现在不忙我赶紧把代码写到了我的小本本上好好研究研究 (写的就不放进来了 有点丑) 研究了下  第一反应 明明能用sort()解决的 为什么非要写这么一大串 但 ...

  2. ES6 学习笔记(整理一遍阮一峰大神得入门文档,纯自己理解使用)

    1.let命令 1)let和var的区别:let声明的变量只有所在的代码块有效. 2)没有变量的提升,一定要声明后使用.使用let命令声明变量之前,该变量都是不可用的.形成“暂时性死区”. 3)typ ...

  3. flex布局 (引用阮一峰老师的flex布局-语法篇)

    一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box ...

  4. flex实例(阮一峰)

    Flex 布局教程:实例篇   作者: 阮一峰 日期: 2015年7月14日 上一篇文章介绍了Flex布局的语法,今天介绍常见布局的Flex写法. 你会看到,不管是什么布局,Flex往往都可以几行命令 ...

  5. Flex布局-容器的属性

    本文部分内容参考阮一峰大神博客,原文地址:http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html Flex布局即弹性布局,使用起来十分方便灵活 ...

  6. Flex布局的学习经验

    做为css布局的又一种新方式,Flex拥有极强的使用效果,相比原来的float,position对元素样式的操作更加简洁,本文是我的一点学习经验和心得吧,如有错误以及不足之处,请多多指点. 好进入正题 ...

  7. Flex布局--必然的选择

    这篇文章是我在阮一峰老师的flex布局教程下,按照自己的理解重写写一遍,以便增强理解.如果你来到这里最好去看一下阮一峰大神的Flex布局教程 正式开始自己的. 说起布局方式,大家首先要了解css3有哪 ...

  8. 一篇文章弄懂flex布局

     壹 ❀ 引 谈到flex布局,我不知道有多少人跟我一样,在本能的想到justify-content:center与align-items:center两条属性之后,除此之外的其它属性居然显得格外陌生 ...

  9. 关于css布局的记录(一) --table和flex布局

    1.table方式布局 效果图: 直接用table等标签布局,table布局自动垂直居中 亦可用 display:table == <table>.display:table-cell = ...

随机推荐

  1. 云计算-openstack基础构架以及服务方式详解

    一:什么是openstack 是Rackspace(美国航天局)和NASA(一家公司)共同发起的开源项目,他是一系列软件项目的组合. 这些项目是松耦合的关系,可以进行独立的安装,启动和停止,只有在必要 ...

  2. P3377

    题目描述 如题,一开始有N个小根堆,每个堆包含且仅包含一个数.接下来需要支持两种操作: 操作1: 1 x y 将第x个数和第y个数所在的小根堆合并(若第x或第y个数已经被删除或第x和第y个数在用一个堆 ...

  3. 如何维护一个1000 IP的免费代理池

    楔子 好友李博士要买房了, 前几天应邀帮他抓链家的数据分析下房价, 爬到一半遇到了验证码. 李博士的想法是每天把链家在售的二手房数据都抓一遍, 然后按照时间序列分析. 链家线上在交易的二手房数据大概有 ...

  4. REST架构概述

    REST概述 REST(英文:Representational State Transfer,简称REST)描述了一个架构样式的网络系统,比如 web 应用程序.它首次出现在 2000 年 Roy F ...

  5. 使用dropload.js插件进行下拉刷新

    移动端的下拉刷新是一个比较常见的功能了,网上也有很多框架,插件都有这种功能,所以直接拿来用就好了. html代码: <!--选项卡--><div class="tab&qu ...

  6. cocos2dx - 伤害实现

    接上一节内容:cocos2dx - 生成怪物及AI 本节主要讲如何通过创建简单的矩形区域来造成伤害 在小游戏中简单的碰撞需求应用box2d等引擎会显得过于臃肿复杂,且功能不是根据需求定制,还要封装,为 ...

  7. 【特效】hover效果之十字动画

    效果预览:http://www.gbtags.com/gb/rtreplayerpreview-standalone/3101.htm html: <div class="wrap&q ...

  8. Object类—复写equals方法,hashCode方法,toString方法

    Object:所有类的根类. Object是不断抽取而来,具备着所有对象都具备的共性内容. class Person extends Object { private int age; Person( ...

  9. 面试总结之mysql

    总结自己在面试过程遇到的数据库问题,以备不时之需. 1.你在你们公司用的什么版本的mysql数据库,用过mysql5.7吗? 在学校学习mysql的时候用的5.5,在公司的时候用的5.6,5.7还真没 ...

  10. 再识QT(1)

    2015年的时候开始接触QT,自学了1个月,由于没有项目驱动,也没人指导,最终还是撇下了,水平也仅限于拖拖控件,做一些简单的界面,对QT的内部机制完全是懵逼的.时隔两年,最近由于公司项目需要使用QT, ...