CSS3 - 响应式布局【伸缩布局】

设置为伸缩盒子

display: flex;

当在元素的样式中添加如上属性时，则表明元素为伸缩盒子。

当设置某个元素为伸缩盒子后，其直接子元素将会在一行上显示（未设置为伸缩盒子时，其直接子元素需设置为 float:left; 才能在一行上显示）。

为什么在伸缩盒子中，直接子元素会在一行上显示？
1）子元素是按照伸缩盒子中的主轴方向显示的。当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将被自适应。
2）只有伸缩盒子才有主轴和侧轴。主轴：默认水平从左向右显示。侧轴：始终垂直于主轴。

设置伸缩比

问：某一个元素宽度为 577px，此元素中有 N 个直接子元素，如何将这 N 个子元素设置成同等宽度？
答：首先将元素设置为伸缩盒子，然后设置其直接子元素的伸缩比即可。

flex: n;

flex 样式属性用于设置元素的伸缩比。n 的取值为正整数，表示占整个份数中的多少份。整个份数 = 元素的每个直接子元素的 flex 属性值之和。

• 示例1：将元素分为三等分，其每个直接子元素占其中 1 分，即三分之一

运行结果：

• 示例2：将元素分为四等分。其直接子元素 class="one" 和 class="three"占其中 1 分，即四分之一；其直接子元素 class="two" 占其中 2 分，即四分之二；

运行结果：

设置伸缩盒子中子元素在主轴方向的对齐方式

justify-content: flex-start|flex-end|center|space-between|space-around;

• flex-start：默认值。主轴的开头对齐。

  
  

• flex-end：主轴的结尾对齐。

  
  

• center：主轴的中心对齐。

  
  

• space-between：主轴两端对齐，中间自适应空白空间。

  
  

• space-around：每个子元素主轴两边留有相同宽度的空白空间。

  
  

设置伸缩盒子主轴的方向

flex-direction: row|row-reverse|column|column-reverse;

• row：默认值。主轴方向为从左到右。

  
  

• row-reverse：主轴方向为从右到左。

  
  

• column：主轴方向为从上到下。

  
  

• column-reverse：主轴方向为从下到上。

  
  

设置伸缩盒子中子元素在侧轴方向的对齐方式

align-items: stretch|center|flex-start|flex-end|baseline;

• stretch：默认值。如果子元素未设置高度，则会被沿侧轴方向拉伸。

  
  

• center：子元素在侧轴中间。

  
  

• flex-start：侧轴为从上到下显示时，子元素位于侧轴上方。

  
  

-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。

设置伸缩盒子中的直接子元素换行显示

flex-wrap: wrap|no-wrap|wrap-reverse;

• no-wrap：默认值。不换行显示。
  当伸缩盒子中同一行上的所有子元素的宽度超过伸缩盒子宽度时，子元素的宽度将根据伸缩盒子宽度自适应。

• wrap：换行显示。

• wrap-reverse：以与 wrap 相反的方向换行显示。

设置伸缩盒子中换行显示子元素在侧轴方向的对齐方式

align-content: stretch|center|flex-start|flex-end|space-between|space-around;

• stretch：默认值。

• center

• flex-start

-flex-end ：侧轴为从上到下显示时，子元素位于侧轴下方。

• space-between

• space-around