关于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;)
