使用Flex布局

什么是Flex布局?

Flex Layout利用了Flexbox的强大功能。我们开发它是为了为您提供一个易于使用的系统，同时以一种可理解和可管理的方式利用Flexbox的潜力。

Flex布局基础知识

Flex Layout定义了如何在栏内的孩子将行为，这给了你很大的灵活性，如何将项目展开和定位。

Flex布局设置

让我们来看看Flex Layout提供的所有不同设置。

• 布局-这个选项定义了孩子们的方向，这意味着他们可以并排放置，也可以在彼此下面放置。
  • 行
  • 列
• 改变布局-如果你想反转孩子们的顺序，那么一定要勾选这个选项。基本上就像用镜子一样。
• 把孩子们默认情况下，Flexbox会尝试保持元素在一行或列上，所以如果你想防止这种情况发生，包装子元素是一个好方法。
• 水平-根据你的布局设置，你可以定义如何儿童的方向。
  • 开始——在开始位置放置方框。
  • 居中——将方框置于居中。
  • End -将方框定位在末端。
  • 间距-增加方框之间的空间。
  • 周围空间-增加盒子周围的空间。
• 垂直
  • 开始——在开始位置放置方框。
  • 居中——将方框置于居中。
  • End -将方框定位在末端。
  • 把盒子均匀地摊开。

Flex设置

• 预设
  • 标准
  • 不收缩-防止盒子收缩。
  • 填充空间-设置框填充可用空间。
  • 均等地填充空间——均等地填充空间。
• Flex成长-如果在一个列中有额外的空间，你使用这个函数，那么它将“增长”这个列，以利用未使用的空间。
• Flex收缩如果希望防止容器收缩，可以将此选项设置为0。如果可能，1表示心理医生。
• Flex为基础-定义一个盒子应该占据的基本尺寸。

视频介绍

由于Flexbox有一个学习曲线，我们制作了一个视频，向您介绍Flexbox以及如何使用它。一定要查看它，以充分理解其潜力。

更多的信息

虽然Flexbox是一个非常复杂的主题，因为我们可以讨论各种选项和功能，但我们建议您阅读以下文章，以获得对Flexbox的基本了解，这将帮助您充分使用和理解该技术。

• https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties
• https://css-tricks.com/snippets/css/a-guide-to-flexbox/

总结

您刚刚学习了如何使用Flexbox和创建复杂容器结构的基础知识。