flex简要概念

display:flex 是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。是W3C提出的一种新的方案，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持。

Flex 布局的主要思想是使父容器能够调节子元素的宽度/高度（和排列顺序），从而能够最好地填充可用空间（主要是为了适应所有类型的显示设备和屏幕尺寸）。flex布容器能够放大子元素使之尽可能填充可用空间，也可以收缩子元素使之不溢出

display：flex

加入”display：flex”语句后, 默认值为水平从左往右排列布局如图所示

可在父项添加的其他相关属性值

flex-direction:布局的排列方向 （主轴排列方向）

  • row 默认值，显示为行。方向为当前文档水平流方向，默认情况下是从左往右。（1 2 3 4）

  • row-reverse 显示为行。但方向和row属性值是反的（4 3 2 1）


  • column 显示为列

  • column-reverse 显示为列。但方向和column属性值是反的


flex-wrap:是否进行换行处理

  • nowrap： 默认值，不换行处理
  • wrap：换行处理
  • wrap-reverse： 反向换行

justify-content：属性 决定了主轴方向上子项的对齐和分布方式

  • flex-start：子项都去起始位置对齐。(默认值)
  • flex-end：子项都去结束位置对齐。

  • center：子项都去中心位置对齐。

  • space-between: 表现为两端对齐。between是两端的意思，意思是多余的空白间距只在元素中间区域分配。

  • space-around: around是环绕的意思，意思是每个flex子项两侧都环绕互不干扰的等宽的空白间距，最终视觉上边缘两侧的空白只有中间空白宽度一半。

  • space-evenly: evenly是匀称、平等的意思。也就是视觉上，每个flex子项两侧空白间距完全相等。

align-items : 每一行中的子元素上下对齐方式

  • flex-start： 默认值,子项在垂直方向的顶端对齐

  • center：子项在垂直方向的中间位置对齐


  • flex-end：子项在垂直方向底端的位置对齐