Javascript-форум - Приписывание интервалов значений к ключам в массиве

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Приписывание интервалов значений к ключам в массиве (https://javascript.ru/forum/misc/75379-pripisyvanie-intervalov-znachenijj-k-klyucham-v-massive.html)

Цитата:

Сообщение от Dilettante_Pro (Сообщение 495719)

Что-то мне кажется, что рони прав (пост 2)

<style>
    .space-between {
       display: flex;
    margin-bottom: 10px;
    justify-content: space-between;
   }
  </style>
<section class="container">
   <div>Другой элемент</div>
  <section class="space-between">
   <div>1</div><div>2</div><div>3</div>
  </section>
  <div>Еще другой элемент</div>
  <section class="space-between">
   <div>11</div><div>22</div><div>33</div><div>44</div>
  </section>
  <div>Совсем другой элемент</div>
</section>

нуу, впринципе да, рабочая тема. Дело в том что у меня сейчас такая структура кода:

<section class="container">
   <div class="element"></div>
<div class="element-1"></div>
<div class="element"></div>
<div class="element-2"></div>
<div class="element"></div>
<div class="element-3"></div>
</section>

обозначенные элементы можно закинуть в отдельный див с флексбоксом и от него уже потом работать :) Но над решением с js нужно еще подумать :thanks:

Цитата:

Сообщение от j0hnik (Сообщение 495720)

drakonolom,
Если четные то по сотке?

короче, суть в том чтобы с левого и правого края до этой кучи элементов было одинаковое расстояние при лобых количествах элементов(см. скриншот :

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.container {
		display: flex;
		margin-bottom: 10px;
		justify-content: center;
	}
	.container > div {
		width: 50px;
		height: 50px;
		margin: 0 2px;
		background-color: red;
	}
</style>
</head>
<body>
	<section class="container">
		<div class="element">1</div>
		<div class="element-1">2</div>
		<div class="element">3</div>
		<div class="element-2">4</div>
		<div class="element">5</div>
		<div class="element-3">6</div>
	</section>
</body>
</html>

так?

Для адаптива в .container можно добавить свойство:
flex-wrap: wrap;

Цитата:

Сообщение от j0hnik (Сообщение 495728)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.container {
		display: flex;
		margin-bottom: 10px;
		justify-content: center;
	}
	.container > div {
		width: 50px;
		height: 50px;
		margin: 0 2px;
		background-color: red;
	}
</style>
</head>
<body>
	<section class="container">
		<div class="element">1</div>
		<div class="element-1">2</div>
		<div class="element">3</div>
		<div class="element-2">4</div>
		<div class="element">5</div>
		<div class="element-3">6</div>
	</section>
</body>
</html>

так?

ну принцип да, такой, если решить это с флексбоксами.