CSS等分布局

发表于 | 更新于 | 分类于 | 评论数： | 阅读次数：

CSS等分布局。

display: table + display: table-cell

IE8+及现代版本的浏览器都支持此属性。

1
2
3
4
5
6
7
8
9
10
11
12
.table{
  display: table;
  table-layout: fixed;
  width: 100%;
}

.item{
  display: table-cell;
  padding: 10px 0;
  text-align: center;
  border: 1px solid #39b54a;
}

【注意】设置了display：table-cell的元素：

  • 对宽度高度敏感；
  • 对margin值无反应；
  • 响应padding属性；
  • 内容溢出时会自动撑开父元素；

text-align: justify

text-align:justify不会处理被打断的行和最后一行。列表（或文字）要两端对齐的前提就是内容必须超过一行。所以，解决最后一行元素无法两端对齐文字的方法，就是在列表（或文字段）的最后创建一个高度为0、宽度100%的透明的inline-block的标签层：

1
2
3
4
5
6
.justify:after{
  content: '';
  height: 0;
  width: 100%;
  display: inline-block;    
}

Flex布局

flex: 1

1
2
3
4
5
6
7
.flex {
  display: flex;
}

.item {
  flex: 1;
}

flex + space-between + width

1
2
3
4
5
6
7
8
.flex-1 {
  display: flex;
  justify-content: space-between;
}

.item-1 {
  width: 40px;
}

flex + margin: auto

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.flex {
  display: flex;
}

.item {
  width: 40px;
  margin: auto;

  &:first-child {
    margin-left: 0;
  }
  
  &:last-child {
    margin-right: 0;
  }
}

Grid布局

兼容性：CSS Grid Layout

1
2
3
4
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
}