Выравнивание flex элементов

Question

Нужно, чтобы последняя статья ( белый блок ) находился под картинкой ( черный блок ), как сделать наиболее лаконичным способом?
HTML так же можно поменять, если разметка не правильная

body {
  margin: 0;
  background: #f0f0f0;
}

.wrapper {
  display: flex;
  margin: 20% 20%;
}

.img {
  width: 300px;
  height: 300px;
  margin-right: 20px;
  background: gray;
}

.item {
  width: 300px;
  height: 85px;
  background: #fff;
  margin-bottom: 20px;
}

<div class="wrapper">
  <div class="img"></div>
  <div class="articles">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>
</div>

Answer 1

На мой взгляд, самое лучшее решение на CSS с использованием свойств inline-block и float.

Полностью адаптивно.

* {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  overflow: hidden;
  padding: 2%;
  background-color: #f2f0f2;
}

.wrp__left, .wrp__right {
  display: inline-block;
  float: left;
}

.wrp__left {
  width: 49%;
}

.wrp__right {
  float: right;
  width: 49%;
}

.block {
  width: 100%;
  padding: 50% 0;
  background-color: #818081;
}

.wrp {
  width: 100%;
  padding: 0;
}

.block__wrp__01, .block__wrp__02, .block__wrp__03, .block__wrp__04 {
  display: inline-block;
  float: left;
  width: 100%;
}

.block__01, .block__02, .block__03, .block__04 {
  width: 100%;
  padding: 15% 0;
  background-color: #ffffff;
}

.block__02, .block__03, .block__04 {
  margin-top: 5%;
}

@media screen and (max-width: 600px) {
  .wrp__left,
  .wrp__right {
    width: 100%;
    float: none;
  }
  .block__01 {
    margin-top: 4%;
  }
}

<div class="wrapper">
  <div class="wrp__left"><div class="block"></div></div>
  <div class="wrp__right">
    <div class="wrp">
      <div class="block__wrp__01"><div class="block__01"></div></div>
      <div class="block__wrp__02"><div class="block__02"></div></div>
      <div class="block__wrp__03"><div class="block__03"></div></div>
      <div class="block__wrp__04"><div class="block__04"></div></div>
    </div>
  </div>
</div>

Answer 2

Нужно, чтобы последняя статья ( белый блок ) находился под картинкой ( черный блок ), как сделать наиболее лаконичным способом? HTML так же можно поменять, если разметка не правильная

Предложу вот такой вариант с использованием grid...

body {
  margin: 0;
  background: #f0f0f0;
  padding: 20px;
}

.wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 85px;
  gap: 20px;
}

.img {
  /*
  width: 300px;
  margin-right: 20px;
  height: 300px;
  */
  grid-row: span 3;
  background: gray;
}

.item {
  /*
  width: 300px;
  height: 85px;
  margin-bottom: 20px;
  */
  background: #fff;
}

<div class="wrapper">
  <div class="img"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

БЛОГ НА HUSL

Выравнивание flex элементов

Ответы (2 шт):