Flexbox 是一种用于在容器中布局子元素的强大工具。使用 Flexbox，我们可以轻松地创建灵活的布局，使得我们的网页能够更好地适应不同的屏幕尺寸和设备。
flex-container 属性
Flexbox 布局的核心是将容器设置为 display: flex 或 display: inline-flex。这样会将容器内的子元素变成弹性项目，从而实现灵活的布局。
示例代码：
--------------- - -------- ----- ---------------- ------- ------------ ------- -
在上面的示例中，我们将 .flex-container 设置为 Flexbox 容器，并使用 justify-content 和 align-items 属性来水平和垂直居中容器内的子元素。
flex-direction 属性
flex-direction 属性用于指定弹性容器内子元素的排列方向。默认值为 row，即水平排列。
示例代码：
--------------- - -------- ----- --------------- ------- -
在上面的示例中，我们将 .flex-container 的子元素按照垂直方向排列。
flex-wrap 属性
flex-wrap 属性用于指定子元素在容器内是否换行。默认值为 nowrap，即不换行。
示例代码：
--------------- - -------- ----- ---------- ----- -
在上面的示例中，如果子元素在容器内放不下，就会自动换行。
flex-grow 属性
flex-grow 属性用于指定弹性项目的放大比例。默认值为 0，即不放大。
示例代码：
---------- - ---------- -- -
在上面的示例中，.flex-item 会根据剩余空间等比例放大。
flex-shrink 属性
flex-shrink 属性用于指定弹性项目的缩小比例。默认值为 1，即可以缩小。
示例代码：
---------- - ------------ -- -
在上面的示例中，.flex-item 不会随着容器缩小而缩小。
flex-basis 属性
flex-basis 属性用于指定弹性项目在主轴上的初始大小。默认值为 auto，即根据内容自动计算大小。
示例代码：
---------- - ----------- ---- -
在上面的示例中，.flex-item 在主轴上的初始大小为容器宽度的 50%。
以上就是 Flexbox 中常用的一些属性，通过灵活运用这些属性，我们可以轻松创建各种复杂的布局。