Flexbox -Flexibility

Flexbox Flexibility - 从基本概念到高级概念，简单易学地学习Flexbox，其中包括概述，Flex容器，Flex-Direction，Flex-Wrap，Justifying内容，对齐项目，对齐内容，Flex-Order，灵活性，自我对齐等。

flex-basis

我们使用 flex-basis 属性在分配空间之前定义flex项的默认大小.

以下示例演示了flex-basis属性的用法.在这里，我们创建3个彩色框并将其大小固定为150像素.

One

two

three

我们使用flex-grow属性来设置flex-grow因子。如果容器中有多余的空间，它指定特定的柔性项目应该增长多少。

                        One         two         three

我们使用flex-shrink属性来设置flex收缩因子。如果容器中没有足够的空间，则指定Flex项目应缩小的程度。

                        One         two         three

有一个简写到一次为所有这三个属性设置值;它被称为 flex .使用此属性，可以一次将值设置为flex-grow，flex-shrink和flex-basis值.以下是此属性的语法.

.item {   flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]}