GRID布局 它将网页划分成一个个网格，可以任意组合不同的网格，做出各种各样的布局?Grid 布局与 Flex 布局有一定的相似性，都可以指定容器内部多个项目的位置。但是，它们也存在重大区别。Flex 布局是轴线布局，只能指定"项目"针对轴线的位置，可以看作是一维布局。Grid 布局则是将容器划分成 ...
分类：
其他好文 时间：
2020-03-11 01:06:18
阅读次数：
66
传统布局与flex布局 传统布局 ：兼容性好；布局繁琐；局限性，不能在移动端很好的布局。 flex 弹性布局 ：操作方便，布局极为简单，移动端应用很广泛；PC 端浏览器支持情况较差；IE 11或更低版本，不支持或仅部分支持。 布局原理 flex 是flexible Box 的缩写，意为"弹性布局"， ...
分类：
移动开发 时间：
2020-03-09 23:50:24
阅读次数：
91
flex布局是有主轴和交叉轴之分的，一横一竖，纵横页面。 1.主轴是横还是竖呢？ flex-direction决定 row(水平)column(竖向) 加reverse决定从下到上，还是从右到左 交叉轴视主轴方向决定 2.盒子的主轴排布 jusitfy-content决定 center(中间) fl ...
分类：
其他好文 时间：
2020-03-06 17:07:21
阅读次数：
127
1.wrap flex布局自带white-space:wrap; 2.nowrap 3.pre-wrap ...
分类：
其他好文 时间：
2020-03-05 13:37:32
阅读次数：
61
--关于fle布局 常用的还是那几个属性flex-direction，justify-content，align-items， 这两天重现翻阅动手都操作了一遍感觉收获不少现在整理一下，比如align-items属性和align-content属性的区别，比如flex-basis属性order属性有点 ...
分类：
Web程序 时间：
2020-03-02 15:03:12
阅读次数：
88
文本垂直居中的方式：line-height设置成height值 将父元素显示方式设置为表格，display：table-cell，同时设置vertical-align：middle 使用flex布局，设置为align-item：center 绝对位置中bottom：0，top：0，并设置margin ...
分类：
其他好文 时间：
2020-03-02 00:51:03
阅读次数：
66
移动端flex布局 弹性盒布局语法分为两部分： 1. 添加在父容器上的语法 （1）display : flex; 设置为弹性盒（父元素添加） （2）flex-direction: 主轴排列方式 row; 默认值，默认为横向排列。 row-reverse; 反转横向排列（右对齐，从后往前排，最后一项排 ...
分类：
移动开发 时间：
2020-03-01 15:58:56
阅读次数：
92
父容器flex布局，子控件absult布局，会影响父容器的宽度 应该是这样的： 实际是这样的： 父容器的宽度不是预想的宽度，变小了 原来的错误代码： .kVideoCarrier { display: flex; flex-direction: column; width: 80%; /* flex ...
分类：
其他好文 时间：
2020-03-01 10:38:13
阅读次数：
78
首先看代码和效果↓ <style> .main { outline: 1px solid; display: flex; justify-content: space-between; flex-wrap: wrap; } .main>div { width: 100px; height: 100p ...
分类：
其他好文 时间：
2020-02-29 22:09:34
阅读次数：
299
今天小编将把大家带入移动端的世界里去，让大家了解CSS flex布局，下面小编要发车了。 一、flex布局中子项排列方式 如图：首先要定义（display:flex;）一个父容器是flex弹性模型才能进行我们的下一布操作，其中我们可以看到flex-direction定义了主轴的排列方式row(默认) ...
分类：
Web程序 时间：
2020-02-29 18:59:45
阅读次数：
194
