FlexBox布局名词

关于flexbox一些布局名称

布局名词

• 弹性容器
  通过设置display:flex或 inline-flex将其定义为弹性容器

• 弹性子元素
  弹性容器的每一个子元素变为一个弹性子元素。弹性容器直接包含的文本变为匿名的弹性子元素。

• 轴
  每个弹性盒布局以两个轴来排列。弹性子元素沿着主轴依次相互排列。侧轴垂直于主轴。

  • 属性 flex-direction 定义主轴方向。
  • 属性 justify-content 定义了弹性子元素如何在当前线上沿着主轴排列。

• 属性 align-items 定义了弹性子元素如何在当前线上沿着侧轴排列。

• 属性 align-self 覆盖父元素的align-items属性,定义了单独的弹性子元素如何沿着侧轴排列。

• 方向
  弹性容器的主轴开始、主轴结束和侧轴开始、侧轴结束边缘代表了弹性子元素排列的起始和结束位置。它们具体取决于由writing-mode（从左到右、从右到左等等）属性建立的向量中的主轴和侧轴位置。

• 属性 order
  将元素依次分组，并决定谁先出现。

• 属性 flex-flow
  是属性 flex-direction
  和 flex-wrap
  的简写，用于排列弹性子元素。

• 行
  弹性子元素根据 flex-wrap
  属性控制的侧轴方向（在这个方向上可以建立垂直的新线），既可以是一行也可以是多行排列。

• 尺寸
  弹性子元素宽高可相应地等价于主尺寸和侧尺寸，它们都分别取决于弹性容器的主轴和侧轴。

• ** min-height 和 min-width
  **属性的初始值为新增关键字 auto。

• 属性 flex
  是 flex-basisflex-grow
  和 flex-shrink
  的缩写，代表弹性子元素的伸缩性。

草案

• 2009年7月 工作草案 (display: box;)
• 2011年3月 工作草案 (display: flexbox;)
• 2011年11月 工作草案 (display: flexbox;)
• 2012年3月 工作草案 (display: flexbox;)
• 2012年6月 工作草案 (display: flex;)
• 2012年9月 候选推荐 (display: flex;)