Flex是Flexible Box的缩写，意为“弹性布局”。弹性布局提供了一种更加有效的方式来对一个容器内的项目进行排列/对齐/分配空间等操作，让盒模型具有更大的灵活性。在一个容器盒子上添加display：flex/inline-flex使其变成弹性布局。 .box{ display: flex;} ...
分类：
其他好文 时间：
2017-10-22 22:13:07
阅读次数：
196
弹性布局 1、定义弹性布局（父级上定义） display:flex; 如果说内核为webkit 的必须前面加上 -webkit-flex 2、设置了弹性布局之后，子元素的css中的float, clear, vertical-align 这些属性将失效。 3、可以将flex弹性布局看成一个大盒子，也 ...
分类：
其他好文 时间：
2017-10-22 20:59:10
阅读次数：
175
vue 弹性布局 实现长图垂直居上，短图垂直居中 大致效果如下图，只考虑垂直方向。长图可以通过滚动条看，短图居中效果，布局合理 html代码(vue作用域内)： css代码： js代码(vue作用域内，使用jquery)： ...
分类：
其他好文 时间：
2017-10-18 14:58:57
阅读次数：
1283
Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 flex 的核心的概念就是 容器 和 轴。容器包括外层的 父容器 和内层的 子容器，轴包括 主轴 和 交叉轴。 1. 容器 1.1 父容器 设置子容器沿主轴排列：justify-content（水平方 ...
分类：
其他好文 时间：
2017-10-14 18:33:00
阅读次数：
159
一、什么是flex? flex是css3中引入的一种布局方式，可以非常灵活高效控制元素的排列与对齐方式，大多数人称之为弹性布局. 二、怎么使用flex? 任何一个容器都可以指定为flex布局 三、flex的基本术语 采用flex布局的元素被称为flex容器 (flex container), 它的子 ...
分类：
Web程序 时间：
2017-10-11 21:55:17
阅读次数：
218
一、简要介绍 css3最喜欢的新属性之一便是flex布局属性，用六个字概括便是简单、方便、快速。 flex（ flexible box：弹性布局盒模型）,是2009年w3c提出的一种可以简洁、快速弹性布局的属性。主要思想是给予容器控制内部元素高度和宽度的能力。目前已得到以下浏览器支持： 其中在web ...
分类：
Web程序 时间：
2017-10-06 23:13:26
阅读次数：
257
一、静态布局（Static Layout）即传统Web设计，网页上的所有元素的尺寸一律使用px作为单位。 1、布局特点：不管浏览器尺寸具体是多少，网页布局始终按照最初写代码时的布局来显示。常规的pc的网站都是静态（定宽度）布局的，也就是设置了min-width，这样的话，如果小于这个宽度就会出现滚动 ...
分类：
其他好文 时间：
2017-09-27 22:36:08
阅读次数：
281
转载：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html 一、Flex 布局是什么？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 行内元素 ...
分类：
其他好文 时间：
2017-09-24 20:22:01
阅读次数：
145
今天写了一个携程界面的UI，利用H5的弹性盒子来实现，学过H5弹性盒子的，来看是比较方便的，因为CSS代码都差不多。 可以看看这篇博客 快速使用CSS 弹性盒子 效果图如下： 主要是携程首页的四个模块； 代码： CSS代码 一个简单的小案例，界面练习，和H5的弹性盒子相同。 源码点击下载 ...
分类：
微信 时间：
2017-09-16 11:51:04
阅读次数：
321
近期学习，有很多感想，有时候看似相近的概念，其实意义却不相同。所以学习要针对不同的名词有明确的区分意识。 抽空时间，打算学习下display:flex;本以为就是一个小小的知识点，正式去研究的时候，才发现display:flex;有很多内容，能实现很多效果。比如三栏布局（左右两栏固定，中间栏自适应） ...
分类：
其他好文 时间：
2017-09-15 21:43:32
阅读次数：
153
