Пытаюсь разобраться со свойством flexbox.
У меня постоянно проблема в размерах: 1ый блок идет нормально, а остальные как-то кривовато; я хочу, чтобы второй и третий блок были в столбик и по всей ширине, - как на макете, - но 1ый блок не дает этого сделать, не знаю почему, подскажите.
Прикрепляю свой код и картинки. Пожалуйста, объясните мне, - начинающему верстальщику, - как это работает и что мне нужно подправить?
.block_2 .about_us {
padding: 1.6% 0 1.6% 0;
}
.block_2 .about_us h1 {
text-align: center;
font-weight: bold;
font-size: 40px;
font-family: 'Roboto', sans-serif;
}
.block_2 .content p {
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
width: 37.1%;
}
.block_2 .text p {
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
.block_2 .content {
display: flex;
max-width: 100%;
}
.block_2 .image {
width: 478px;
padding: 0 1.6% 0 12%;
}
.block_2 .all_text {
flex-direction: column;
}
/* Еще пробовал как-то так сделать, но тоже не вышло
пример 2
.block_2 img {
width: 37.3%;
height: 9.5%;
margin: 0 1.6% 0 12%;
}
.block_2 .content p {
font-size: 14px;
font-family: 'Roboto', sans-serif;
font-weight: normal;
width: 37.1%;
}
.block_2 .text {
display: flex;
justify-content: flex-end;
}
.block_2 .text img {
width: 18px;
height: 18px;
}
.block_2 .text p {
font-family: 'Roboto', sans-serif;
font-weight: bold;
}
*/
<div class="block_2">
<div class="about_us">
<h1>ABOUT US</h1>
</div>
<div class="content">
<div class="image">
<img src="img/block_2_youtube.png" alt="Youtube">
</div>
<div class="all_text">
<div class="paragraph">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce libero dui, pharetra vitae tempus id, interdum in elit. Fusce cursus interdum auctor. Proin et aliquam tellus, vel egestas sapien. </p>
</div>
<div class="text">
<p>
<img src="img/block_2_num1.png" alt="">Lorem ipsum dolor sit amet, consectetur adipisicing.<br>
<img src="img/block_2_num2.png" alt="">Deleniti fuga minus molestias omnis perferendis voluptatem.<br>
<img src="img/block_2_num3.png" alt="">Laboriosam maiores nisi nulla recusandae repellendus vero.<br>
<img src="img/block_2_num4.png" alt="">Corporis, eos impedit pariatur quaerat quod reprehenderit?<br>
<img src="img/block_2_num5.png" alt="">Dolore fuga illo iure quas quisquam voluptates.<br>
</p>
</div>
</div>
</div>
</div>
Картинки которые могут понадобится:
paragraph
не на всю ширину, поскольку у тегаp
указана ширина в37%