flex 子元素固定宽度_什么是flex弹性布局？为什么grid布局是二维布局且更强大？...

是2009年W3C提出的一种布局方式，也叫做弹性布局，弹性布局的出现给盒模型提供了很大的便利性。不知不觉过去10年了。

一. 如何让容器变成flexbox布局

1. 父元素的设置

.parent{ display: -webkit-flex; /* Safari */ display: flex;}

或者成为行内flex布局

.parent{ display: inline-flex;}

注意：设为flexbox布局之后，子元素的float、clear、vertical-align属性都会失效。

2. 子元素的设置

.child{ flex:[number];}

给其中的每一个孩子设置 flex: [number] 来让他们按比例分配容器的宽度。

比如三个child分别设置了 flex: 1 flex: 2 flex: 1 则他们是按照 1-2-1 的比例来分配宽度的。

如果有child没有设置 flex 而是设置了固定的宽度，比如 width: 100px 那么它的宽度就不受flex容器的影响，但是其他的设置了 flex: [number] 的容器会按比例平分剩下的部分。

二. flex布局的属