Flexbox：两列中的三个元素

Question

我在一个LI项目中有三个元素：

<li>
    <div class="on-offer">
        <img src="#" />
        <p>Title</p>
        <a href="#">Link text</a>
    </div>
</li>

我想使用Flexbox在左手图像中创建两个列，然后在右侧的段落和图像中创建两个列，但彼此之间的顶部。

到目前为止，我在SCSS中有：

.on-offer {
        text-align:center;
        display:flex;
        flex-wrap:wrap;
        justify-content:space-between;
        p {
            font-family:$serif;
            font-style:italic;
            font-weight:400;
            color:#cc0000;
            flex:1;
        }
        img {
            width:50px;
            height:auto;
            display:block;
        }
        a {
            display:block;
            text-decoration:none;
            color:$black;
            font-family:$sans-serif;
            flex:1;
        }
    }

有点有效。

创建了两个列，但是我无法获得段落和锚点彼此顶部。电子商务和发现单词是并排的，不像上图中的单词。

任何建议都将被感激地接受。

Answer 1

使用FlexBox不可能，因为您无法重叠2个轴，您要在这里尝试进行。
要么使用floats或网格布局类似：

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

.img {
  widht: 50px;
  height: 100px;
  background: red;
  grid-area: 1 / 1 / 3 / 2;
}

p {
  grid-area: 1 / 2 / 2 / 3;
  background: blue;
  margin: 0;
}

a {
  display: block;
  grid-area: 2 / 2 / 3 / 3;
  background: green;
}

<div>
  <div class="img"></div>
  <p>Text</p>
  <a href="#">Link</a>
</div>