css flex 弹性盒布局

css flex 弹性盒布局：

1、css弹性盒是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

弹性盒由弹性容器（flex-container）和弹性子元素（flex-item）构成。

​ 弹性盒通过给父元素设置 display:flex 使之成为弹性盒容器。

弹性盒有以下几个属性：

设置在父元素上的属性：

• flex-direction（定义项目的排列方式）： row、column、row-reverse、column-reverse

• flex-wrap（项目是否换行 默认不换行）：wrap（nowrap）wrap-reverse

• justify-content（定义项目在横轴的排列方式）：flex-start | flex-end | center | space-between | space-around

• align-items（项目在交叉轴上的排列方式）:flex-start | flex-end | center | baseline | stretch

• align-content（多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。）:flex-start | flex-end | center | space-between | space-around | stretch 设置多根轴线的对齐方式。

• flex-flow：flex-direction和flex-wrap

.parent {
  display: flex;
  flex-wrap: nowrap;
  flex-direction: row;
  /* flex-flow: row nowrap; */
  justify-content: start;
  align-items: start;
  align-content: start;
}

设置在子元素上的属性：

• order（属性定义项目的排列顺序。数值越小，排列越靠前，默认为0）

• align-self：auto (元素继承了他的父容器align-items，如果没有父容器 默认“strecth”)| flex-start | flex-end | center | baseline | stretch |initital|inherit

• flex：auto | initial | none | inherit | [ flex-grow ] || [ flex-shrink ] || [ flex-basis ] 设置子元素如何分配空间

• flex-grow：设置或检索弹性盒子元素的扩展比率

• flex-shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。

• flex-basis:用于设置或检索弹性盒伸缩基准值。

项目的属性就不举例了。。。