CSS 布局

CSS layout - Learn web development | MDNopen in new window

左侧定宽,右侧自适应

flex 左侧定宽,右侧自适应open in new window

	flex-grow: 1;

position 左侧定宽,右侧自适应open in new window

	width: calc(100vw - 200px)

grid 左侧定宽,右侧自适应open in new window

	grid-template-columns: 200px 1fr;

table 结构化内容

  • html 同样有表格标签,但不建议用,使用 css table 可以只使用需要的特性,灵活
  • flex 也能实现,table 兼容性更好
  • seo、性能有问题?
  • 最常用场景,动态高度下,实现垂直居中。通过声明table-cell,使vertical-align可用
.box {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
}

.box {
  display: table;
  margin: auto;
}
  • 媒体查询,利用 table 属性,调整排序
/* 768px */
@media only screen and (max-width:48em) {
   .boxes {
      display:table;
      width:100%;
   }
   .box {
      display:block;
      width:100%;
   }
   .three { display:table-caption; }
   .four { display:table-header-group; }
   .one { display:table-footer-group; }
}

The Anti-hero of CSS Layout - "display:table" | Colin Tohopen in new windowSolved by Flexbox — Cleaner, hack-free CSSopen in new window

列表水平排列带 gap wrap

.list {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.item {
  width: calc(25% - 0.02rem);
}

Grid VS Flexbox

Flexbox 非常适合一维布局,但是对于其它一切,我只会使用使用 Flexbox 如果不能用 Grid 的话。

Flexbox 是内容驱动的。 渐进式渲染会在发现盒子时,给你提供不稳定的布局。 Grid 允许你预先定义布局,因此渐进式渲染可以保持稳定。

Grid 现在除了 IE,都有很好兼容性

Don't use flexbox for overall page layout - JakeArchibald.comopen in new window

Last Updated:
Contributors: cyio