Flexbox пробел за исключением строк с отдельными элементами?

Question

У меня есть два деления. Нужно сидеть слева, один справа. Родительский flexbox с justify-content: space-between отлично подходит для этого, за исключением случаев, когда оборачиваются flex-элементы (что они должны делать). После переноса они выровнены по левому краю, потому что всего их всего два.

Как сделать строки с единичными элементами по центру?

<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>

(Или вы можете использовать скрипку, потому что легче сжать выходную панель скрипты, чем изменить размер всего окна SO, чтобы увидеть перенос div: https://jsfiddle.net/xv6oa418/1/)

---

Дополнительное примечание: @KaranTewari предложил добавить flex: 1 к первому дочернему элементу div, но я бы хотел, чтобы текст в левом элементе div не переносился до тех пор, пока он не стал абсолютно необходимым (в частности, он должен начинаться с переноса только после второй гибкий элемент перенесен на следующую строку). Второй div на самом деле будет изображением, поэтому я обновил скрипку и фрагмент, чтобы отразить это.

Answer 1

Я понял это сам.Я использовал flex-grow: 1 на первом / левом div и margin: auto на втором / правом div.Это заставляет первый div расширяться, занимая все пространство, поэтому автоматическое поле второго div ничего не делает.Затем, когда он переворачивается, второй div больше не блокируется первым, и автоматическое поле вступает во владение, центрируя второй div.

Примерно так:

<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>

(А на скрипке: https://jsfiddle.net/xv6oa418/2/)

Answer 2

.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>

Вы можете использовать селектор only-child и указать margin: auto для элемента only-child. Пожалуйста, посмотрите фрагмент.

Answer 3

Попробуйте использовать

flex:1

Это гарантирует, что вы используете все доступное пространство, здесь отредактировано jsfiddle https://jsfiddle.net/karantewari/tfg0kymb/1/