CSS

CSS

Flex

container attribute

1. flex-wrap 显示还是多行显示 wrap 多行 nowrap 不换行
2. justify-content: center 水平居中
3. align-items: center 垂直居中

item attribute

1. order 顺序

2. flex-basis 初始大小

3. flex 第一个值 第二个值 第三个值
   • 第一个值 flex-grow, 父级的剩余空间按照比例进行压缩划分。

• 第二个值 flex-shrink, 溢出部分 按照比例进行划分

width: 100
flex-shrink: 1

width: 200
flex-shrink: 1

width: 300
flex-shrink: 1

加权总和 = 每个元素的宽度 * flex-shrink值 的和 100 * 1 + 200 * 1 + 300 * 1 = 600

压缩率 = ( flex-shrink * 多出width ) / 加权总和

item1 100 / 600 = 0.16666 压缩宽度 = 0.1666 * 100 = 16.6 宽度 = 100 - 16.6 = 83 item2 200 / 600 = 0.3333 压缩宽度 = 0.3333 * 100 = 33.3 宽度 = 200 - 33.3 = 166.6 item3 300 / 600 = 0.5 压缩宽度 = 0.5 * 100 = 50 宽度 = 300 - 50 = 250

• 第三个值 flex-basis

position

static relative absolute

box model

default: content-box

.box {
  background: red;
  height: 100px;
  width: 100px;
  margin: 20px;
  padding: 10px;
  box-sizing: border-box;
}

nth-child

div:nth-child(2) {
  background: red;
}

/* Selects the second li element in a list */
li:nth-child(2) {
  background: lightgreen;
}

/* Selects every third element among any group of siblings */
:nth-child(3) {
  background: yellow;
}