一觉睡醒，脑洞大开，直撸代码。

一觉睡醒，脑洞大开，直撸代码。

上午上完web课，脑子好累，就随口吃了一下饭，迷迷糊糊睡着了。不幸手机砸了一下脸（想必大家也有这些经历，手机迷们），就是这一下，就像苹果砸在我头上，我发现了万有引力一样，很牛批，一下子懂了弹性布局flex。

想必大家知道有这个样式，那么很少人知道这个属性的由来，在2009年，W3C提出了一种新的方案---flex布局，可以简便，完整，响应式的实现各种网页布局。

flex是Flexible Box的缩写，意为弹性布局，截止2016年5月，官方公布了最新且稳定的flex布局规范标准，目前，它已经得到了所有浏览器的支持，这意味着现在就能很安全的使用这项功能。 弹性盒子是CSS3的一种新布局模式，CSS3弹性盒，（flexipilbox）是一种当页面需要适应不同的屏幕大小及设备类型确保元素拥有恰当的行为的布局方式。

它是能更加高效方便的控制元素对齐、排列，更重要的是能够自己计算布局内元素的尺寸，无论这个元素的尺寸是固态的还是动态的。设置为Flex布局以后子元素的float、vertical-align和clear的属性将失效。 有人可能要问，为什么使用flex布局？

这里就要提到我们传统的布局解决方案，它主要基于CSS盒子模型，依赖于display、position、float等属相，但是他对于一些特殊布局非常不方便，比如垂直居中。

而flex布局可以很好的解决这个难题，它可以简便完整响应式的实现各种布局。 大 多人很是好奇，那么什么是弹性布局呢？

弹性盒子由弹性容器flex container和弹性子元素flex item组成。 弹性容器：需要添加弹性布局的父元素。 弹性子元素：弹性布局容器中的每一个子元素，也称为项目；我们还需要了解两个基本方向，这个涉及弹性布局的使用。

主轴：在弹性布局中，我们会通过属性来规定水平\垂直方向为主轴。 交叉轴：与主轴垂直的另一个方向，称为交叉轴。 主轴开始与结束的位置（与边框的交叉点），称为“main start”与“main end”。交叉轴开始与结束的位置，称为“cross start”与“cross end”。

为什么加了flex他就像浮动一样。这就得从他的12个属性说起，这个很规律，6个作用于父元素，6个作用于子元素。

我们先说一下作用于父元素身上的6个元素。 我用表格给大家列出来。

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。