display

目录

• flex
• grid
  • grid-template-areas

---

display 是影响元素布局的一个重要属性

flex

流式布局

这里有个很好的教程帮助你快速上手 flex 的属性

• justify-content
• align-items
• flex-direction
• order
• align-self
• flex-wrap
• flex-flow
• align-content

小青蛙flex

值得玩2遍

grid

grid是个 非常强大的布局 在常见环境中 我觉得他比 flex 更加灵活好用

CSS Grid 网格布局教程 - 阮一峰的网络日志

grid-template-areas

这是一个 在布局时很实用的属性，解决实用 flex 时 需要嵌套多层来实现复杂布局的问题，配合grid-template-columns等食用更佳

.container {
  display: grid;
  grid-template-areas:
    "header header header"
    "sidebar main main"
    "footer footer footer";
}

不过记得需要在子元素中 搭配 grid-area 使用

.header {
  grid-area: header;
  /* ... */
}