Flex布局 必记属性 flex-container 属性 ：row 从左往右 （默认一行一行展示） ：row-reverse 从右往左 （反向） ：column 从上往下 （一列一列展示） ：column-reverse 从下往上 （反向） ：wrap 换行 ：no-wrap 不换行（默认此状态） ...
分类：
其他好文 时间：
2019-07-10 18:09:29
阅读次数：
90
一：display:flex 布局 display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。 Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状 ...
分类：
Web程序 时间：
2019-07-07 14:54:11
阅读次数：
141
1. flex设置元素垂直居中对齐 在之前的一篇文章中记载过如何垂直居中对齐，方法有很多，但是在学习了flex布局之后，垂直居中更加容易实现 HTML代码： CSS代码： 2. 用flex布局制作导航栏 以前在写导航栏的时候，总是用float或者display：inline-block实现，但是这两 ...
分类：
其他好文 时间：
2019-07-06 00:04:11
阅读次数：
95
一、移动端布局计算 Flex： Flex： 采用Flex布局的元素，它的所有子元素自动成为容器成员，可以自动分配空间，适合做移动端开发 rem： rem： 在不同的设备上显示不同的效果，因此适合做移动端开发 二、移动设备常见属性 physical pixel： physical pixel： 物理像 ...
分类：
移动开发 时间：
2019-07-04 00:12:54
阅读次数：
151
1.背景介绍 传统的布局解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所 ...
分类：
其他好文 时间：
2019-07-02 21:34:35
阅读次数：
141
注意： 1. 这个案例，是我写vue项目修改的，所以思路同样适用于vue框架项目。2. 建议先把代码直接复制过去，先看一下效果。 3. 涉及到知识点，flex布局的属性配合使用 ， @media媒体查询的语法 4. 给ul设置 flex-wrap: wrap , 一定要允许li可以换行，我在这个坑里 ...
分类：
其他好文 时间：
2019-07-02 09:19:16
阅读次数：
80
(1)宽度和高度已知的 (2)宽度和高度未知 (3)flex布局 ...
分类：
其他好文 时间：
2019-06-25 09:52:47
阅读次数：
75
前端布局神器display:flex 个人推荐更灵活的学习方法： https://www.zhangxinxu.com/wordpress/2018/10/display-flex-css3-css/ 2009年，W3C提出了一种新的方案--Flex布局，可以简便、完整、响应式地实现各种页面布局。目 ...
分类：
其他好文 时间：
2019-06-25 09:30:36
阅读次数：
79
需求：聊天功能（效果参照微信聊天） 直接先放效果图吧！ 框架： wepy (vue) 主要思路： 1、布局只编写一个消息组件，包括头像和内容两部分！flex布局（左到右row），对方发来的消息正常显示，我方发出去的消息右到左布局（flex-direction: row-reverse;），这样增加了 ...
分类：
微信 时间：
2019-06-20 15:43:34
阅读次数：
173
一、两列布局： 方法一：采用position：absollute;并设置margin-left的值。 方法二：采用float;并设置overflow:auto;(隐藏溢出的内容) 方法三：使用flex布局的写法 二、三列布局 方法一：与两列布局类似，左右两边设置position：absolute；和 ...
分类：
Web程序 时间：
2019-06-15 09:52:31
阅读次数：
194
