display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局 注意：（Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。设为Flex布局以后，子元素的float、c ...
分类：
其他好文 时间：
2019-06-09 12:55:56
阅读次数：
134
恢复内容开始 flex，意为弹性布局； flex的样式属性分为两种，一个是作用在容器上的，即设置为flex的元素，一个是作用在成员上的； 1、作用在容器上的属性 flex-direction:设置容器排列方向，默认主轴即水平方向；属性值：row、row-reverse 、column、column- ...
分类：
其他好文 时间：
2019-06-07 13:12:07
阅读次数：
101
早期时候我们左网站布局的使用表格(table)，然后使用浮动(float)、 定位(position)和内联块(inline-block)，但所有这些方法本质上来讲都是hacks，存留了很多需要实现的重要功能问题(例如，垂直居中)。 display:flex和display:box都可用于弹性布局， ...
分类：
Web程序 时间：
2019-06-06 13:52:12
阅读次数：
162
一、单行文本的居中 1.文字水平居中 2.文本垂直水平居中 二、多行文本的垂直居中 1.使用display:flex实现 flex布局会让容器内的元素得到垂直水平居中 2.使用display:-webkit-box实现 display:flex和display:box都可用于弹性布局实现水平垂直居中 ...
分类：
Web程序 时间：
2019-06-03 22:01:06
阅读次数：
174
什么是文档流 英文原文是：Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relativ ...
分类：
其他好文 时间：
2019-05-27 22:06:46
阅读次数：
176
flex是flexiblebox的缩写，中文名字弹性盒子布局,在小程序布局中支持的很好 在试验之前可以看一下张鑫旭的flex https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/ 1.给父容器设置了display:fl ...
分类：
其他好文 时间：
2019-05-21 19:19:51
阅读次数：
142
上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。 你会看到，不管是什么布局，Flex往往都可以几行命令搞定。 我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文章和Solved by Flexbox。 一、骰子的布局 ...
分类：
其他好文 时间：
2019-05-14 19:03:01
阅读次数：
152
一、问题描述： 当使用Flex布局时，子元素设置百分比高度后，如下图没有效果： 二、解决方法： 父元素必须设置高度，效果如下图： 三、完整代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="v ...
分类：
其他好文 时间：
2019-05-09 13:51:20
阅读次数：
440
flex(弹性)布局：******** 以往的网页布局(layout)方式： 方式：基于盒模型，依赖display属性+margin属性+position属性+float属性。特殊布局比较麻烦(比如元素的垂直居中) 2009年w3c推出flex布局。可以简便、完整，响应式的实现网页布局(IE10以上 ...
分类：
其他好文 时间：
2019-05-08 09:28:08
阅读次数：
149
整个页面布局如下: 外层设置fixed的原因是不让页面在浏览器中进行上下拖拽, 最后形成的结果是：输入框获取焦点输入内容后，光标错位，导致不能选中输入框重新获取焦点（页面上移，但是布局未产生影响）; 解决 改变页面布局: 外层fixed取消,改用 display:flex布局，将内容分为3部分，中间 ...
分类：
微信 时间：
2019-05-07 12:57:29
阅读次数：
252
