Верстка, CSS, HTML, SVG

flex-end не отрабатывает

Добрый день уважаемые. Помогите разобраться, почему не срабатывает стиль. https://jsfiddle.net/Lp91aurq/ Мне необходимо что б контейнер с текстом был прижат к левой стороне и при этом был посеретине относительно .bl_aboutCompany. Отцинтрировать получилось, а вот свойство justify-content: flex-end; почему-то не срабатывает. Может кто-то объяснить почему? Не хотелось использовать float:right
Vladimir Volkov
Vladimir Volkov
31 780
<!doctype html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Документ</title>
<style>
html, body {
margin: 0;
padding: 0;
height: 100%;
}
section { display: flex; }
section > div {
background-color: #d3d3d3;
width: 600px;
font-size: 1.5em;
text-align: justify;
padding: 15px;
}
.flex-end { justify-content: flex-end; }
</style>
</head>
<body>
<section class="flex-end">
<div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, facilis expedita corporis dolorem cupiditate. Eum, aliquid, est, illum quae pariatur tenetur molestias perspiciatis consectetur voluptate alias vel facere ab eveniet magnam maiores molestiae omnis iste minus recusandae nulla itaque reiciendis suscipit nesciunt repudiandae labore quod nobis in voluptatum autem quasi perferendis dolore nihil cumque animi id sint corporis neque atque totam esse. Debitis, quasi, voluptates, laboriosam nemo fugiat cumque odit quaerat eaque autem eos sequi quae vel voluptatum fugit earum mollitia reiciendis recusandae non dicta repellat. Tempora, suscipit quam officia. Deserunt, quidem, aperiam, maiores, harum error facilis architecto quas iure aut quia explicabo consectetur accusantium vero eius quam cupiditate hic iste dolores officiis eligendi sit fuga dolore nesciunt minus repudiandae. Laboriosam, esse ab est dolorem hic! Fuga, facilis, quia deserunt quidem sunt quisquam harum quas cumque earum ea consectetur quaerat esse repellendus incidunt placeat fugit atque velit at nesciunt a doloribus vel eius autem quasi similique et nobis nulla natus blanditiis. Accusantium, ipsa, optio, rerum ex cupiditate mollitia fuga natus totam doloremque eum harum reiciendis sunt omnis culpa fugiat deserunt ab velit atque voluptatibus delectus! Veniam, ipsa, natus a beatae sit repudiandae quo dolorem nesciunt eum aspernatur! Expedita, maiores, voluptate.</div>
</section>
</body>
</html>
Emir Berdiyev
Emir Berdiyev
63 028
Лучший ответ
1. justify-content действует только на блоки, непосредственно вложенные в .bl_aboutCompany. Единственным таким блоком является .container.

2. Подключен bootstrap, который для .container определяет margin-left: auto; и margin-right: auto;. Это полностью перекрывает перекрывает justify-content и вызывает центрирование .container внутри .bl_aboutCompany.

3. Никакие другие блоки, кроме .container, в твоём коде не позиционируются.

P.S. Ты уж определись: либо flex, либо старый bootstrap, не понимающий flex.

P.P.S. При наличии flex и grid использование bootstrap теряет смысл.
Abdullah Yestemessov
Abdullah Yestemessov
93 183
Vladimir Volkov Спасибо. Что-то я не понял каким образом внешняя оббертка .container ломает внутренюю? Есть ли способ это исправить не ломая структуру? (Разумеется кроме float:right)

Похожие вопросы