带有 Flex-box 的 HTML5 2 by 2 布局答案

【问题标题】：HTML5 2 by 2 layout with Flex-box带有 Flex-box 的 HTML5 2 by 2 布局
【发布时间】：2011-12-12 15:41:48
【问题描述】：

我是一个应用程序开发人员，可以说是没有前端的离线应用程序或服务，我已经很久没有看到任何 HTML 或类似的东西了。

但是 HTML5 的新特性其实让我很感兴趣，现在我知道了，Flex-box 目前还没有统一支持，需要使用 webkit-box 和 moz-box 等。

但我认为对于博客，我可能会开始考虑改变设计。

但我不太清楚你会如何制作 2 x 2 布局，有点像：

左上角：固定高度，动态宽度
右上：固定高度，固定宽度
左按钮：动态高度，动态宽度。
右按钮：动态高度，固定宽度
徽标从左上角重叠到按钮右侧。
框之间的小边框。

框下方的动态高度不是必须的，只要它们对齐，内容很可能会填充它们。

但是，您将如何最好地使用新设施进行这种布局？

编辑：我最终放弃了。

【问题讨论】：

你能至少分享一下预期的 HTML 代码吗？也许还有一些CSS？我不确定你是否需要 HTML5 或 CSS3，但我可能是错的......就像我说的，一些代码来摆弄会有所帮助。
没有当前的 HTML 或 CSS，也没有任何接近工作的东西，这就是我首先问这个问题的原因，因为我不知道该怎么说加入新功能。
而且你可能不需要 HTML5 或 CSS3，但关键是要使用新功能，否则问题的措辞会有所不同。

标签： html css flexbox

【解决方案1】：

对于布局，可以使用

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}

<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>

要添加徽标，您可以使用伪元素的边框创建一个三角形，然后旋转它。

.wrapper {
  display: flex;
}
.left, .right {
  display: flex;
  flex-direction: column;
}
.right {
  width: 200px; /* Fixed width */
}
.top, .bottom {
  border: 1px solid;
  margin: 1px;
  position: relative;
}
.top {
  height: 100px; /* Fixed height */
}
.bottom {
  flex-grow: 1; /* Same (flexible) height for both */
}
.left > .top:after, .right > .bottom:after {
    content: '';
    position: absolute;
    border: 5px solid transparent;
}
.left > .top:after {
    right: 0;
    bottom: 0;
    border-right: none;
    border-left: 15px solid black;
    transform: translateY(50%) rotate(45deg);
    transform-origin: right;
}
.right > .bottom:after {
    left: 0;
    top: 0;
    border-left: none;
    border-right: 15px solid black;
    transform: translateY(-50%) rotate(45deg);
    transform-origin: left;
}

<div class="wrapper">
  <div class="left">
    <div class="top">Left top</div>
    <div class="bottom">Left bottom</div>
  </div>
  <div class="right">
    <div class="top">Right top</div>
    <div class="bottom">Right bottom</div>
  </div>
</div>

【讨论】：