Перенос элемента вложенного флексбокса на новую строку - PullRequest
0 голосов
/ 25 марта 2020

Можно ли переносить на новую строку только части элемента flexbox (не весь элемент flexbox)?

Например, когда элемент flexbox сам содержит элементы flexbox: Codepen

.flex {
	display: flex;
	justify-content: left;
	flex-direction: row;
	flex-wrap: wrap;
	/* flex-wrap: wrap-reverse; */
	/* flex-wrap: nowrap; */
}
.block {
	display: block;
	height: 66px;
	width: 100px;
}
.top {
	background: blue;
	width: 100%;
	height: 100%;
	padding: 8px;
}
.left {
	background: gray;
	width: 500px;
}
.right {
	background: green;
	/* flex-wrap: no-wrap; */
	/* flex-wrap: wrap; */
	/* flex-wrap: wrap-reverse; */
	height: 50px;
	padding: 8px;
}
.should-stay-in-first-line {
	display: block;
	width: 250px;
	background: yellow;
	height: 50px;
}
.may-wrap-to-second-line {
	display: block;
	width: 250px;
	background: red;
	height: 50px;
}
<div class="top flex">
  <div class="left block"><label>left</label></div>
  <div class="right flex">
    <label>right</label>

    <div class="should-stay-in-first-line block"><label>should-stay</label></div>
    <div class="may-wrap-to-second-line block"><label>may-wrap</label></div>

  </div>
</div>

Когда окно браузера достаточно большое, веб-сайт выглядит следующим образом:

+---------------------------------+
| left right should stay may wrap |
+---------------------------------+

Когда на внешнем flexbox установлен flex-wrap: wrap; и ширина браузера уменьшается, это выглядит так:

+---------------------------------+
| left                            |
| right should stay may wrap      |
+---------------------------------+

Когда на внутреннем flexbox установлена ​​flex-wrap: wrap;, а ширина браузера уменьшается, это выглядит так:

+---------------------------------+
| left right should stay          |
|            may wrap             |
+---------------------------------+

Что я хочу (при уменьшении ширины браузера):

+---------------------------------+
| left right should stay          |
| may wrap                        |
+---------------------------------+

Есть ли возможность достичь этого с помощью HTML flexboxes?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...