Skip to main content

flex 模型 container/item

Docs

给这些 flexible 元素的父元素设置 display: flex; 就像一个块级元素，但是它的子元素布局为 flex 项。如果你希望该元素的子元素作为 flex 项，你也可以使用 display: inline-flex;，但是该元素的行为类似于行内元素。

当元素表现为 flex 框时，它们沿着两个轴来布局：

在从左到右的语言中，三个 flex item 项并排放置在 flex 容器中。

  • 主轴（main axis）是——弹性容器布置 flex 方向上的轴——是水平的。主轴的两端是开始端和结束端，分别位于左侧和右侧。
  • 交叉轴（cross axis）是垂直的；垂直于主轴。交叉轴的开始端和结束端分别位于顶部和底部。
  • flex item 项沿着主轴排列，在这种情况下，宽度称为主轴尺寸，flex 项沿交叉轴排列，在这种情况下，高度称为交叉尺寸。

flex 模型

  • 主轴（main axis）是沿着 flex 元素放置的方向延伸的轴（比如页面上的横向的行、纵向的列）。该轴的开始和结束被称为 main start 和 main end。
  • 交叉轴（cross axis）是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。
  • 设置了 display: flex 的父元素被称之为 flex 容器（flex container）。
  • 在 flex 容器中表现为弹性的盒子的元素被称之为 flex 项（flex item）。

flex 布局的重要概念

  • 两个重要的概念：
    • 开启了 flex 布局的元素叫 flex container
    • flex container 里面的直接子元素叫做 flex item
  • 当 flex container 中的子元素变成了 flex item 时，具备一下特点：
    • flex item 的布局将受 flex container 属性的设置来进行控制和布局;
    • flex item不再严格区分块级元素和行内级元素;
    • flex item默认情况下是包裹内容的，但是可以设置宽度和高度;
  • 设置 display 属性为 flex 或者 inline-flex 可以成为 flex container
    • flex：flex container 以 block-level 形式存在
    • inline-flex：flex container 以 inline-level 形式存在
Details