Flex和Gird的区别

Flex 是弹性布局。

通过控制主轴和交叉轴来进行布局，大白话就是控制横向、纵向元素的排列方式。

Gird 是网格布局。

像表格一样，将容器划分成行和列，通过设置属性，对其进行整体控制。

Flex 弹性布局笔记

1.1、在css里设置 display: flex; 属性得到弹性布局，此时默认排列的两根轴是 → ↓

scss

.box {
  display: flex; // 设置弹性布局，其它值默认
}

投币

1.2、通过设置 flex-direction: column; 属性改变主轴方向，此时默认排列的两根轴是 ↓ →

scss

.box {
  display: flex;
  flex-direction: column;  // 设置弹性布局，其它值默认
}

投币

提示：

并不是所有属性都要写，当仅仅只是希望横向排列时就可以仅写个 display: flex; 即可，根据不同的场景设置不同的值。

2.1、通过 justify-content: 值 ; 属性改变主轴排列

scss

// 主轴里的内容左对齐
.box {
  display: flex;
  flex-direction: row;
  justify-content: flex-start; // 默认排列方式（首对齐）
}

投币

scss

// 主轴里的内容居中
.box {
  display: flex;
  flex-direction: row;
  justify-content: center; // 居中对齐
}

投币

scss

// 主轴里的内容右对齐
.box {
  display: flex;
  flex-direction: row;
  justify-content: flex-end; // 尾对齐
}

投币