HTML5 макет 2 на 2 с Flex-box

Question

Я разработчик приложений в смысле автономных приложений или сервисов, так сказать, без внешнего интерфейса, и прошло много времени с тех пор, как я видел какой-либо HTML или подобное.

Но новые возможности HTML5 действительно заинтересовали меня, теперь я знаю, что пока Flex-box не поддерживается одинаково в том смысле, что вам нужно использовать webkit-box и moz-box и т. Д.

Но я подумал, что для блога я мог бы заняться изменением дизайна.

Но я не могу понять, как вы будете делать макет 2 на 2, например:

• Вверху слева: фиксированная высота, динамическая ширина
• Вверху справа: фиксированная высота, фиксированная ширина
• Кнопка слева: динамическая высота, динамическая ширина.
• Кнопка вправо: динамическая высота, фиксированная ширина
• Логотип накладывается сверху слева на кнопку справа.
• Небольшая граница между коробками.

Динамическая высота от нижних рамок не обязательна, контент, скорее всего, будет заполнять их, пока они выровнены.

Но как бы вы лучше всего делали этот макет с новыми возможностями?

Редактировать: в конце концов я отказался от этого.

Answer 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>