CODEWITHSUNDEEP
htmlcssflexbox
Clonkex
Clonkex

Reputation: 3637

Flexbox space-between except for rows with single items?

I have two divs. One needs to sit at the left, one at the right. A parent flexbox with justify-content: space-between works perfectly for this, except when the flex items wrap (which they should be able to do). After they wrap, they are left-aligned because there's only two items total.

How can I make rows with single items centre-aligned?

<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
	<div style="background: orange">
		<strong>Canvas Prints</strong><br>
		<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
	</div>
	<div style="background: pink">
		<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
	</div>
</div>

(Or you can use the fiddle, because it's easier to squish the output pane of the fiddle than resize the whole SO window to see the divs wrap: https://jsfiddle.net/xv6oa418/1/)

Additional note: @KaranTewari suggested adding flex: 1 to the first child div, but I'd like text in the left div to not wrap until absolutely necessary (specifically, it should start wrapping only after the second flex item has wrapped onto the next line). The second div is actually going to be an image so I've updated my fiddle and snippet to reflect this.

Upvotes: 1

Views: 2052

Answers (3)

Mileesh M S
Mileesh M S

Reputation: 84

.parent {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}


.text {
  background: orange;
  padding:10px;
  border-radius:10px;

}

.text:only-child {
  background-color: green;
  margin:0 auto;
}
<div class="parent">
  <div class="text">
    <strong>Canvas Prints</strong><br>
    <span >Create a masterpiece for any wall in your home!</span>
  </div>
  <div class="img" >
    <img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
  </div>
</div>

You can use :only-child selector and give margin:auto to the only-child element. Please see the snippet.

Upvotes: 1

Clonkex
Clonkex

Reputation: 3637

I figured it out myself. I used flex-grow: 1 on the first/left div, and margin: auto on the second/right div. This makes the first div expand to take up all space so the auto margin of the second div doesn't get to do anything. Then when it wraps, the second div is no longer blocked by the first one and the auto margin takes over, centring the second div.

Like so:

<div style="display: flex; justify-content: space-between; flex-wrap: wrap">
	<div style="background: orange; flex-grow: 1;">
		<strong>Canvas Prints</strong><br>
		<span style="font-size: 14px; color: #ff0000">Create a masterpiece for any wall in your home!</span>
	</div>
	<div style="background: pink; margin: auto">
		<img width="176" src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTEAPU9xK-mE81DSwYqh_uMb_EUuqXT1yWzIvs9j7diGY-FHh6X">
	</div>
</div>

(And the fiddle: https://jsfiddle.net/xv6oa418/2/)

Upvotes: 2

Karan Tewari
Karan Tewari

Reputation: 508

Try using 

flex:1

This ensures you are using full available space, here jsfiddle edited https://jsfiddle.net/karantewari/tfg0kymb/1/

Upvotes: -1

Related Questions