css弹性盒模型

弹性盒模型的作用：用来辅助div+css布局，解决传统布局的繁琐不便之处并且达到自适应布局模式，也称之为弹性布局。

概念：是一种当页面需要自适应不同屏幕大小以及设备类型时确保元素拥有恰当行为的布局模式

弹性盒子结构

弹性盒子是由弹性容器和弹性项目构成。

• 弹性容器：包含弹性项目的父元素
• 弹性项目：弹性容器里面的每个子元素。
• 主轴：弹性项目排列所有轴就称为主轴。默认主轴是水平方向
• 侧轴：与主轴垂直的方向就称为侧轴。

设置弹性容器（给父元素设置）

         display：flex:将盒子变为块级的弹性容器，对其他兄弟元素来说，它依然是一个普通的块级标签，对里面的子元素（弹性项目）来说，这个盒子是它们的弹性容器。
         display:inline-flex：将盒子变为行内块级弹性容器，对其他兄弟标签来说，它是一个普通的行内块级元素，对里面的子元素来说，它是弹性容器。

弹性项目的排列方式

flex-wrap 控制弹性项目是否换行

• flex-wrap：nowrap; 不换行（默认值）

• flex-wrap:wrap; 换行

flex-direction 默认是水平方向为主轴，侧轴是与主轴垂直的轴为侧轴

• row:默认值，沿着水平主轴让元素从左到右的排列
• row-reverse：沿着水平主轴让元素反向排列
• column:设置垂直方向为主轴，元素从上到下排列（改变主轴）
• column-reverse:设置垂直方向为主轴，元素反向排列

justify-content分配主轴方向上的富裕空间

flex-start:默认值，将主轴方向的富裕空间分配在弹性项目的最后（左对齐）
flex-end:将富裕空间分配在主轴的弹性项目最前面（右对齐）
center:弹性项目居中
space-between:首尾紧靠弹性容器，中间弹性项目均分
space-around:每个弹性项目两边的距离是一样的。
space-evenly:每个弹性项目之间的距离相同，包含第一个和最后一个和弹性容器的距离。

align-items分配侧轴方向上的富裕空间flex-strat:默认值，弹性项目在侧轴的顶部对齐
flex-end:弹性项目在侧轴的底部对齐
center:弹性项目在侧轴上居中对齐
strech:拉伸，如果弹性项目没有设置高度，弹性项目会将弹性容器撑满

flex-grow（给子元素设置）消化富裕空间

flex-grow ：数字;（弹性因子）

• 默认为0 ，取值为数字
  • 0表示不参与富裕空间的消化
• 原理：弹性项目会将弹性容器里面多余的空间（富裕空间）分成等量的份数，然后按照每个弹性项目的比例分配给弹性项目里面，弹性项目去消化。
• 弹性因子越大，分配的弹性空间越大，盒子的宽度越大。