Возможно сделать такое размещение с помощью flex?

Question

[Atljh0987]

Желательно не меняя html кода. Чтобы dots оказался внизу, стрелки прижаты к window, window по середине. Короче как обычны слайдер.

<div id="slider">
  <div class="arrowLeft"><</div>
  <div class="window"></div>
  <div class="arrowRight">></div>
  <div class="dots">....</div>
</div>

#slider {
  width: 600px;
  border: 1px solid black;
  display: flex;
}

.window {
  width: 200px;
  height: 150px;
  border: 1px solid green;
}

upd: для появившихся Евгениев Вагановичей уточнение: если возможно, то подскажите, пожалуйста как это сделать.

Comments

[Ankhena]

если возможно, то подскажите, пожалуйста как это сделать.

И что у вас не получается?

За перенос строк отвечает свойство flex-wrap.
За ширину width или flex-basis (поскольку главная ось по горизонтали).
А также дополнительные свойства flex-shrink и flex-grow

[Atljh0987]

Ankhena, Огромнейшее спасибо за адекватный ответ и за спасительный flex-wrap: wrap как-то он мимо меня все проходил!!! А то думал вместо помощи все шутить будут)

Если кому-либо понадобится решение (врятли, но все же) вот код:

#slider {
  width: 600px;
  border: 1px solid black;
  
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.window {
  width: 200px;
  height: 150px;
  border: 1px solid green;
}

.arrowLeft {
  text-align: right;
}

.arrowLeft, .arrowRight, .window {
  width: 33%;
}

.dots {
  text-align: center;
}

Answer 1

[Дмитрий Жемчужнов]

На черновую))

#slider {
  width: 600px;
  border: 1px solid black;
  display: flex;
	flex-wrap:  wrap;
	justify-content: space-between;
	align-items: center;
	background-color: #3698DB;
	padding: 10px;
}

.window {
  width: 80%;
  height: 150px;
	background-color: #fff;
	color: #3698DB;
	display: flex;
	justify-content: center;
	align-items: center;
}

.dots {
	width: 100%;
	text-align: center;
}

.arrowLeft,
.arrowRight {
	width: 20px;
	height: 20px;
	background-color: #fff;
	border-radius: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

https://codepen.io/dzhem/pen/mdOpXMO

Answer 2

[profesor08]

Возможно сделать такое размещение с помощью flex?

Да

Желательно не меняя html кода. Чтобы dots оказался внизу, стрелки прижаты к window, window по середине.

Именно так

Answer 3

[trenton]

Чтоб в одном родителе нет. Cтрелки с картинкой в одной строчке флексом, а точки на следующей. Еще одну обертку.