@Atljh0987

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

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

6036b6e5a113c866227975.jpeg

<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: для появившихся Евгениев Вагановичей уточнение: если возможно, то подскажите, пожалуйста как это сделать.
  • Вопрос задан
  • 144 просмотра
Решения вопроса 1
@alphaDzhem
Продолжающий front-end разработчик и не только
На черновую))

#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
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
profesor08
@profesor08 Куратор тега CSS
Возможно сделать такое размещение с помощью flex?

Да

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

Именно так
Ответ написан
@trenton
Чтоб в одном родителе нет. Cтрелки с картинкой в одной строчке флексом, а точки на следующей. Еще одну обертку.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы