CSS3 flex布局

flex-direction 属性

给元素添加display: flex属性使其变成 flex 容器。

只要给父元素添加flex-direction属性，并把属性值设置为 ​row​ 或 ​column​，即可横排或竖排它的子元素。
设为 ​row​ 可以让子元素水平排列，设为 ​column ​可以让子元素垂直排列。

flex-direction ：

• row（默认值）：主轴为水平方向，起点在左端。
• row-reverse：主轴为水平方向，起点在右端。
• column：主轴为垂直方向，起点在上沿。
• column-reverse：主轴为垂直方向，起点在下沿。
  

justify-content 属性

flex 子元素有时不能充满整个 flex 容器，所以我们经常需要告诉 CSS 以什么方式排列 flex 子元素，以及调整它们的间距。我们可以通过justify-content属性的不同的值来实现。

justify-content ：

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

align-items 属性

使用 CSS 中的align-items属性定义 flex 子元素沿交叉轴的对齐方式。

align-items：

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

flex-wrap 属性

CSS flexbox 有一个把 flex 子元素拆分为多行（或多列）的特性。默认情况下，flex 容器会调整项目大小，把它们都塞到一起。如果是行的话，所有项目都会在一条直线上。 不过，使用flex-wrap属性可以使项目换行。这意味着多出来的项目会被移到新的行或列。换行发生的断点由项目和容器的大小决定。

flex-wrap：

• nowrap：默认值，不换行。
  

• wrap：行从上到下排，列从左到右排。

• wrap-reverse：行从下到上排，列从左到右排。

order 属性

order属性告诉 CSS flex 容器里项目的顺序。
默认情况下，项目排列顺序与源 HTML 文件中顺序相同。
这个属性接受数字作为参数，可以使用负数。

<style>
  #box-container {
    display: flex;
    height: 500px;
  }
  #box-1 {
    background-color: dodgerblue;
    order:2;
    height: 200px;
    width: 200px;
  }

  #box-2 {
    background-color: orangered;
    order:1;
    height: 200px;
    width: 200px;
  }
</style>

<div id="box-container">
  <div id="box-1"></div>
  <div id="box-2"></div>
</div>

align-self 属性

align-self​ 属性允许你调整每个项目自己的对齐方式，而不是一次性设置全部项目。
因为float、clear和vertical-align等调整对齐方式的属性都不能应用于 flex 子元素，
所以这个属性显得十分有用。
align-self可设置的值与align-items的一样，并且它会覆盖align-items的值。

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

flex 属性

flex​属性是 flex-grow，flex-shrink 和 flex-basis 的简写

flex: 1 0 10px;  

flex-grow 属性

与flex-shrink相对的是flex-grow。
flex-shrink会在容器太小时对元素作出调整。
相对应的，flex-grow会在容器太大时对元素作出调整。

如果一个项目的flex-grow属性值为 1，
另一个项目的flex-grow属性值为 2，
那么后者会较前者扩大 2 倍。

flex-shrink 属性

​flex-shrink​ 属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的​flex-shrink​属性都为1，当空间不足时，都将等比例缩小。
如果一个项目的​flex-shrink​属性为0，其他项目都为1，则空间不足时，前者不缩小。

项目的flex-shrink属性接受 number 类型的值。
数值越大，该项目与其他项目相比会被压缩得更厉害。

例如，

如果一个项目的flex-shrink属性值为 1，
另一个项目的flex-shrink属性值为 4，
那么后者相比前者会受到 4 倍压缩。
注：负值对该属性无效。

flex-basis 属性

flex-basis属性：定义在分配多余空间之前，项目占据的主轴空间。
flex-basis属性定义了在使用 CSS 的flex-shrink或flex-grow属性对项目进行调整前，项目的初始大小。
flex-basis属性的单位与其他表示尺寸的属性的单位一致（px、em、%等）。

注意:设置的​flex-basis​是分配多余空间之前项目占据的主轴空间，如果空间不足则默认情况下该项目也会缩小。

设置flex-basis为350px，但空间充足
空间不足，项目缩小，小于设定值