Flexbox 布局

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Flexbox 布局相关的知识,希望对你有一定的参考价值。

Flexbox 是 flexible box 的简称(愚人码头注:意思是“灵活的盒子容器”),是 CSS3 引入的新的布局模式。它决定了元素如何在页面上排列,使它们能在不同的屏幕尺寸和设备下可预测地展现出来。

它之所以被称为 Flexbox ,是因为它能够扩展和收缩 flex 容器内的元素,以最大限度地填充可用空间。与以前布局方式(如 table 布局和浮动元素内嵌块元素)相比,Flexbox 是一个更强大的方式:

  • 在不同方向排列元素
  • 重新排列元素的显示顺序
  • 更改元素的对齐方式
  • 动态地将元素装入容器

什么情况下不建议使用 Flexbox ?

虽然 Flexbox 非常适合缩放,对齐和重新排序元素,但以下情况应该尽量避免使用 Flexbox 布局:

在 Flexbox 模型中,有三个核心概念:
– flex 项(愚人码头注:也称 flex 子元素),需要布局的元素
– flex 容器,其包含 flex 项
– 排列方向(direction),这决定了 flex 项的布局方向

1)创建一个 flex 容器

要创建一个 flex 容器,您只需要将一个 display: flex 属性添加到一个元素上。默认情况下,所有的直接子元素都被认为是 flex 项,并从左到右依次排列在一行中。如果 flex 项的宽度总和大于容器,那么 flex 项将按比例缩小,直到它们适应 flex 容器宽度。

2)将 flex 项排成一列

可以通过(在 flex 容器中)设置 flex-direction: column 使 flex 项垂直布局。也可以通过设置 flex-direction: column-reverse 或 flex-direction: row-reverse 来使 flex 项以相反的顺序排列。

以上是关于Flexbox 布局的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 flexbox 获得这样的布局?

flexbox布局的兼容性

我该如何编写这个 CSS Flexbox 布局? [关闭]

css 此代码将删除WordPress库图像周围的边框,并将布局模型更改为CSS flexbox。

Angular2 组件标签破坏了 flexbox 布局

IE11 flexbox:影响布局的不透明度