使用Flexbox创建灵活的布局

flexbox：a CSS布局powerhouse

>

flexbox或CSS Flexible Box布局模块，简化了一维布局 - 连续或列中的项目。 将display: flex（或display: inline-flex）应用到容器上，将其直接的孩子转换为flexbox规则的flex项目。这简化了编码各种UI模式的编码，例如灵活的形式或垂直中心。 在水平对齐项目或上时，选择弹性箱，而不是垂直，但不是两者兼而有之。网格以二维布置（行和列）出色。

>

> flexbox基础

在CSS网格之前，flexbox在单轴布局（使用

>或flex-direction: row）的单轴布局（行或列）中重新定位。 只需在容器中添加column即可为孩子们启动弹性格式上下文。 注意：较旧的浏览器可能需要供应商前缀，例如display: flex>或-webkit-flex>。-moz-flex>

>下图说明了Flex容器的直接儿童如何成为Flex物品。这些可以是元素或非空文本节点。 没有进一步的样式，项目的高度相等（基于最高），水平堆叠（或垂直写作模式），并且没有间距。 他们甚至可能溢出容器。

实用的flexbox应用程序

flexbox简化了复杂的布局。考虑以下示例：

1。媒体对象组件：

>传统的媒体对象（图像与文本一起）先前需要的浮点和透明框架黑客。 Flexbox消除了这一点：

这个简洁的代码达到相同的结果，动态适应图像尺寸。

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

2。柔性形式组件：

>使用Flexbox创建响应式形式是毫不费力的。 shorthand属性（组合

，

和flex）控制项目尺寸：> flex-grow flex-shrink>输入扩展，而按钮仍然是固定的150px。 请记住，flex-basis和

值是成比例的。

div { display: flex; }
input[type="text"], button { border: 0; font: inherit; }
input[type="text"] { flex: 1 0 auto; } /* Expands to fill space */
button { background: #003; color: whitesmoke; display: block; text-align: center; flex: 0 0 150px; } /* Fixed width */

>

flex-grow flex-shrink

3。垂直中心：

垂直居中的内容用>简化：>

这将弹性物品集中在其容器中。align-items: center

4。网格状布局：

虽然网格是网格的理想选择，但Flexbox可以使用flex-wrap: wrap创建适应性的布局，并调整flex-basis> and flex-grow：

>

.media__object { display: flex; }
.media__object img { margin-right: 20px; }

flexbox vs.网格：选择正确的工具

>

>将网格用于二维布局；使用Flexbox进行单轴布局，需要水平或垂直对齐，但并非两者兼具。 通常，项目将这两种技术结合在一起以获得最佳结果。

>进一步的学习：请咨询CSS-Tricks的“ Flexbox的完整指南”和其他资源，以深入研究Flexbox功能。

以上是使用Flexbox创建灵活的布局的详细内容。更多信息请关注PHP中文网其他相关文章！