到目前为止，Flexbox布局应该是目前最流行的布局方式之一了。而Flexbox布局的最大特性就是让Flex项目可伸缩，也就是让Flex项目的宽度和高度可以自动填充Flex容器剩余的空间或者缩小Flex项目适配Flex容器不足的宽度。而这一切都是依赖于Flexbox属性中的flex属性来完成。一个F ...
分类：
编程语言 时间：
2018-11-23 14:15:20
阅读次数：
238
网页布局（layout）是 CSS 的一个重点应用。 布局的传统解决方案，基于盒状模型，依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。 2009年，W3C 提出了一种新的方案 Flex 布局，可以简便、完整、响应式 ...
分类：
其他好文 时间：
2018-11-19 11:09:30
阅读次数：
211
基础准备对于这个实现，我们需要一个简单的 div ，并且样式类名为 ball ： HTML 代码: 我们将使用 Flexbox 布局，把球放到页面中间，尺寸为 100px 100px，背景色为橘黄色。 CSS 代码: 创建 Keyframe(关键帧)Keyframe(关键帧) 用于 CSS 动画，以 ...
分类：
Web程序 时间：
2018-11-11 23:30:55
阅读次数：
218
默认情况下先显示移动端，通过 @media 属性适配屏幕变化 使用flexbox相关的CSS属性 display: flex; (父元素) flex wrap: nowrap | wrap | wrap reverse; (父元素, 子元素超出该如何显示) flex: flex grow flex ...
分类：
移动开发 时间：
2018-11-11 23:23:16
阅读次数：
221
什么是 Flexbox ？ Flexbox 是flexible box 的简称，意思是“灵活的盒子容器”； 是css3引入新的布局模式，他决定了元素如何在页面上排列，使它们能在不同的屏幕尺寸和设备下可预测地展现出来； 在不同方向排列元素 重新排列元素的显示顺序 更改元素的对齐方式 动态地将元素装入容 ...
分类：
其他好文 时间：
2018-11-09 16:13:27
阅读次数：
142
应用弹性盒子布局 基于 flexbox layout 的实现 先变为 flexbox layout 从上往下 均匀分布，居中 响应式长度单位rpx 如何让元素大小适配不同宽度屏幕 小程序规定所有设备的屏幕宽高均位750rpx 苹果6屏幕 px:rpx = 1:2 公共样式表 app.wxss 写全局 ...
分类：
微信 时间：
2018-10-29 19:51:51
阅读次数：
215
CSS Grid布局是CSS中最强大的布局系统。与flexbox的一位布局不同的是CSS Grid布局是一个二维布局系统，即它可以同时处理列和行。通过将CSS规则应用于父元素和其子元素，就可以轻松使用Grid布局。 CSS一直以来布局网页就存在很多问题，如表格table，浮动float，定位posi ...
分类：
其他好文 时间：
2018-10-28 16:07:50
阅读次数：
174
1、主题思想： 元素可以改变大小，以适应可用空间，当可用空间变大，弹性盒将伸展大小以填充可用空间，当弹性盒子超出可用空间时将自动缩小。总之，弹性盒是可以让你的布局根据浏览器的大小变化进行自动伸缩； flexbox是一个可以让你告别浮动，完美实现垂直水平居中的新特性。 2、给父元素添加的属性： dis ...
分类：
其他好文 时间：
2018-10-20 16:22:38
阅读次数：
931
CSS单位主要分析em、rem、fr这三个较难理解的单位吧,其他的就是px,%,cm等等 px在不同场景之下为同样的值，我们把它称作绝对单位，而em和rem受外部因素的影响下而改变，因此称作相对单位。 我们需要了解到为什么要拓展em，rem这样的相对单位呢？ 比如我就特爱用px，感觉所有的东西都能用 ...
分类：
Web程序 时间：
2018-10-12 23:47:22
阅读次数：
255
创建一个flexbox： .flex-container{ display:flex; } 4 .flex 项在交叉轴上的对齐 ...
分类：
其他好文 时间：
2018-10-07 16:52:09
阅读次数：
137
