15-弹性布局小坑

发表于 | 分类于 |

1

1
2
	display: none;
display: flex;

二者一齐出现时，display弹性布局要在后面才不会被覆盖掉。

2. 弹性布局针对的是display:block的元素

3. 图文布局: 文章的div，需要设置 min-width:0

1
2
3
4
5
.news-item__bd{
    flex: 1;
    min-width: 0;
    word-break: break-all;
}

4. 平均排列

1
2
3
4
5
6
7
8
9
10
11
12
13
.discount__bd {
    display: flex;
    flex-flow: row wrap;
    justify-content: space-between;
}

.discount__bd .discount__item.empty {
    height: 0;
    border: none;
    padding-top: 0;
    padding-bottom: 0;
    visibility: hidden;
}

如果是2列，则不用加empty元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.side__bd{
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
  padding: 0 8px;
}
.side__item{
  width: calc(50% - 4px); //不用加虚拟empty元素
  height: 1.5rem;
  margin-bottom: 8px;
  display: table;
  padding: 0 10px;
  box-sizing: border-box;
  background: #f0f0f0;
  border-radius: 4px;
}