Дисплей: Flex не производит контент под ним - PullRequest
Новая
       12

Дисплей: Flex не производит контент под ним

2 голосов
/ 15 марта 2019

Почему абзац во втором столбце создается справа от заголовка, а не под ним? Я использовал display: flex для выравнивания содержимого по центру и центру, но я хочу, чтобы новые элементы в столбце были сложены под предыдущим элементом. 

main{
    background: linear-gradient(to right, #4b53ff, #9e63ff);
    width: 100vw;
    height: 100vh;
    background-size: cover;
}
main .row{
    width: 65vw;
    height: 60vh;
    display: flex;
    text-align: center;
    align-items: center;
}
.col1{
    background-color: white;
    height: 100%;
    border-top-left-radius: 15px;
    border-bottom-left-radius: 15px;
    
}
.col2{
    background: linear-gradient(to right, #7633e5, #178ee0);
    border-bottom-right-radius: 15px;
    border-top-right-radius: 15px;
    height: 100%;
    width:  100%;
}
p{
  font-size:11px;
}
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Login</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" href="main.css">
</head>
<body>
    <main class="d-flex align-items-center ">
        <div class="container d-flex justify-content-center">
            <div class="row ">
                <div class="col-lg-4  col-md-4 col-sm-4 col1  d-flex align-items-center justify-content-center">
                    <h2 class="block">login</h2>

                </div>
                <div class="col-lg-8 col-md-8 col-sm-8 col2 d-flex align-items-center ">
                    <h2 class="d-block justify-content-center">Random heading</h2>
                    <p class="d-block justify-content-center">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut
                        labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
                        nisi ut aliquip ex ea commodo consequat. </p>
                </div>
            </div>
        </div>
    </main>
</body>
</html>

Ответы [ 2 ]

3 голосов
/ 15 марта 2019

Добавить flex-direction: column; стиль к col2 классу.

По умолчанию flex-direction значение равно row, поэтому оно помещает их в ряд в col2. col1 имеет только один элемент, поэтому вы не видите, что это также строка.

1 голос
/ 15 марта 2019

Добавьте это к вашему второму div: 

flex-direction: column;
justify-content: center;

Последнее правило будет центрировать div и p. Надеюсь, это помогло.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...