Flexbox: раскладываем блоки

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>display</title>
    <style>
        h1 {
            text-align: center;
            color: white;
        }

        p {
            font-size: 1.75em;
            text-align: center;
            color: white;
            padding: 1em;
        }
        
        body {
            display: flex;
            height: 100vh;
            margin: 0;
            padding: 0;
        }

        .container-1 {
            flex-basis: 20%;
            background-color: darkcyan;
        }

        .container-2 {
            display: flex;
            flex-direction: column;
            width: 100%;
        }

        .inside-container-1 {
            flex-basis: 20%;
            background-color: darkred;
        }

        .inside-container-2 {
            width: 100%;
            height: 100%;
            display: flex;
        }

        .container-col-1 {
            background-color: darkblue;
        }

        .container-col-2 {
            background-color: darkgreen;
        }
    </style>
</head>

<body>
    <div class="container-1">
        <h1>Меню</h1>
    </div>
    <div class="container-2">
        <div class="inside-container-1">
            <h1>Заголовок</h1>
        </div>
        <div class="inside-container-2">
            <div class="container-col-1">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quaerat ad cum voluptas fugiat,
                    repellendus doloribus
                    ipsam modi eos unde praesentium accusamus beatae! Nobis tempore quidem magni ut accusamus
                    molestiae.</p>
            </div>
            <div class="container-col-2">
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni quaerat ad cum voluptas fugiat,
                    repellendus doloribus
                    ipsam modi eos unde praesentium accusamus beatae! Nobis tempore quidem magni ut accusamus
                    molestiae.</p>
            </div>
        </div>
    </div>



</body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Домашнее задание 2</title>
    <style>
    body {
        height: 100vh;
        margin: 0;
        background-color: #303a52;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
    }
    .container {
        display: flex;
        flex-direction: column;
        background-color: #fc85ae;
        height: 300px;
        width: 200px;
        border-radius: 5px;
    }
    .top-img {
        display: flex;
        justify-content: center;
        width: 100%;
    }
    img {
        width: 100%;   
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .text {
        justify-self: center;
        text-align: center;
        padding: .25em;
    }
    button {
        width: 100%;
        height: 100%;
        border: 0;
        color: #fff;
        background-color: #574b90;
        border-bottom-left-radius: 5px;
        border-bottom-right-radius: 5px;
        cursor: pointer;
    }
    </style>
</head>
<body>
    <div class="container">
        <div class="top-img">
            <img src="img/lesson_6.jpg" alt="">
        </div>
        <p class="text">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit adipisci quo odio sunt eius veritatis at quisquam ad
            dolor.
        </p>
        <button>Learn more</button>
    </div>
    <div class="container">
        <div class="top-img">
            <img src="img/lesson_6.jpg" alt="">
        </div>
        <p class="text">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit adipisci quo odio sunt eius veritatis at
            quisquam ad
            dolor.
        </p>
        <button>Learn more</button>
    </div>
    <div class="container">
        <div class="top-img">
            <img src="img/lesson_6.jpg" alt="">
        </div>
        <p class="text">
            Lorem ipsum dolor sit amet consectetur, adipisicing elit. Suscipit adipisci quo odio sunt eius veritatis at
            quisquam ad
            dolor.
        </p>
        <button>Learn more</button>
    </div>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { margin: 0; height: 100vh; background-color: #efeaff; display: flex; justify-content: center; align-items: center; }
        .box { width: 200px; padding: 30px; background-color: #6d4aff; color: white; text-align: center; border-radius: 16px; }
    </style>
</head>
<body>
    <div class="box">Я в центре!</div>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { margin: 0; font-family: sans-serif; }
        nav { background-color: #1f1b3d; padding: 16px 24px; display: flex; justify-content: space-between; align-items: center; }
        .logo { color: #ffd23f; font-weight: bold; font-size: 22px; }
        .links { display: flex; gap: 20px; }
        .links a { color: white; text-decoration: none; }
    </style>
</head>
<body>
    <nav>
        <div class="logo">🚀 Космо</div>
        <div class="links">
            <a href="#">Главная</a>
            <a href="#">Игры</a>
            <a href="#">Контакты</a>
        </div>
    </nav>
</body>
</html>

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Моя страница</title>
    <style>

        body { margin: 0; }
        .gallery { display: flex; flex-wrap: wrap; }
        .item { box-sizing: border-box; width: 33.33%; font-size: 60px; text-align: center; padding: 20px; border: 2px solid white; background-color: #ffe6f0; }
    </style>
</head>
<body>
    <div class="gallery">
        <div class="item">🍎</div>
        <div class="item">🍌</div>
        <div class="item">🍇</div>
        <div class="item">🍉</div>
        <div class="item">🍓</div>
        <div class="item">🥝</div>
    </div>
</body>
</html>