所谓三列自适应布局指的是两边定宽，中间block宽度自适应。这道题在今年网易内推前端工程师面试的时候也被问到。 我这里主要分为两大类，一类是基于position传统的实现，一类是基于CSS3新特性弹性盒模型布局实现。 1. 基于传统的position和margin等属性进行布局 这里也分为三种方法， ...
分类：
Web程序 时间：
2017-05-11 19:32:13
阅读次数：
250
弹性盒布局模型（Flexible Box Layout）是 CSS3 规范中提出的一种新的布局方式。它可以用简单的方式满足很多常见的复杂的布局需求。 一、基本概念 采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动成为容器成员，称为flex项目 ...
分类：
其他好文 时间：
2017-04-16 20:33:19
阅读次数：
315
块级元素转换成弹性盒子：{display：flex} 行内元素转换成弹性盒子：{display：inline-flex} 1.flex-direction：用来确认主轴的方向 row（从左向右）相对于row-reverse（从右向左） column（从上向下）相对于column-reverse（从下 ...
分类：
其他好文 时间：
2017-04-16 20:30:09
阅读次数：
266
1，弹性核模型 新版父级display:flex; // 水平 方向 flex-direction:row; // 竖直 方向 flex-direction:colunm; flex-direction: row-reverse; flex-direction: column-reverse; di ...
分类：
其他好文 时间：
2017-04-10 13:12:33
阅读次数：
120
flex布局，弹性盒子 1.display：flex 设置flex布局后，子元素的float、clear和vertical-align属性将失效 2.flex-direction 决定主轴的方向（即项目的排列方向） 属性：row|row-reverse|colum|column-reverse 3. ...
分类：
其他好文 时间：
2017-04-02 21:23:11
阅读次数：
139
1.flex-direction：设置伸缩项目的排列方式，即主轴的方向 row 设置从左到右排列 row-reverse 设置从右到左排列 column 设置从上到下排列 column-reverse 设置从下到上排列 2.justify-content：调整主轴方向上的对齐方式，对于弹性盒子内元素 ...
分类：
其他好文 时间：
2017-03-29 21:03:44
阅读次数：
210
【flex 弹性盒布局】 * 1、给父容器添加display：flex/inline-flex;属性 * 2、父容器可以使用的属性值有： * ① flex-direction 属性决定主轴的方向（即项目的排列方向） row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方 ...
分类：
其他好文 时间：
2017-03-26 18:08:58
阅读次数：
187
为父容器添加display：flex/inline-flex 父容器可以使用的属性有： 1.flex-direction：决定主轴的方向 有四个属性值： row（默认值）：主轴为水平方向，起点在左端。 row-reverse：主轴为水平方向，起点在右端。 column：主轴为垂直方向，起点在上沿。 ...
分类：
其他好文 时间：
2017-03-24 22:53:20
阅读次数：
1901
flexbox 弹性盒布局和布局原理 新版的flexbox规范分两部分：一部分是container，一部分是 items。 flexbox是一整套布局规范，包含了多个css属性，所以学习起来比`float: left;` 这样简单的布局要复杂很多。 基本原理 容器上有 主轴和纵轴的概念，默认主轴（m ...
分类：
其他好文 时间：
2017-03-23 02:08:25
阅读次数：
275
Css3引入了新的盒模型——弹性盒模型，该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL（火狐使用的用户交互语言）相似，其它语言也使用相同的盒模型，如XAML 、GladeXML。 使用该模型，可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局。本文的例子 ...
分类：
Web程序 时间：
2017-03-21 15:17:02
阅读次数：
206
