Flex布局基础概念及入门实例教程

flex 布局的基本概念

Flexbox 是一种布局模型。提供了强大的空间分布和对齐能力

一个 flexbox 一次只能处理一个box中的元素布局，按一行或者一列。作为对比的是另外一个二维布局 CSS Grid Layout，可以同时处理行和列上的布局。

使用flex layout 设置 display: flex 即可

flex-direction 主轴方向

主轴由 flex-direction 定义，可取4个属性值

• row
• row-reverse
• column
• column-reverse

效果如下所示：

源代码

flex-wrap 多行Flex容器

为了实现多行效果，请为属性flex-wrap添加一个属性值wrap。 现在，如果您的项目太大而无法全部显示在一行中，则会换行显示。 下面的实时例子包含已给出宽度的项目，对于flex容器，项目的子元素总宽度大于容器最大宽度。 由于flex-wrap的值设置为wrap，所以项目的子元素换行显示。若将其设置为nowrap，这也是初始值，它们将会缩小以适应容器，因为它们使用的是允许缩小的初始Flexbox值。 如果项目的子元素无法缩小，使用nowrap会导致溢出，或者缩小程度还不够小。

效果如下所示：

源代码

flex 元素大小控制

为了更好地控制 flex 元素，有三个属性可以作用于它们：

• flex-grow
• flex-shrink
• flex-basis

flex-basis

flex-basis 定义了该元素的空间大小（the size of that item in terms of the space），flex容器里除了元素所占的空间以外的富余空间就是可用空间 available space。 该属性的默认值是 auto 。此时，浏览器会检测这个元素是否具有确定的尺寸。 在下面的例子中, 所有元素都设定了宽度（width）为100px，所以 flex-basis 的值为100px。 红色的设置成了 150px;

源代码

flex-grow

flex-grow 若被赋值为一个正整数， flex 元素会以 flex-basis 为基础，沿主轴方向增长尺寸。这会使该元素延展，并占据此方向轴上的可用空间 （available space）。如果有其他元素也被允许延展，那么他们会各自占据可用空间的一部分。

源代码

flex-shrink

flex-shrink属性是处理flex元素收缩的问题。如果我们的容器中没有足够排列flex元素的空间，那么可以把flex元素flex-shrink属性设置为正整数来缩小 它所占空间到flex-basis以下。与flex-grow属性一样，可以赋予不同的值来控制flex元素收缩的程度 —— 给flex-shrink属性赋予更大的数值可以比赋予小 数值的同级元素收缩程度更大。

源代码

Flex属性的简写

你可能很少看到 flex-grow，flex-shrink，和 flex-basis 属性单独使用，而是混合着写在 flex 简写形式中。 Flex 简写形式允许你把三个数值 按这个顺序书写: flex: flex-grow flex-shrink flex-basis。

源代码