受到团队的信任
Flexbox为您提供了一个元素内的所有内容的精确对齐和堆叠控制，解决了许多布局问题，设计师斗争。
本节课你将学习:
flex父元素是父元素。可以从包含其他元素的任何元素创建伸缩容器。要创建一个flex父类:
与其他显示设置不同，在父元素上启用flex会影响内部直接子元素的布局。当您为父元素启用flex显示设置时，子元素默认向左对齐并水平堆叠。
Flex容器不会影响或改变其直接子元素中的子元素的布局。
一旦将父元素转换为伸缩容器，该元素的直接子元素就变成了伸缩子元素。若要覆盖flex子元素的布局设置，请选择该元素，并调整布局设置。
将父元素的布局设置更改为flex后，flex父元素及其包含的子元素都有许多布局选项。
默认情况下，伸缩父类的方向是水平的。控件的伸缩布局设置中，可以将方向切换为垂直风格的面板>布局．
控件的方向设置中反转伸缩父布局的对齐方式风格的面板>布局．
反转你的flex父组件的布局对于从右到左的站点特别有用，当需要在较小的站点上反转布局时断点．
若要更改伸缩父级内伸缩子级的对齐方式，请选择伸缩父级，并在布局方向设置下选择所需的对齐方式。
要将子元素水平对齐，请选择以下对齐选项之一:
要垂直对齐flex子组件，请选择以下对齐选项之一:
间隙允许您指定伸缩子元素之间的空间，而无需添加边距或填充。若要调整列和行之间的间隙大小，请在风格的面板．
默认情况下，列和行之间的间隙是锁定的。这意味着，如果更改列的间隙大小，Webflow将同时更改相同数量的行间隙大小。
若要独立调整列与行之间的间距，请单击锁定按钮解锁列与行之间的关系。
默认情况下，flex子进程将始终尝试在单行中。您可以通过使用布局设置包装子元素来更改它，包装．
有不同的选项来水平对齐多行内容:
flex子元素是任何flex父元素的直接子元素，flex父元素是显示布局设置为flex的任何元素。伸缩子组件的默认布局基于伸缩容器上设置的伸缩布局。
要在flex父组件中配置flex子组件的布局，请选择该元素并更改大小、对齐方式和显示顺序。
通过主尺寸预设，您可以告诉flex子组件它应该如何在flex父组件中拉伸。每个flex子节点都可以有自己的大小设置，允许许多布局选项:
选择成长选项，以调整项目增长的大小。使它完全灵活，以便吸收任何额外的空间。
如果所有项目都是成长，缩小,或不要收缩或增长，任何剩余的空间后，项目已被大小均匀分配到项目成长．
选择缩小选项，根据项目的宽度/高度属性(或其内容，如果没有设置)调整项目的大小。
当有一些空闲空间时，它使伸缩项目不灵活，但当没有足够的空间时，它允许收缩到最小值。对齐功能或自动边距也可用于对齐伸缩项目。
设置不要收缩或增长选项大小项目根据其宽度/高度属性，但使它完全不灵活。这类似于flex: initial，只是它不允许收缩，即使是在溢出的情况下。
如果您选择完全自定义元素的增长和收缩行为，您将输入一个数字来确定flex子元素相对于其他子元素将收缩或增长多少。
设置成长值来定义当父元素内部的空闲空间被分配时，flex子元素相对于其他子元素可以增长多少。如果将该值设置为0，则它不会增长到超出需要的大小。
设置缩小值来定义当分配负的空闲空间时，flex子进程相对于其他子进程可以收缩多少。如果该值设置为0，即使在溢出情况下也不会收缩。
你可以设置基础值为元素的默认大小，然后伸缩或收缩才开始使用。你可以设置为一个特定的尺寸(例如，20%，250px等)或自动。如果设置为Auto, flex子对象的默认大小将基于它的宽度或高度(如果设置)或它的内容。如果设置为特定的维度，元素的内容或宽度/高度将在flex子元素之间共享大小之前被忽略。
当您希望移动设备用户看到与桌面设备用户不同的内容时，重新排序flex子组件就很方便了。默认情况下，flex子组件的显示顺序与它们在源代码中的放置顺序相同。若要覆盖此选项，可以使用订单设置预设或自定义订单选项。
自定义顺序可以定义为一个数字，它指定伸缩子组件在伸缩容器中出现的顺序。具有相同定制订单值的Flex子组件将按照它们最初放置的顺序排列。
使用自定义顺序时，不要使用预设值来指定列表中的第一个或最后一个元素。“First”将flex子组件的顺序设置为-1，“Last”将顺序设置为1。当使用自定义顺序时，任何大于1的数字将把该元素放在顺序设置为last的任何元素之后。任何小于-1的数都会将该元素放在设置为first的元素之前。
另外,请查看:
