弹性盒子的关键属性

关于弹性盒子

Flex是Flexible Box的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。

一、弹性盒子的规律是什么呢?有哪些特点呢?

- 从父元素角度看:首先自身内部"流（流式布局）"发生了改变,从流式布局变为了弹性布局(文档流变为弹性流)注:本身还是处于流式布局中没有发生改变,内部的子元素的布局变为弹性布局

-	从子元素角度分析:子元素在父容器中沿着主轴进行布局。
	
-	交叉轴与主轴垂直，默认起点与主轴一致。

-	子元素在交叉轴对齐方式，不是一个一个的子元素排列,而是已经在主轴上排列好的子元素部分整体在交叉轴上进行排列

二、弹性布局的好处

• Flexbox通常能让我们更好的操作他的子元素布局，例如：
• 如果元素容器没有足够的空间，我们无需计算每个元素的宽度，就可以设置他们在同一行；
• 可以快速让他们布局在一列； 可以方便让他们对齐容器的左、右、中间等； 无需修改结构就可以改变他们的显示顺序； 如果元素容器设置百分比和视窗大小改变，不用提心未指定元素的确切宽度而破坏布局，因为容器中的每个子元素都可以自动分配容器的宽度或高度的比例。

display:flex 将盒子变为弹性盒子

*flex-direction: 主轴的布局方向

row 自左往右(也是默认对齐)

row-reverse 主轴自右往左对齐

column 主轴自上往下对齐

column-reverse 主轴自下往上对齐

align-items 交叉轴的对齐方式

他的值有五个
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

justify-content 弹性盒子的对齐方式
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

交叉轴的对齐方式align-text
flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

弹性盒子的换行样式flex-wrap
nowrap（默认）：不换行。
wrap：换行，第一行在上方。