2

Пытаюсь разобраться со свойством 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>

Картинки которые могут понадобится:

img/block_2_num1.png

img/block_2_num2.png

img/block_2_num3.png

img/block_2_num4.png

img/block_2_num5.png

img/block_2_youtube.png

Макет блока

3
  • Как видете по коду элементы которые находятся во втором и третьем блоке как бы уменьшаются, хотя место на экране еще очень много, пробовал много способов решить но ничего не выходит. Подскажите как это исправить, а главное почему так выходит что 1й блок нормально отображается а следующие два как бы сужаются, а не растягиваются по всей странице.
    – O.Yudin
    5 мар 2019 в 20:18
  • 1
    Исходя из примера все работает, текст в блоке paragraph не на всю ширину, поскольку у тега p указана ширина в 37%
    – E_K
    5 мар 2019 в 20:42
  • По макету если посчитать будет показывать 37% . Но когда я добавляю селектору .paragraph {width: 37%;} текст еще становится меньше. Как бы сужается. Я думал нужно добавить обертке .content { width: 100%; } . Но все равно не работает так как на макете. Если вы не заняты вечером, могли бы вы мне помочь разобраться с этим в discord'e? Я бы вам тогда скинул psd макет и объяснил по демонстрации экрана что не получается конкретно. Если не можете, то все равно большое спасибо за помощь и за быстрый ответ. Мой дискорд: Lisenok#3858
    – O.Yudin
    6 мар 2019 в 11:06

3 ответа 3

1

Уберите у тега p ширину в 37%, и задайте блокам image и all_text свойство flex: 1;.

*  {
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
.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;
}
.block_2 .text p {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    
}


.block_2 .content {
    display: flex;
    max-width: 100%;
}
.block_2 .image,
.block_2 .all_text  {
    flex: 1;
    
}
<div class="block_2">
            <div class="about_us">       
                <h1>ABOUT US</h1>
            </div>
            
            <div class="content">
                <div class="image">
                    <img src="https://via.placeholder.com/720x480?text=YouTube" 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>

1

Вот мой варинат решения.

@import url("https://fonts.googleapis.com/css?family=Roboto:100,400,600");
html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0; }

.main-part {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  font-family: 'Roboto', sans-serif; }

.about-us-title {
  width: 80%;
  height: 0;
  text-align: center;
  display: flex;
  margin: 3vw 0;
  justify-content: center;
  align-items: flex-end;
  border-bottom: 2px solid #000; }
.about-us-title > span {
  display: block;
  position: relative;
  top: 0.6em;
  background-color: #fff;
  padding: 0 20px;
  font-size: 3vw;
  font-weight: 600;
  text-transform: uppercase; }

.about-us {
  width: 80%;
  display: flex;
  flex-direction: row; }

.au-left {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start; }
.au-left > img {
  width: 90%; }

.au-right {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start; }

.au-right-description {
  width: 100%;
  margin-bottom: 2em;
  font-size: .9vw;
  line-height: 1.6em;
  font-weight: 100; }

.aur-list-item {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-bottom: .7vw; }
.aur-list-item > img {
  width: 3%;
  height: auto;
  margin-right: .7em; }
.aur-list-item > span {
  width: 95%;
  display: block;
  font-size: .9vw; }
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div style="height: 80%; width: 100%; background-color: yellow;">Можно убрать</div>

<div class="main-part">
    <div class="about-us-title"><span>About Us</span></div>
    <div class="about-us">
        <div class="au-left">
            <img src="https://i.stack.imgur.com/uLJup.png" alt="">
        </div>
        <div class="au-right">
            <span class="au-right-description">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. A consequatur doloribus eveniet fugiat necessitatibus non veniam. Alias, aut doloribus excepturi magnam quas ratione sunt tempore. Commodi cum, enim est harum itaque iusto, nam obcaecati.
            </span>
            <div class="aur-list-item">
                <img src="https://i.stack.imgur.com/VqUoQ.png" alt="">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium minima possimus!</span>
            </div>
            <div class="aur-list-item">
                <img src="https://i.stack.imgur.com/oNBGR.png" alt="">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium minima possimus!</span>
            </div>
            <div class="aur-list-item">
                <img src="https://i.stack.imgur.com/X2b0V.png" alt="">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium minima possimus!</span>
            </div>
            <div class="aur-list-item">
                <img src="https://i.stack.imgur.com/Qursy.png" alt="">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium minima possimus!</span>
            </div>
            <div class="aur-list-item">
                <img src="https://i.stack.imgur.com/GcD2D.png" alt="">
                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque laudantium minima possimus!</span>
            </div>



        </div>
    </div>
</div>
<div style="height: 80%; width: 100%; background-color: yellow;">Можно убрать</div>

</body>
</html>

Если используешь scss:

@import url('https://fonts.googleapis.com/css?family=Roboto:100,400,600');

html, body{
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.main-part{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;

  font-family: 'Roboto', sans-serif;
}

.about-us-title {
  width: 80%;
  height: 0;
  text-align: center;
  display: flex;

  margin: 3vw 0;
  justify-content: center;
  align-items: flex-end;

  border-bottom: 2px solid #000;

  & > span{
    display: block;

    position: relative;
    top: 0.6em;
    background-color:  #fff;
    padding: 0 20px;

    font-size: 3vw;
    font-weight: 600;
    text-transform: uppercase;
  }
}

.about-us{
  width: 80%;

  display: flex;
  flex-direction: row;
}

.au-left{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: flex-start;

  & > img{
    width: 90%;
  }
}

.au-right{
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

.au-right-description{
  width: 100%;
  margin-bottom: 2em;

  font-size: .9vw;
  line-height: 1.6em;
  font-weight: 100;
}

.aur-list-item{
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: row;

  margin-bottom: .7vw;

  & > img{
    width: 3%;
    height: auto;

    margin-right: .7em;
  }

  & > span{
    width: 95%;
    display: block;
    font-size: .9vw;
  }
}
4
  • Все равно второй и третий блок не по размерам как на макете. Если не ошибаюсь, то ширина второго и третьего блока 37%
    – O.Yudin
    6 мар 2019 в 6:19
  • @Lisenok уточни что ты назваешь вторым и третьим блоком ибо у меня блоков тут ~11 6 мар 2019 в 16:33
  • Я имею введу блоки .paragraph и .text
    – O.Yudin
    6 мар 2019 в 17:23
  • @Lisenok у меня таких классов нет. 6 мар 2019 в 17:24
0

Всем спасибо за помощь! У меня получилось, не знаю как и что я натыкал, поэтому не спрашивайте, вот готовый вариант!

*  {
  box-sizing: border-box;
}
img {
  max-width: 100%;
}
.block_2 .about_us {
    padding: 1.6% 0 1.6% 0;
}
.block_2 .about_us:before {
    border-bottom: 1px solid black;
}
.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: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: normal;
}
.block_2 .text p {
    font-family: 'Roboto', sans-serif;
    font-weight: bold;
    
}


.block_2 .content {
    display: flex;
    max-width: 100%;
}
.block_2 .image {
    padding: 0 0 0 12%;
}
.block_2 .all_text  {
    max-width: 37.1%;
    padding: 0 0 0 1.6%;
}
.block_2 .all_text .paragraph {
    padding: 0 0 2% 0;
}
.block_2 .all_text .text img {
    padding: 3% 0.6% 0% 0;
}
.block_2 .all_text .text p {
    padding: 0% 0 0.7% 0;
}
<div class="block_2">
            <div class="about_us">
                <h1><span>ABOUT US</span></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>

Используйте картинки что я скинул в начале, что бы увидеть адекватный код.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.