前言 在本文中将会用Vue完成九宫格拖拽效果，同时介绍一下网格布局。具体代码以及demo可以点以下超链接进入 传送门：Demo以及完整代码连接 效果实例 简单了解Grid布局（网格布局） 什么是网格布局 CSS网格布局（又称“网格”），是一种二维网格布局系统。CSS在处理网页布局方面一直做的不是很好 ...
分类：
其他好文 时间：
2020-04-30 09:53:07
阅读次数：
51
1.在index.wxcss里设置 第三个元素类i3里单独设置 align-items: flex-end; 全部元素设置 align-items: baseline（解释：以文字进行对齐）; 2.在index.wxml里设置 class="item i3" 3.交叉轴上的布局 4.1flex-gr ...
分类：
其他好文 时间：
2020-04-29 17:55:58
阅读次数：
69
1.不使用flex时，在index.wxml里写格式 2.在index.wxss里写样式 3.开始启用flex格式 3.1 flex-flow: row; 元素按照一行排列； flex-flow: column; 元素按照一列排列 3.2 flex-direction: column; 元素排列方式 ...
分类：
微信 时间：
2020-04-29 16:29:31
阅读次数：
275
基于 Vue(2.5) + vuex + vue-router + vue-axios +better-scroll + Scss + ES6 等开发一款移动端音乐 WebApp，UI 界面参考了安卓版的网易云音乐、flex 布局适配常见移动端。 因为服务器的原因，所以可能多人访问的时候有些东西会加 ...
分类：
移动开发 时间：
2020-04-29 12:56:51
阅读次数：
149
第一种方法： .item{ margin-left:auto; } 第二种方法： .item{ flex: 1; text-align: right; } ...
分类：
其他好文 时间：
2020-04-28 13:24:31
阅读次数：
292
Horizontally center: .div_out { width: 100vw; height: 100vh; display: flex; justify-content: center;}.div_in { width: 80%; height: 80%; background-ima ...
分类：
Web程序 时间：
2020-04-27 17:19:13
阅读次数：
70
简介： Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。任何一个容器都可以指定为Flex布局。注意，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 基本概念 采用Flex布局的元素，称为Flex容器（flex ...
分类：
Web程序 时间：
2020-04-25 13:07:32
阅读次数：
79
效果预览 按下右侧的“点击预览”按钮可以在当前页面预览，点击链接可以全屏预览。 https://codepen.io/comehope/pen/Yjomyd 可交互视频 此视频是可以交互的，你可以随时暂停视频，编辑视频中的代码。 请用 chrome, safari, edge 打开观看。 https ...
分类：
Web程序 时间：
2020-04-24 20:00:37
阅读次数：
72
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document< ...
分类：
移动开发 时间：
2020-04-23 11:58:03
阅读次数：
133
先完成‘左右两列竖直分别滑动，相互之间不存在任何关联’的页面样式： <t emplate> <div> <div class="flex-between"> <div class="left"> <span v-for="n in 16" :key="n">{{n}}</span> </div> < ...
分类：
其他好文 时间：
2020-04-22 12:55:38
阅读次数：
216
