Flexbox: Three elements in two columns-CodePudding

I have three elements in a li item:

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

and I would like to use Flexbox to create two columns, in the left hand the image and then the paragraph and image in the right hand side but on top of each other.

So far I have in my 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;
        }
    }

It kinda works.

Two columns are created, but I can't get the paragraph and anchor to sit top of each other. The words Ecommerce and discover are side by side and not like in the image above.

Any suggestions would be gratefully accepted.

CodePudding user response：

Its not possible with flexbox because you cant overlap 2 axes which you are trying to do here. Either use floats or grid layout like:

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 ></div>
  <p>Text</p>
  <a href="#">Link</a>
</div>