一.Flex 布局是什么? Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 Flex 布局. .box{ display: flex; } 行内元素也可以使用 Flex 布局. .box{ display: inline-flex; } Webkit 内核的浏览器,必须加上-webkit前缀. .box{ display: -webkit-flex; /* Safari */ display: flex; }

网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C 提出了一种新的方案----Flex 布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍Flex布局的语法. 以下内容主要参考了下面两篇文章:A

-  转自阮一峰老师博客 React 入门实例教程   作者: 阮一峰 日期: 2015年3月31日 现在最热门的前端框架,毫无疑问是 React . 上周,基于 React 的 React Native 发布,结果一天之内,就获得了 5000 颗星,受瞩目程度可见一斑. React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站.做出来以后,发现这套东西很好用,就在2013年5月

鉴于最近用 vuejs 框架开发项目,其中有很多涉及到 es6 语法不太理解所以便认真地读了一下这本书. 地址:http://es6.ruanyifeng.com/#README 第一章:let ,const 命令以及块级作用域 es6 新增了 let 和 const 这两个变量的声明关键字,这样大大的强化了 js 变量的合理程度以及修补了很多es6 版本前出现的bug.他们有着以下的特性:  一:let 的声明 1.1 用let 声明的变量会将变量绑定到声明时所属的语句块中,并且语句块外部不可

  鉴于最近用 vuejs 框架开发项目,其中有很多涉及到 es6 语法不太理解所以便认真地读了一下这本书. 地址:http://es6.ruanyifeng.com/#README 第一章:let ,const 命令以及块级作用域 es6 新增了 let 和 const 这两个变量的声明关键字,这样大大的强化了 js 变量的合理程度以及修补了很多es6 版本前出现的bug.他们有着以下的特性:   一:let 的声明  1.1 用let 声明的变量会将变量绑定到声明时所属的语句块中,并且语句块

最近正在学习阮一峰老师的es6(第三版)教材,在学到第七章<函数的扩展>中的箭头函数嵌套时,文中提到了一个关于“管道机制”的示例,文中源代码如下: //es6(第三版)教材中的管道机制源代码: const pipeline = (...funcs) => val => funcs.reduce((a, b) => b(a), val); const plus1 = a => a + 1; const mult2 = a => a * 2; const addThe

ES6(阮一峰)学习总结   1.块级作用域的引入 在ES6之前,js只有全局作用域和函数作用域,ES6中let关键字为其引入了块级作用域. { var a = 5; let b = 6; } console.log(a); //5 console.log(b); //b is undefined let声明的变量只能在其所在的代码块内才能访问,var声明的变量由于是全局变量,因此可以在代码块外访问 2.暂时性死区 var声明的变量可以在声明之前使用,相当于默认为其声明其值为undefined了

Flex 布局教程:语法篇   作者: 阮一峰 日期: 2015年7月10日 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案----Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的

一.参考文献 阮一峰 Flex布局的语法 阮一峰 Flex布局的实践 二.Flex语法 (一)Flex是什么 Flex是Flexible Box的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性.任何一个容器都可以指定为Flex布局,行内元素也可以使用Flex布局. 采用Flex布局的元素,称为Flex容器(flex container),简称"容器".它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称"项目".

网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. 2009年,W3C提出了一种新的方案—-Flex布局,可以简便.完整.响应式地实现各种页面布局.目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能. Flex布局将成为未来布局的首选方案.本文介绍它的语法,下一篇文章给出常见布局的Flex写法. 以下内容主要参

引言 阮一峰大家基本都认识,很厉害的一个人,经济学博士,文章写得很棒,知识面很广泛,计算机.算法.英语.文采,这是能想到的他的一些标签,他的博客应该算是最受欢迎的博客之一了. 我经常回去看他的博客,但有时候时间长了,再次去看,发现他已经有好几篇新文章了,我就在想,能不能自己写个程序,监控的他博客,当他有新文章的时候,第一时间推送给我. 思路 他的博客中有一个feed,是一个返回xml格式文档的接口,这个接口是最新的文章列表,总共15篇,可以通过监控这个接口中前几篇文章列表的变化来间接的检测他的文

一.Flex布局是什么? Flex是Flexible Box的缩写,翻译成中文就是“弹性盒子”,用来为盒装模型提供最大的灵活性.任何一个容器都可以指定为Flex布局. .box{ display: -webkit-flex; /*在webkit内核的浏览器上使用要加前缀*/ display: flex; //将对象作为弹性伸缩盒显示 } 当然,行内元素也可以使用Flex布局. .box { display: inline-flex; //将对象作为内联块级弹性伸缩盒显示 } 兼容性写法 .box

一.什么是flex布局 flex 是 flexible box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性. 任何一个容器都可以指定为 flex 布局.你可以将前端页面想象成一个巨大的容器,里面装满了各式各样的盒子元素,为了方便元素排列布局,css引入弹性布局.即设置了弹性布局的元素,他的大小和对齐方式将更加灵活的随着他所处空间的大小而改变.任何元素都可以使用flex布局,不区分行内.块级元素.注意:webkit 内核的浏览器,必须加上-webkit前缀.且设为 flex

flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分:一部分是container,一部分是 items. flexbox是一整套布局规范,包含了多个css属性,所以学习起来比`float: left;` 这样简单的布局要复杂很多.   基本原理 容器上有 主轴和纵轴的概念,默认主轴(main-axis)是横向,从左到右,纵轴是竖向,从上到下.其中所有的孩子的布局都会受到这两个轴的影响.后面会讲到,有很多相关的css属性就是通过改变主轴和纵轴的方向来实现不同的布局效果的.   d

第二章:变量的解构赋值 在es6 版本前,如果要为多个变量赋不同值,我想是件比较麻烦的事情.但es6 版本新推出了一个新技术那就是今天的主角变量的解构赋值. 变量解构赋值分为两种方法:数组解构赋值 和 对象解构赋值 一:数组解构赋值 1.1 数组解构赋值的基本语法 以前为多个变量赋不同的值只能这样: let a = 1; let b = 2; let c = 3; 但有了解构赋值便可以这样赋,下面例子是数组解构赋值的基本语法 let [a, b, c] = [1, 2, 3]; 所以匹配方式为:

1.安装 SASS是Ruby语言写的,但是两者的语法没有关系.不懂Ruby,照样使用.只是必须先安装Ruby,然后再安装SASS. 假定你已经安装好了Ruby,接着在命令行输入下面的命令: gem install sass 然后,就可以使用了 2.2 使用 SASS文件就是普通的文本文件,里面可以直接使用CSS语法.文件后缀名是.scss,意思为Sassy CSS. 下面的命令,可以在屏幕上显示.scss文件转化的css代码.(假设文件名为test.) sass test.scss 如果要将显示

1. 随着函数使用场合的不同,this的值会发生变化.但是有一个总的原则,那就是this指的是,调用函数的那个对象. 或者说,this指向当前执行的函数的所有者. 2.情况一:纯粹的函数调用 这是函数的最通常用法,属于全局性调用,因此this就代表全局对象Global. 3.情况二:作为对象方法的调用 所谓构造函数,就是通过这个函数生成一个新对象(object).这时,this就指这个新对象. 4.情况四 apply调用 apply()是函数对象的一个方法,它的作用是改变函数的调用对象,它的第一

var constantize = (obj) => { Object.freeze(obj); Object.keys(obj).forEach( (key, i) => { if ( typeof obj[key] === 'object' ) { constantize( obj[key] ); } }); }; 冻结对象的用处: 冻结对象是指那些不能添加新的属性,不能修改已有属性的值,不能删除已有属性,以及不能修改已有属性的可枚举性.可配置性.可写性的对象. 也就是说,这个对象永远是不

流程图 下面是我整理的常用 Git 命令清单.几个专用名词的译名如下. Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一.新建代码库 # 在当前目录新建一个Git代码库 $ git init # 新建一个目录,将其初始化为Git代码库 $ git init [project-name] # 下载一个项目和它的整个代码历史 $ git clone [url] 二.配置 Git的设置文件为.gitconfig,它可

React Router是一个路由库,通过管理URL来实现组件切换和状态转变. 1.安装和使用 $ npm install -S react-router 在使用时,作为React组件导入 import {Router} from 'react-router'; render(<Router />,document.getElementById('app')); 但是需要真正使用Router,还需要定义Router组件. import { Router, Route, hashHistory