flex布局

属性：

容器属性：

• display: flex;

  • webkit内核需要加前缀-webkit-flex；
  • 给父元素设置时，内部子元素横向排列；
  • 当父元素空间不足时，子元素宽度平均等分；
  • 设为flex以后，子元素的float、clear、vertical-align属性将失效。

  1 2 3 4 5 6 7

  .wrap{ display: -webkit-box; /* 兼容低版本safari */ display: -moz-box; /* 兼容低版本FireFox */ display: -ms-flexbox; /* 兼容IE10 */ display: -webkit-flex; /* 兼容webkit */ display: flex; }

• flex-direction：主轴方向（排列方向）

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

• flex-wrap

  • nowrap（默认值）：不换行，当父元素空间不足时，子元素宽度平均等分;
  • wrap：换行，第一行在最上面；
  • wrap-reverse：第一行在最下面。

• flex-flow：是flex-direction和flex-wrap的简写，默认值是row nowrap。

• justify-content（主轴方向对齐）

  • flex-start（默认值）：起点对齐；
  • flex-end：终点对齐；
  • center：居中；
  • space-between：分散居中（两端对齐，间隔相等）；
  • space-around：居中，两边边距相等。

• align-items（交叉轴对齐）

  • flex-start：起点对齐；
  • flex-end：终点对齐；
  • center：居中；
  • baseline：子元素文字底边线对齐；
  • stretch：假设主轴为x轴方向，如果子元素高度为auto，此时子元素y轴方向将撑满容器。

• align-content

子元素属性：

• flex-shrink
  • 定义子元素的缩小比例；
  • 默认值为1，此时当父元素空间不足时，被定义的子元素等比例缩小；
  • 设置0时不缩放。
• order
  • 默认值为0；
  • 代表排列顺序，类似index。
• align-self
  • 自己单独设置对齐方式,可以覆盖align-items属性;
  • auto（默认值）：表示继承父元素align-items的值,如果没有父元素，则等同于stretch；
  • flex-start：起点对齐；
  • flex-end：终点对齐；
  • center：居中对齐；
  • baseline：文字底边线对齐；
  • stretch：当交叉轴方向尺寸不定时，该方向尺寸撑满父容器。
• flex-grow
  • 如果所有子元素都设置该属性为1，则等分父元素剩余空间，如果其中一个子元素属性为3，则该元素占的剩余空间为（3/所有该属性值的和）；
  • 默认值为0，不占剩余空间。
• flex-basis
• flex
  • flex-grow,flex-shrink,flex-basis的集合；
  • 有两个快捷值：auto（1,1,auto）和none（0,0,auto）。