弹性盒子布局知识总结

栅格系统

• 咋网页制作中，用固定的格子进行网页布局。

弹性盒子布局

• 可以轻松创建响应式网页布局，为盒状模型增加灵活性

• 三个部分：容器、子元素、轴

• display用于指定弹性盒子的容器，其值可以为flex；行元素inline-flex。

• flex-flow：用于排列弹性子元素。

  （1）.flex-direction：

   - row：子元素按轴方向顺序排列。
   - row-reverse：子元素逆序排列。
   - column：纵轴方向顺序排列。
   - column-reverse：子元素纵轴方向逆序排列。
  

  （2）flex-wrap:

   - nowrap:该情况flex子项可能会溢出容器。
   - wrap：flex为多行，flex子项溢出的部分会被放置新行。
   - wrap-reverse：反转wrap排列。
  

• justify-content：设置子元素如何在当前轴方向排列。

    - flex-start：子元素将向行起始位置对齐 
    - flex-end：将行结束位置对齐 
    - center：将中间位置对齐
    - space-between：平均分布在行里
    - space-around:平均分布在行里
  

• align-items:设置子元素垂直方向排列

    - flex-start：垂直方向起始位置对齐
    - flex-end：垂直方向结束位置对齐
    - center：垂直方向中间位置对齐
    - baseline：子元素的行内轴与侧轴为同一条，该值将参与基线对齐
    - stretch：如果指定侧轴大小的属性值为auto，则其值会使项目的边距盒尺寸尽可能接近所在行的尺寸。
  

• order：设置子元素出现的顺序。

    - flex-grow：扩展比率
    - flex-shrink:收缩比率
    - flex-basis：宽度，像素的伸缩性。
  

• align-self：

    - 能覆盖align-items属性，单独设置子元素纵轴排列
    - auto|flex-start|flex-end|center|baseline|stretch
  

• 视口

 <meta name="viewport" content="user-scalable=no, width=device-width, 
initial-scale=1.0, maximum-scale=1.0">

• 媒体查询
• 根据视口宽度、设备反向等差异来改变页面的显示方式。

@media  screen  and  (max-width: 960px) {
	/*样式设置*/
}