Как перенести Flex на новую строку?

Question

Ребят подскажите как перенести Flex Что бы начинался с новой строки? Как правильно будет это сделать?введите сюда код

@font-face {
    font-family: Geometria;
    src: url(../fonts/geometria.ttf) format("truetype");
    font-weight: normal;
    font-style: normal;
    font-display: swap;

}
body {
    font-family: Geometria, serif;
    margin: 0;
    padding: 0;
}
header {
    background: url(../img/bg1.jpg) no-repeat center top/cover;
    height: 800px;
}
.cont {
    width: 930px;
    margin: 0 auto;
}
.menu {
    margin-top: 71px;
    float: left;
}
.menu1 {
    margin-left: 30px;
    margin-top: 80px;
    float: left;
}
.menu:hover {
    background: #DBDAD9;
}
.logo {

    float: left;
    margin-left: 170px;
    margin-top: 30px;
    height: 91px
}
.be {
    float: left;
    margin-top: 57px;
    margin-left: 13px;
}
header p {
    float: left;
    margin-top: 58px;
    margin-left: 30px;
    font-family: Geometria, serif;
    font-size: 16px;
    line-height: 26px;
}
.phone {
    float:right;
    font-size: 25px;
    margin-left: 20px;
    
}
.call {
    float: right;
    background: #EEF3FA;
    font-family: Geomeria, serif;
    padding: 16px 55px;
    border: 1px solid #2A94E2;
    box-sizing: border-box;
    border-radius: 5px;

}
button:hover {
    background: #2A94E2;

}
.head h1 {
    float: left;
width: 580px;
font-size: 50px;
line-height: 75px;
text-transform: uppercase;
color: #000000;
padding-top: 30px;
}
.head {
    width: 900px;
}

.par {
    float: left;
    padding: 0;
    margin-left: 0;
    margin-top: 25px;
    font-size: 22px;
    line-height: 36px;
    color: #000000;
}
.sp {
    border: solid;
    padding: 0;
    margin: 0;
    float: left;
}
.flex h2 {
    margin: 0;
    padding: 0;
     font-size: 80px;
     line-height: 131px;
     color: #000000;
     
}
.flex p {

    margin: 0;
    padding: 0;
font-size: 16px;
line-height: 26px;
color: #000000;

}
.flex {
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: left;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main.css">
</head>
<body>
    <header>
         <div class="cont">
            <div>
                <img src="img/iconmenu.png" alt="" class="menu">
            <p class="menu1">Меню</p>
            <img src="img/logofull.png" alt="Blitz Estate" class="logo">
            <img src="img/be.png" alt="" class="be">
            <p>Продажа недвижимости <br>
            в Москва-Сити</p>
            <p class="phone">+7 (495) 199-19-99</p>
            <button class="call">Заказать звонок</button>
              </div>
              <div class="head">
                <h1>Агентство с международным именем Blitz Estate</h1>
                <p class="par">Поможем продать, купить и арендовать <br>
                недвижимость в Москве, районе Сити и области</p>
                </div>
                <div class="flex">
                    <div class="conteiner">
                        <h2>17</h2>
                    </div>
                    <div class="conteiner">
                        <h2>1963</h2>
                    </div>
                    <div class="conteiner">
                        <h2>10</h2>
                    </div>
                
                </div>
         </div>
    </header>
           


        

    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <section>
        <div class="cont">
            
         </div>
    </section>
    <footer>
        <div class="cont">
            
         </div>
    </footer>
    
</body>
</html>

Answer 1

Используйте flex-direction: column;.

Answer 2

убери float: left

для class="head" используй стили:

display: flex;
flex-wrap: wrap;

для class="flex" добавь

width: 100%;

БЛОГ НА HUSL

Как перенести Flex на новую строку?

Ответы (2 шт):