CSS-flex布局

青蛙小游戏学习flex布局

什么是flex布局？

flex布局又称“弹性盒布局”，顾名思义元素就像有弹性一样，会根据空间的大小弹性地分布，甚至会像有弹性一样改变自身的宽度或高度“挤”在同一容器中。

flex布局的组成

flex布局主要由2个内容组成：父元素container，以及子元素items，items在container中实现flex布局。container items是大家约定俗称的称呼。

flex布局的重点代码：

display:flex
flex-direction:row/column
flex-wrap:wrap;
justify-content:center/space-between
align-items:center

flex布局的注意点

1. 尽量不要给定固定的 width height，否则弹性布局会变得不那么弹性。

2. 使用min-width、max-width、min-height、max-height来限制宽度

3. flex布局和margin-xxx：auto 搭配使用有以外的效果。

container的样式

1. 主轴的流动方向：flex-direction

• row：默认值，从左到右
• column：从上到下。
• row-reverse：反row，即从右到左。

• column-reverse：反column，即从上到下

  
  
  flex-direction

2. 折行：flex-wrap

• wrap：折行

  
  
  wrap

• nowrap：不折行，默认值。不折行的情况下，当item总宽度大于container总宽度，item的宽度会被挤压。

  
  
  nowrap

• wrap-reverse：反向折行，非常反人类，不推荐使用。

  
  
  wrap-reverse

3. items排列类型（要考虑主轴的方向）：justify-content

• flex-start：默认值，根据主轴方向，所有items往开始的方向（左、上）靠拢

• flex-end：根据主轴方向，所有items往终点方向（右、下）靠拢

• space-between：多余的空间放在中间。

  
  
  space-between

• space-around：多余的空间以环绕items的模式排列。每个item两边都有同样大小的间隔（item1的右边的间隙是item1自己右边的间隙+item2左边的间隙）。

  
  
  space-around

• space-evenly：多余的空间以环绕items的模式排列，但是整体间隙平均化（不是完全平均，但是可以先这么理解）。

  
  
  space-evenly

4. 次轴方向（当item高度不一的时候才会涉及到）：align-items（注意这个复数s）。次轴方向就是和主轴方向垂直的轴。

• strech：所有item的长度或宽度拉伸至与最长或者最宽的item相同。前提是这些items都没有固定的width或height，否则还是会以给定的width height为主，不会伸缩。

  
  
  strech

• flex-start：根据次轴的方向，所有items往开始的方向（上、左）靠拢

  
  
  flex-start

• flex-end：根据次轴的方向，所有items往开始的方向（下、右）靠拢

  
  
  flex-end

• center：根据次轴方向，所有items居中对齐

  
  
  center

• baseline：根据文字的基线对齐。基本不会使用。

5. 多行内容排列：align-content

可能的值：space-between space-around flex-start flex-end center strech

align-content

6.flex-flow：缩写样式 将 flex-direction flex-wrap写在一起，空格隔开。

items的样式

• flex-basis：默认为auto，指定了 items 在主轴方向上的初始大小。一般不使用，而是用width、height代替。

• order：默认为0。order越大，item的排列顺序就越往后。order相同的item根据html的顺序排列。order可以是负数，也是越小越靠前。

  
  
  order

• flex-grow：影响多余空间的分配，值越大分配的空间越多，分配比例：flex-grow/总flex-grow。默认值为0，不分配任何多余的空间。

flex-grow

• flex-shrink：当container空间全部被占满且不足时，flex-shrink值越大的item将会被“挤压”得越厉害。默认值为1。

image.png

• align-self：属性值和align-items的一样，只是它只作用于一个item，而align-items作用于所有items。
• flex：flex-grow flex-shrink flex-basis 三个样式的缩写，空格隔开