使用Flexbox | CSS Flexible Box Layout: Using CSS flexible boxes

CSS3 Flexible Box或Flexbox是一种布局模式，旨在适应不同的屏幕尺寸和不同的显示设备。对于许多应用程序来说，柔性盒模型比块模型更容易，因为它不使用浮动块，也不使用柔性容器的边距来折叠其内容的边距。

许多设计师发现flexboxes比box更容易使用。没有很多的工作，div当设计师不想要他们的时候，经常会跳到页面的顶部 - 例如，将页脚粘贴到页面的底部是很困难的。柔性盒的宽度和高度会根据显示空间的不同而变化，从而将较低的下方元件固定到位。Flexbox逻辑还会询问您是想要div在右侧还是在底部累积。flexbox元素的显示顺序与源代码中的顺序无关。

因此，可以更简单地使用更清晰的代码来实现流行的布局。这种独立性故意仅影响视觉渲染，留下基于线性阅读的HTML源代码的语音顺序和导航。

注意：虽然CSS灵活框布局规范处于候选推荐阶段（请参见最新编辑草案），但并非所有浏览器都实现了Flexbox的所有功能。也就是说，现在flexbox已经有了很好的支持。请参阅每个属性上的兼容性表以了解最新的兼容性状态。

Flexible Boxes概念

柔性布局的定义方面是能够改变其项目的宽度和/或高度以最佳地适应任何显示设备上的可用空间。柔性容器扩展项目以填充可用空间，或缩小它们以防止溢出。

块布局是垂直偏置; 内联布局是水平偏置的。Flexbox布局允许。虽然块布局对于页面来说效果很好，但是对于应用程序组件，应用程序组件会随着用户代理的变化，手机从垂直方向翻转到水平方向等等而改变方向，调整大小，拉伸或缩小，这是不方便的。Flexbox布局擅长小规模布局，而（新兴）网格布局则适用于较大规模的布局。这两者都是CSS工作组的更广泛努力的一部分，以提供具有不同用户代理的Web应用程序的更好的互操作性，不同的书写模式和其他需求。

Flexible Boxes 词汇

flexible box不使用水平（内联）和垂直（块），而是使用主轴和交叉轴。如果flex-direction是column，那么垂直将是主轴，水平将是横轴。考虑下面的图表。它示出了具有柔性容器flex-direction的row，这意味着柔性元素在主轴上横向相互跟踪。

Flex container包含Flex项目的父元素。柔性容器使用定义的flex或inline-flex所述的值displayproperty.Flex项

Flex容器的每个孩子都成为一个Flex项目。直接包含在Flex容器中的文本被包装在匿名Flex项目中。

轴线

每个flexible box 布局都遵循两个轴。主轴是弹性项相互跟随的轴。十字轴是垂直于主轴的轴。

• flex-direction属性建立主轴。

• justify-content属性定义在当前行的主轴上如何布局FLEX项。

• align-items属性定义当前行上沿交叉轴排列FLEX项的默认方式。

• 该align-self属性定义单个弹性项目如何在横轴上对齐，并覆盖默认设置的默认项目align-items.

方向

柔性容器的main start/main end和cross start/cross end 描述了柔性物品流的起点和终点。它们遵循由writing-mode（从左到右，从右到左等）建立的向量中的柔性容器的主轴和横轴。

• 该order属性将元素分配给序号组，并确定首先出现哪些元素。

• flex-flow特性缩短了flex-direction and flex-wrap

线

根据flex-wrap属性，该属性控制交叉轴的方向和新行的堆叠方向。

维数

弹性物品的不可知的高度和宽度的等价物是主要尺寸和横向尺寸，其分别沿着挠性容器的主轴线和横轴线。

• min-height和min-width特性的初始值是0。

• 该flex属性简化了flex-grow，flex-shrink和flex-basis属性来建立弹性项目的灵活性。

指定一个 Flexible Box

要使用此样式指定元素的CSS，请按如下所示设置display属性：

或

这样做将元素定义为弹性容器，将其子元素定义为弹性项目。该flex值使flex容器成为块级元素。该inline-flex值使flex容器成为原子内联级元素。

注意：对旧浏览器使用前缀标记时，请将前缀添加到display属性中，而不是display属性本身。例如display: -webkit-flex。

FLEX项目注意事项

直接包含在Flex容器中的文本将自动包装在匿名Flex项目中。但是，只包含空格的匿名Flex项目不会被渲染，就像它被指定一样display: none。

一个flex容器的绝对定位子元素被定位，这样他们的静态位置就被确定在他们的flex容器的主启动内容框的角落。

相邻的弹性项目的边距不会折叠。使用auto边距可以吸收垂直或水平方向上的额外空间，并可用于对齐或分隔相邻的柔性项目。有关更多详细信息，请参阅W3C CSS灵活框布局模块规范中的与“自动”边距对齐。

与其他CSS中的居中方法不同，Flexbox的对齐属性“真正”居中。这意味着Flex项目将保持居中，即使它们溢出Flex容器。但是，如果它们溢出页面的顶部边缘或左​​边缘（像英语这样的LTR语言;问题出现在像阿拉伯语这样的RTL语言的右边缘），有时会出现问题，因为您无法滚动到那个地方，即使那里有内容！在将来的版本中，对齐属性将被扩展为具有“安全”选项。现在，如果这是一个问题，你可以使用利润来实现中心，因为他们会以“安全”的方式做出反应，如果溢出则停止对中。而不是使用align-属性，只需在您希望居中的弹性项目上放置自动边距即可。而不是justify-属性，在柔性容器中的第一个和最后一个Flex项目的外边缘上放置自动边距。自动边距将“弯曲”并呈现剩余空间，当有剩余空间时将弯曲项目居中，并在没有剩余空间时切换到正常对齐。但是，如果您尝试justify-content在多行柔性盒中使用基于边距的居中取代，则可能不是很好，因为您需要将边距放在每行的第一个和最后一个柔性项目上。除非您可以提前预测哪些项目将在哪条线上结束，否则无法可靠地在主轴上使用基于边界的居中替换justify-content属性。

回想一下，虽然元素的显示顺序与源代码中的顺序无关，但这种独立性仅影响视觉渲染，留下基于源顺序的语音顺序和导航。即使是order财产不影响语音或导航顺序。因此，开发人员必须注意在源代码中正确排列元素，以免损坏文档的可访问性。

Flexible Box属性

属性不影响flexible boxes

由于flexible box使用不同的布局算法，因此在FLEX容器上有些属性没有意义：

• column-*属性的多列模块对弹性物品没有影响。

• clear对弹性项没有影响。

• float使display元素的属性计算为block。

• vertical-align对弹性项的对齐没有影响。

实例

基本FLEX示例

这个基本的例子展示了如何将“灵活性”应用于一个元素，以及兄弟元素如何在一个灵活的状态下运行。

圣杯布局示例

此示例演示flexbox如何提供动态更改不同屏幕分辨率的布局的功能。下图说明了转换。

这里举例说明了适合于浏览器窗口的页面布局必须针对智能电话窗口进行优化的情况。这些元素不仅要减小尺寸，而且要按顺序改变。Flexbox使这非常简单。

实际操作

有几个flexbox 实验可供在线试用：

• Flexbox游乐场

• Flexy Boxes

• Flexbox特性演示

• Flexbox Froggy

要记住的事情

描述灵活项目布局的算法有时会非常棘手。这里有一些事情要考虑，比如：设计使用灵活的盒子。

灵活的盒子按照书写模式进行布局，即根据开始和结束的位置布置主开始和主结束。

交叉开始和交叉结束依赖于开始或之前取决于值的位置的定义direction。

只要break-属性允许，分页符可以在弹性盒子布局中使用。CSS3 break-after，break-before和break-inside以及CSS 2.1 page-break-before，page-break-after以及page-break-inside性能上被接受的柔性容器，柔性项目，内弯曲的物品。

浏览器兼容性