寻根溯源话布局 一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不由得感觉眼前一亮，顺理成章的联想到 Word 文档排版中用到的的左对齐、右对齐和居中对齐，然而很快就失望的发现 CSS 中并不存…

2009 年，W3C 提出了一种新的方案 ----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

这是我参与8月更文挑战的第9天，活动详情查看：8月更文挑战 flex简介 flex是个简写属性(像border也是个简写属性)，在一个声明里设置 flex-grow、flex-shrink 和 fle

传统的布局方式基于盒模型，使用浮动，定位等方式不仅会影响其他元素属性，还不能在移动端很好的布局。2009年，W3C 提出了一种新的方案----Flex 布局

web开发中，弹性盒子是必备的基本知识，我做了一张思维导图，方便你来使用它。你可以收藏下来方便查找它

1. Flex布局 接下来，我们先提出两个概念：剩余空间和溢出空间，具体是什么意思我们后面慢慢解释。 2. flex-grow 传统的布局是子容器在父容器中从左到右进行布局，应用 flex 进行布局，那么父容器一定设置 display: flex，子容器要“占有”并且“瓜分”父…

一、flex弹性的概念： 弹性盒子是一种用于按行或按列布局元素的一维布局方法，元素可以膨胀以填充额外的空间，收缩以适应更小的空间，适用于任何元素上，如果一个元素使用了flex弹性布局（以下都会简称为：

0 前言 布局一直是CSS中最重要的功能。CSS2的时代，float和inline-block布局是主流的布局方式，然而这些布局方式脱离了这些css属性原本设计的初衷，造成理解成本高，同时有诸多局限。

Flexbox 是一维布局系统，适合做局部布局，比如导航栏组件。 Grid 是二维布局系统，通常用于整个页面的规划。 二者从应用场景来说并不冲突。虽然 Flexbox 也可以用于大的页面布局