CODEWITHSUNDEEP
htmlcssflexbox
Fjott
Fjott

Reputation: 1137

Flexbox: Item 1 and 3 on same row, item 2 on next row

I got a header with a logo in the center of the row.

[ LINK | LOGO | LINK ]


.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.item {
  margin: 5%;
}

@media only screen and (max-width: 600px) {

  .header {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }

  .item-1 {
    order: 1;
  }

  .item-2 {
    order: 3;
  }

  .item-3 {
    order: 1;
  }

}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

For screen width less than 600px, I would like to have the header organized like this:

[ LINK | LINK ]
[     LOGO    ]

I have tried achieving this by using flexbox, with direction column for less than 600px and order: n for the three items.

I manage to get the Logo at the bottom, but not the item 1 and item 3 on the same line.

Is there a way to make this happen using flexbox, or do I have to use another technique?

Upvotes: 0

Views: 1188

Answers (4)

G-Cyrillus
G-Cyrillus

Reputation: 105853

flex-wrap and eventually gap can be plenty enough without resetting direction .

flex-direction:column will stack the children any way, that was your mistake, from there , nothing could work ;).

order:1 on the logo is also plenty enough to put it on last position (default is order:0).

example

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

.item {
  margin: auto 5%;/* margin could be removed resetting a few propertie on .item2 See next snippet */
}

@media only screen and (max-width: 600px) {
  .header {
    flex-wrap: wrap;
  }
  .item-2 {
    order: 1;
  }
}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

With no margin reset on Item

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 5%;
}

@media only screen and (max-width: 600px) {
  .header {
    flex-wrap: wrap;
  }
  .item-2 {
    order: 1;
    min-width: 90%;
    text-align: center;
  }
}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

Upvotes: 2

Ismail Vittal
Ismail Vittal

Reputation: 1103

You don't need to repeat the CSS code for media query. flex-wrap and flex-basis should help you achieve this along with order.

.header {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
}

.item {
  margin: 5%;
}

@media only screen and (max-width: 600px) {
  .item-1 {
    order: 1;
  }
  .item-2 {
    order: 3;
    flex-basis: 100%;
    text-align: center;
  }
  .item-3 {
    order: 2;
  }
}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

Upvotes: 1

Mihai T
Mihai T

Reputation: 17687

Leave flex-direction:row and add flex-wrap:wrap on the header.

Add flex:1 1 100%; text-align:center on the item-3 element.

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.item {
  margin: 5%;
}

@media only screen and (max-width: 1000px) {

  .header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap:wrap;
  }

  .item-1 {
    order: 1;
  }

  .item-2 {
    order: 3;
    width:100%;
    flex: 1 1 100%;
    align-items:center;
    text-align:center;
  }

  .item-3 {
    order: 1;
  }

}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

Upvotes: 1

moonwave99
moonwave99

Reputation: 22817

Try like this - flex-wrap: wrap on the parent, and flex: 1 on the second item:

.header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}

.item {
  margin: 5%;
}

@media only screen and (max-width: 600px) {

  .header {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }

  .item-1 {
    order: 1;
  }

  .item-2 {
    order: 3;
    flex: 1;
  }

  .item-3 {
    order: 1;
  }

}
<div class="header">
  <div class="item item-1">About</div>
  <div class="item item-2">
    <img width="250" src="https://svgsilh.com/svg/1015751.svg" />
  </div>
  <div class="item item-3">Contact</div>
</div>

Upvotes: 1

Related Questions