请教一下CSS布局排列写法？

作者站长头像
站长
· 阅读数 22
<div>
    <em>1</em>
    <em>2</em>
    <em>3</em>
    <em>4</em>
</div>

不改变HTML下如何使用flex或grid，将其排列成下列效果？1和4自适应，2与3成上下两行，占剩余空间。请教一下CSS布局排列写法？

回复
1个回答
avatar
test
2024-06-27

用flex布局：

div {
  display: flex;
  justify-content: space-between;
}

em:nth-child(2), em:nth-child(3) {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

grid布局：

div {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: auto auto;
}

em:nth-child(1) {
  grid-column: 1;
  grid-row: 1 / span 2;
}

em:nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

em:nth-child(3) {
  grid-column: 2;
  grid-row: 2;
}

em:nth-child(4) {
  grid-column: 3;
  grid-row: 1 / span 2;
}
回复
likes
适合作为回答的
  • 经过验证的有效解决办法
  • 自己的经验指引，对解决问题有帮助
  • 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
  • 询问内容细节或回复楼层
  • 与题目无关的内容
  • “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容