2.0 KiB
2.0 KiB
| title | localeTitle |
|---|---|
| CSS3 Flexible Box | CSS3灵活盒子 |
CSS3灵活盒子
Flexbox模型提供了一种在文档中元素之间布局，对齐和分配空间的有效方法 - 即使视口和元素的大小是动态的还是未知的。
Flexbox模型背后最重要的思想是父容器可以改变其项目的宽度/高度/顺序，以最好地填充可用空间。 Flex容器扩展项目以填充可用空间，或缩小它们以防止溢出。 1
基本用法
Flexbox可用于将任意数量的给定元素置于一个元素内。一个基本的例子是以下代码：
css .center-elements-inside { display: flex; flex-direction: row; justify-content: center; }
让我们分解这个例子。首先我们将display属性设置为“flex”，以便我们可以应用我们的flexbox属性。接下来我们宣布flexbox将处理我们的元素的方式。这可以是一行，也可以是一列。将其设置为行将使元素在元素内水平对齐。该列将垂直对齐它们。
现在让我们简单介绍一下“对齐内容”。此属性声明元素在父元素内的分布方式。我们选择了“中心”值。这意味着此元素中的所有元素都将居中。
更多信息：
要全面了解Flexbox，请阅读在FreeCodeCamp Medium页面上了解您需要了解的所有内容 。
有关交互式指南，请参阅Flexbox终极指南 - 通过示例学习
这两个都是Ohans Emmanuel的巨大资源。
另一个深入但易于理解的优秀视觉指南可以在CSS-Tricks的 “指南”中找到