CSS Flex 弹性盒模型布局教程 Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。 flex布局就是给任何一个容器添加 display:flex 注：设为 Flex 布局以后，子元素的float、clear和vertical-align属性将失效 ...
分类：
Web程序 时间：
2019-10-02 16:19:47
阅读次数：
116
CSS样式兼容代码 1.禁止选中复制文本 2.单行文本溢出显示省略号… 3.flex布局兼容 4.iOS app滑动卡顿 5.渐变背景颜色 6.去除PC端浏览器右侧滚动条 注 ：css兼容代码不断更新和优化中... ...
分类：
移动开发 时间：
2019-09-26 14:45:33
阅读次数：
406
1、弹性布局的使用 （1） display：flex；给父容器添加这个属性； （2） display:flex; 容器添加弹性布局后，显示为块级元素； display:inline-flex; 容器添加弹性布局后，显示为行级元素； （3） 设为 Flex布局后，子元素的float、clear属性将失 ...
分类：
Web程序 时间：
2019-09-22 19:56:13
阅读次数：
220
刚接触时，感觉 align-items 就是 align-content 的强化版。一个支持单行，同时支持多行；另一个只支持多行。但是并不符合常理，对比之后发现还是有些没有被描述清楚的差异。 定义还不知道的，出门左转 MDN，随便浪。 多行容器之：align-items 参考：萤火虫塔莉 ...
分类：
其他好文 时间：
2019-09-19 16:05:19
阅读次数：
90
Grid网格布局 概述：Grid将容器划分为一个个网格，通过任意组合不同的网格，做出你想想要的布局 Grid与flex布局相似，将整个Grid分为了容器与子项（格子） Grid容器的三个重要的概念： 行和列 行和列的概念和栅格系统的的概念相似 单元格在水平方向排成一路为一行 单元格在竖直方向上拍成一 ...
分类：
其他好文 时间：
2019-09-13 01:05:43
阅读次数：
142
01-flex-介绍 相比于传统布局，特点快，对移动端兼容性好； 面试：flex布局又叫伸缩 布局 、弹性布局 、伸缩盒布局 、弹性盒布局 ； 思想上：使用思想上和传统盒子完全不同，不要再想子元素是块级元素、行内元素等， 语法： 相比于传统布局，特点快，对移动端兼容性好； 面试：flex布局又叫伸缩 ...
分类：
其他好文 时间：
2019-09-11 22:10:53
阅读次数：
133
一.简介 弹性布局，又称“Flex布局”，是由W3C老大哥于2009年推出的一种布局方式。可以简便、完整、响应式地实现各种页面布局。 容器： 需要添加弹性布局的父元素； 项目： 弹性布局容器中的每一个子元素，称为项目； 主轴： 在弹性布局中，我们会通过属性规定水平/垂直方向为主轴； 交叉轴： 与主轴 ...
分类：
其他好文 时间：
2019-09-11 13:30:51
阅读次数：
75
直接上代码： space-evenly的作用是将每个元素的间隔相等, 但是兼容性较差,尤其是IOS,这种trick很好的解决了兼容性问题 原理很好理解,假设有5个元素, space-evenly是将每个剩余空间平均分割,这样就有6个相同宽度的间隔空间,间隔空间数量 = n + 1;space-bet ...
分类：
其他好文 时间：
2019-09-04 11:57:40
阅读次数：
415
flex布局很好用，优点很多：静态流文件，空间概念，主流样式可以简单调整，同时支持bfc，空间可以动态分配，专业一维空间布局 这么多优点，所以要提倡使用弹性布局。 空间设置：flex的方向、定位这些可以再父节点设置。 内部单项设置：可扩展，可压缩，占比，剩余空间占比，独立对齐。这些需要在子节点设置。 ...
分类：
其他好文 时间：
2019-09-02 18:54:08
阅读次数：
108
