CODEWITHSUNDEEP
htmlcssflexbox
Iruss
Iruss

Reputation: 229

Flex-wrapping without nested divs

I'm trying to make a horizontal card using flexbox without having nested divs.

For example, what I have right now is this:

.card {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.card-img {
  width: 37%;
}

.card-content {
  width: 63%;
}
<div class='card'>
  <div class='card-img'>
    <img src='example' />
  </div>
  <div class='card-content'>
    <div class='card-number'>
    </div>
    <div class='card-type'>
    </div>
  </div>
</div>

Example

This layout works for now, but when the viewport resizes, I want the horizontal card to change into a vertical one (which it already does). However, I want to re-order the card-img, card-number, and card-type using flex order.

How could I get this same horizontal layout while using this type of div layout?

Edit: Sorry for the confusing wording, what I was aiming to do was to create a horizontal layout that works like the image except with 3 separate divs, not 2 divs with 1 being a nested div. Sorry!

Upvotes: 2

Views: 64

Answers (1)

Michael Benjamin
Michael Benjamin

Reputation: 371003

.card {
  display: flex;
}

.card-img {
  flex: 0 0 37%;
  border: 1px dashed red;
}

.card-number {
  flex: 0 0 30%;
    border: 1px dashed red;
}

.card-type {
  flex: 1 0 30%;
    border: 1px dashed red;
}

img {
  width: 100%;
}

.card > div {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (max-width: 500px) {
  .card        { flex-direction: column; }
  .card-img    { order: 3; }
  .card-number { order: 2; }
  .card-type   { order: 1; }  
}
<div class='card'>
    <div class='card-img'>
      <img src="http://i.imgur.com/60PVLis.png">
    </div>
    <div class='card-number'>555</div>
    <div class='card-type'>Orange</div>
</div>

https://jsfiddle.net/7y8sarwn/

Upvotes: 1

Related Questions