之前的随笔从阮一峰老师那里学到了flex的基本用法及作用，现在来把flex具体运用到实例中，看看flex的弹性布局效果。 1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： CSS代码： 效果如 ...
分类：
其他好文 时间：
2018-12-23 00:23:18
阅读次数：
146
作者 | 阮一峰 来源 | http://www.ruanyifeng.com/blog/2018/10/flexbox-form.html 弹性布局（Flexbox）逐渐流行，越来越多人使用，因为它写 CSS 布局真是太方便了。 三年前，我写过 Flexbox 的介绍（上，下），但是有些地方写得不 ...
分类：
其他好文 时间：
2018-12-22 01:12:57
阅读次数：
228
一、什么是Flex布局？ Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为 Flex 布局。设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 采用 Flex 布局的元素，称为 Fl ...
分类：
其他好文 时间：
2018-12-17 02:41:44
阅读次数：
236
前言： 最近在学习网页的布局，以下是我阅读过几篇比较好的博客简单的做了一个简单总结、并简单的尝试了一下。希望为以后的开发有所帮助。 参考博客：弹性布局详解 Flux布局教程 一、Flex布局是什么 Flex布局，又称“弹性布局”。2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整 ...
分类：
其他好文 时间：
2018-12-16 13:27:45
阅读次数：
153
本文由云+社区发表 Flex是Flexible Box 的缩写，意为"弹性布局"，是CSS3的一种布局模式。通过Flex布局，可以很优雅地解决很多CSS布局的问题。下面会分别介绍容器的6个属性和项目的6个属性。每个属性会附上效果图，具体实现代码会以github路径形式更新于此。 1.浏览器支持情况 ...
分类：
Web程序 时间：
2018-12-13 12:14:49
阅读次数：
165
盒模型 弹性布局的使用 行快标签 空标签 JQuery版本区别 Js基本类型，怎么检测类型 巧用 localStorage 实现跨浏览器tab页互动 Commonjs require.js 区别 https://blog.csdn.net/crystal6918/article/details/74 ...
分类：
其他好文 时间：
2018-12-05 01:55:01
阅读次数：
203
上述编码的结果示意图如下所示： - 采用弹性布局，flex，也就是flexible-box的简称，弹性布局只要在父元素上设置display：flex；align-items:center;justify-content:center即可。这也是最简单的方法了。代码如下： 效果图： - flex还有一 ...
分类：
其他好文 时间：
2018-11-28 23:51:15
阅读次数：
452
以下6个属性设置在容器上： flex-direction:row(默认值，主轴水平轴，起点为左侧)，row-reverse:(起点在右侧)，column（主轴为垂直方向，起点在上），column-reverse（起点在下） flex-wrap:nowrap(默认值，不换行)， wrap(换行，第一行 ...
分类：
其他好文 时间：
2018-11-26 02:28:15
阅读次数：
261
【如何做一个简单的手机端页面的翻页】第一步：创建移动端页面内HTML+CSS【注】可用弹性布局但需要注意的是外层盒子的定位第二步：思考问题要实现怎样的效果？手指滑动时触发事件【左右】两个方向2.点击footer部分的下标实现切换效果3.点击footer部分的下标实现下标颜色变化第三步；编写JS代码添加监听事件document.addEventListener(‘DOMContentLoad
分类：
移动开发 时间：
2018-11-23 20:52:47
阅读次数：
249
【如何做一个简单的手机端页面的翻页】 第一步：创建移动端页面内 HTML + CSS 【注】可用弹性布局 但需要注意的是 外层盒子的定位 第二步： 思考问题 要实现怎样的效果？ 1. 手指滑动时触发事件【左右】两个方向 2.点击footer部分的下标实现切换效果 3.点击footer部分的下标实现下 ...
分类：
移动开发 时间：
2018-11-23 20:37:52
阅读次数：
246
