Insom84
@Insom84

Выравнивание контейнера flex?

Вопрос наверно простой, но никак не могу найти решения. Есть див флекс у которого задана рамка. В нем два элемента с шириной по 25%. Так вот рамка контейнера формируется не вокруг элементов, а по всей ширине, т.е. див флекс растягивается на всю страницу. Как убрать это пустое пространство, чтобы сам контейнер див флекс был по ширине его внутренних элементов? Надеюсь понятно объяснил. Спасибо.
60b10f0c114e1155567328.jpeg
  • Вопрос задан
  • 54 просмотра
Пригласить эксперта
Ответы на вопрос 2
Denis_maker
@Denis_maker
Инженер-программист. Веду весь спектр разработки.
Привет! Как вариант, пробуй)
<div style="display: flex; width: 100%; height: 100px; background-color: red;">
	<div style="display: flex; height: 100%; width: 50%; background-color: grey;">
		<div style="background-color: green; height: 100%; width: 50%;"></div>
		<div style="background-color: blue; height: 100%; width: 50%;"></div>
	</div>
</div>

Вот аналог на Bootstrap с центрированием, если используешь его)
<div class="row">
    <div class="col-12 col-sm-6 d-flex align-items-center justify-content-betwee" style="border: 2px solid #2fc7f7;">
        <div style="height: 100px; width: 50%; background-color: green;">
        <div style="height: 100px; width: 50%; background-color: blue;">
    </div>
</div>
Ответ написан
nomenEst
@nomenEst
Сила гугла
Чтобы контейнер занимал ширину внутренних элементов, он должен вести себя как inline... И о чудо, у нас есть замечательное свойство display: inline-flex
Ответ написан
Ваш ответ на вопрос

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

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