给父容器after或者before（适用于每行3或者4列） .box:after { display:block; content:""; width: 32%; height:0px; } 本人亲测有效，希望能帮助到需…

一项技术，从概念提出到技术研发到商业发布，再到实际应用，最终将产品呈现在用户面前，这是一个漫长而复杂的过程。在这当中，很多有创意有生命力的技术因为各种原因小小遗憾地不幸夭折了。Flex能走到今天确实不易，下面让我们从不同…

11. 动画 动画是 CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果。 11.1 如何实现动画 必要元素： a、通过@keyframes指定动画序列； b、通过百分比…

传统布局 一栏、两栏、三栏布局 一栏布局 特点：页面内容居中，宽度固定 实现方式： 定宽 + 水平居中 width: 1000px; //或 max-width: 1000px;margin-left: auto;mar…

阅读本文之前最好对flex布局有基本了解，可以通过“参考资料”中列举的资源来学习。 flex布局规范的设计目标 一维布局模型(one-dimensional layout model)，元素项沿着水平或垂直方向来排列，就…

我的博客原文地址：原文地址 如果文章对您有帮助，您的star是对我最好的鼓励～ 简要介绍：前端开发中，静态网页通常需要适应不同分辨率的设备，常用的自适应解决方案包括媒体查询、百分比、rem和vw/vh等。本文从px单位出…

双飞翼布局，就是两端固定宽高，中间自适应的三栏布局 先来张图，左边和右边的灰色块是固定宽高的，中间绿色的区域是宽高自适应 方式一：通过flex弹性布局来实现 看代码 //HTML结构，div2是中间的自适应区域 ... …

有序无序列表序列号不显示 我们常常要遇到的是，不显示序列号（设置list-style-type:none），但有时因为项目过大，设置了一些通用属性后，想显示序号却怎么也捣腾不出来,关于list-style-type：no…

前言 嗯，前不久写了一篇我所知道的flex布局-上篇，于是今天来把下篇补上。 容器的属性 既然标题括号括住了语法，那么就直入正题直接来说语法了。 首先设为Flex布局 任何一个容器都可以指定为Flex布局。 .box{ …

本文作为 Flex 布局进阶，不对基础做详细介绍，关于 Flex 基础知识请到阮一峰老师的Flex 布局教程：语法篇 看过基础，或者已经使用 Flex 布局的朋友可以根据本文试着动手写一写，先不急着开工，看看其它大型框架…

原文：https://dev.opera.com/articles/flexbox-basics/ 译者注：本文仅简单翻译下原文中关于如何计算 flex 属性的值的部分。其他有关 Flex 布局的知识本文不作探讨。 20…

flex 是个非常好用的属性，如果说有什么可以完全代替 float 和 position ，那么肯定是非它莫属了（虽然现在还有很多不支持 flex 的浏览器）。然而国内很多浏览器对 flex 的支持都不是很好，这里针对微…