Показать сообщение отдельно
  #6 (permalink)  
Старый 07.08.2018, 18:29
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,714

Сообщение от Shitbox2
Без `display: contents` реально?
Если только поменять немного HTML...
<input type="range" min="0" max="1600" value="400" oninput="document.querySelector('.container').style.width = this.value + 'px';">
<div class="container">
	<div class="item">item-1</div>
	<div class="elem">elem-1</div>
	<div class="elem">elem-2</div>
	<div class="elem">elem-3elem-3-elem-1ele</div>
	<div class="elem">elem-3-elem-1</div>
	<div class="elem">elem-3-elem-2</div>
	<div class="elem">elem-3-elem-3-elem-3-elem-1</div>
	<div class="elem">elem-4-elem-1</div>
	<div class="elem">elem-5</div>
	<div class="last-group">
		<div class="item item-filler">item-2</div>
		<div class="item">item-3</div>
	</div>
</div>
<style>

.container {
	min-width: 250px;
	width: 400px;
	box-shadow: 0 0 0 2px, inset 0 0 0 1em white;
	background: gray;
	display: flex;
	align-items: flex-start;
	align-content: flex-start;
	flex-wrap: wrap;
}

.container > .elem {
	background: red;
	padding: .8em;
	margin: 1.2em;
}

.container > .item, .container > .last-group > .item {
	background: gray;
	padding: 2em;
	box-shadow: inset 0 0 0 1em white;
}

.container > .last-group {
	display: flex;
	flex: 1;
}

.container > .last-group > .item-filler {
	flex: 1;
}
</style>
Ответить с цитированием