乐趣区

关于css:Flex布局

根本知识点

  • container 款式
  • items 款式
    container 是一个容器,而 items 则是蕴含在容器里的项。

display:flex
将一个元素变成 flex 容器;

container 款式

1.flex-direction: 扭转 items 的流动方向(主轴)

  • row 从左到右
  • column 从上到下
  • row-reverse 从右到左
  • column-reverse 从下到上

2.flex-wrap:扭转折行,默认值是 nowrap
备注:当给 container 固定的宽度时,往容器外面增加宽度肯定 items 时,当增加的 items 数量加起来的宽度大于 container 时,往后逐步增加的 items 会因为要使 items 共处一行,而使得本人自身的宽度发生变化。

  • nowrap
  • wrap
  • wrap-reverse

3.jusify-content: 规定主轴对齐形式(默认主轴就是横轴)默认值是 flex-start

  • flex-start items 往流动的始端顶
  • flex-end items 往流动的末端顶
  • center
  • space-between
  • space-around 在 container 容器还留有空白空间时,该属性的应用会将空白空间划分为多个局部围绕在各个 items 间接。
  • space-evenly 各个 items 旁的空白空间宽度是一样的

4.align-items: 规定次轴对齐形式(默认次轴就是纵轴)默认值是 stretch

  • flex-start
  • flex-end
  • center
  • stretch 当各个 items 外面的内容大小不一样,从而导致各个 items 的高度不统一时,应用该属性会让其余 items 的高度与容器外面高度最高的 items 项保持一致。
  • baseline

5.align-content: 当有多行内容时

  • flex-start 当容器的高度大于总 items 的高度时,会使得 items 之间留有空白空间,应用该属性会使得所有 items 项个体往上聚拢。将空白空间都留在下方
  • flex-end 当容器的高度大于总 items 的高度时,会使得 items 之间留有空白空间,应用该属性会使得所有 items 项个体往下聚拢。将空白空间都留在上方
  • center 当容器的高度大于总 items 的高度时,会使得 items 之间留有空白空间,应用该属性会使得所有 items 项个体往中聚拢。将空白空间均匀散布在高低两边
  • stretch 让空白空间在各个 items 之间均匀散布
  • space-between
  • space-around

items 款式

1.order:默认值是 0
规定 container 外面 items 的排列程序,order 由小到大排列

2.flex-grow 默认值是 0
能够通过该属性扩充 items 的宽度

.item:first-child{flex-glow:1;}
.item:nth-child{flex-glow:2;}
.item:last-child{flex-glow:1;}

备注:相当于将 container 容器的宽度平均分,第一个和最初一个取得一份宽度,两头那份取得两份的宽度。

3.flex-shrink 默认值是 1
能够通过该属性将 items 的宽度进行缩放
属性值为 0 代表避免 items 被进行缩放

4.flex-basis
能够通过该属性管制基准宽度
默认值是 auto

总体缩写:
flex:flex-grow flex-shrink flex-basis

5.align-self
能够通过该属性定制 align-items
备注:align-items 是用来规定纵轴对齐形式的,比方你规定 align-items 的值是 flex-start,那么容器里的所有 items 都会往上顶,退出你想独自管制某一项的对齐形式,能够通过 align-self 属性来扭转。只须要在某个 items 项的选择器中退出该属性就行了,比方 align-self:flex-end.

须要留神的几个款式及属性

  • display:flex;
  • flex-diection:row/column;
  • flex-wrap:nowrap/wrap;
  • justify-content:conter/space-between;
  • align-items:conter;
退出移动版