Flex - содержимое выравнивается по низу

Question

Как мне сделать этот макет с помощью flex?Левый столбец содержит текст с динамической высотой

Правый столбец состоит из 2 частей ... текста, который выровнен по верху и текста, который выровнен по низу.Возможно ли это с помощью flex?

------------------------------------------
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   | XX Align To Top XX |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |                    |
| Dynamic Height    |       Empty        |
| XXXXXXXXXXXXXXX   |                    |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
| XXXXXXXXXXXXXXX   |  Align to bottom   |
| XXXXXXXXXXXXXXX   | XXXXXXXXXXXXXXXXXX |
------------------------------------------

Answer 1

1. У вас будет 2 блока в качестве родительских, а во втором блоке у вас будет 3 блока.
2. В родительском блоке вам нужно использовать display: flex, чтобы сделать 2 родительских блока в строке.
3. Во втором родительском блоке вам также нужно использовать display: flex и flex-direction: column, чтобы сделатьвнутренний вид столбца 3 блоков.Также вам нужно добавить justify-content: space-between, чтобы разделить ваши 3 блока.

.parent {
  display: flex;
  color: #fff;
}

.child__first,
.child__second {
  width: 50vw;
  text-align: center;
}

.child__first {
  height: 200px;
  background-color: #ff00ff;
}

.child__second {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 300px;
  background-color: #ff0000;
}

<div class="parent">
  <div class="child__first">Child First</div>
  <div class="child__second">
    <div class="child__second-top">Child Second Top</div>
    <div class="child__second-middle">Child Second Middle</div>
    <div class="child__second-bottom">Child Second Bottom</div>
  </div>
</div>

Answer 2

* {
  box-sizing: border-box;
}

div {
  border: 1px solid black;
}

.parent,
.child {
  display: flex;
}

.child {
  flex: 1;
  flex-direction: column;
  justify-content: space-between;
}

<div class="parent">
  <div class="child">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis m ipsum dolor sit amet, consectetur adipisicing elit. Cumque, totam! Voluptatum, necessitatibus. Reiciendis quia nisi, quos vero architecto amet, incidunt sint tempore fugit, nulla in, saepe perspiciatis eos eius odit!</div>
  <div class="child">
    <div class="top">Top</div>
    <div class="bottom">Bottom</div>
  </div>

</div>

Answer 3

Я сделал то, что вы ищете

.container {
  display: flex;
}

.left {
  background: red;
  padding: 10px;
}

.right {
  background: green;
  padding: 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

<div class="container">
  <div class="left">left content <br> left content <br> left content <br> left content</div>
  <div class="right">
    <div class="top">
      top content
    </div>
    <div class="bottom">
      bottom content
    </div>
  </div>
</div>

Answer 4

Я думаю, это то, чего вы пытаетесь достичь.

Вам нужно будет поиграть с flex containers.В этом случае я использовал гибкий контейнер main.И правильный гибкий элемент, который я превращаю в другой гибкий контейнер, чтобы достичь того, что вы ищете.

Надеюсь, это поможет:>

.main {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

.col{
  width: 50vw;
  height: 300px;
  background: red;
  border: 1px solid grey;
}

.col2 {
   display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-between;
}
.col2 div {
  height: 100px;
  width: 100%;
   background: blue;
}

<div class="main">
  <div class="col col1">

  </div>
  <div class="col col2">
    <div class="top"></div>
    <div class="bottom"></div>
  </div>
</div>