0

Soy nueva en esto de HTML y CSS y hace poco me mandaron un trabajo acerca de recrear una página. El tema es que lleva unas flexbox las cuales tengo que separar (dejar un espacio entre ellas) pero no encuentro la forma, use el justify-content e intenté con distintos atributos, pero todos dan el mismo resultado. Sospecho que tal vez hay algún estilo que bloquea al resto, pero no tengo certeza de nada.

Adjunto el código abajo:

NOTA: el nombre de la clase padre de las cajas es modalidades, y dentro tiene distintas secciones, que son las cajas.

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", Helvetica, sans-serif;
}

nav ul {
    position: relative;
    display: flex;
    align-items: center;
}

nav ul li {
    list-style: none;
}

header ul li a {
    text-decoration: none;
    color: #fff;
    margin-left: 25px;
    position: relative;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    transition: 0.7s;
    padding: 0 32px 0 30px;
    z-index: 10;
    background-color: #d92f37;
}

header img.logo {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    text-align: left;
    vertical-align: middle;
    word-spacing: 0;
    height: 64px;
    width: 114.6px;
}

header .estudiante:hover {
    background-color: #d92f37;
    box-shadow: 0 10px 20px black;
    color: white;
}

header a.estudiante {
    color: #fff;
    position: relative;
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 14px;
    word-spacing: 0;
    text-align: center;
    border-radius: 7px;
    border: solid 2px #fff;
    background-color: #d92f37;
    height: 15px;
    width: 85.4px;
    cursor: pointer;
    margin-top: 15px;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalidades {
    margin-top: 30px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
}

.modalidades-titulo {
    padding-top: 90px;
    padding-left: 10%;
    padding-right: 10%;
    color: #5f5f5f;
}

.modalidades .bloques {
    max-width: 25%;
}

.modalidades .bloques img {
    max-width: 100%;
    margin-bottom: 30px;
}

.modalidades .bloques h4 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.modalidades .bloques p {
    color: #666666;
}

.modalidades .bloques a {
    text-decoration: none;
    font-size: 16px;
    background-color: #d92f37;
    border-radius: 8px;
    color: white;
    padding: 8px;
    display: inline-flex;
    margin-top: 8px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
    <title>Document</title>
</head>

<body>
    <!-- NavBar -->
    <div class="nav">

        <!-- Logo Imagen -->
        <header>
            <img class="logo" src="img/logosweb.png" alt="" />

            <!-- Componentes Navegación -->
            <nav>
                <ul class="lista">
                    <li><a href="#">Presencial</a></li>
                    <li><a href="#">Online</a></li>
                    <li><a href="#">Corporativo</a></li>
                    <li><a href="#">Exámenes</a></li>
                    <li><a href="#">Pagos</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Nosotros</a></li>
                </ul>
            </nav>
            <a class="estudiante">Estudiantes</a>
        </header>
        <h3 class="modalidades-titulo">Modalidades</h3>

    </div>

    <!-- Modalidades -->

    <section class="modalidades">

        <section class="bloques">
            <img src="/img/img1.jpg" alt="">
            <h4>Presencial</h4>
            <p>
                Asiste a clases en cualquiera de nuestras sedes. Tendrás flexibilidad de horarios, docentes altamente calificados; refuerzos y tutorías en el momento que lo requieras.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img2.jpg" alt="">
            <h4>Online</h4>
            <p>
                Entra aquí para conocer todos nuestros cursos en modalidad e-learning y virtual con diferentes métodos educativos.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img3.jpg" alt="">
            <h4>Empresas</h4>
            <p>
                Permite a los estudiantes incrementar sus aptitudes laborales y de negocios con la adquisición de un nuevo idioma de acuerdo al estilo de aprendizaje predominante.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img4.jpg" alt="">
            <h4>Exámenes</h4>
            <p>
                Certifica internacionalmente tu nivel de inglés y accede a oportunidades laborales y académicas en cualquier parte del mundo.
            </p>
            <a href="#">Comenzar</a>
        </section>

    </section>
</body>
</html>

4
  • No termino de entender que es lo que deseas que quede separado, podrías añadir algo de información, gracias. En el lugar que veo un space está funcionando perfecto, separa los 3 elementos que tienes dentro del header. (Una imagen, un nav y un anchor) Luego en modalidades, que tienen su width topeado con un max a 80%.. el 15 nov. 2022 a las 3:48
  • aster la propiedad CSS que buscas se llama gap. Ejemplo gap:12px;
    – Yussef
    el 15 nov. 2022 a las 4:49
  • @Jackson-Quintero cuidado con las ediciones: estás agregando errores ortográficos... Y dale formato de código solo a lo que es código.
    – padaleiana
    el 15 nov. 2022 a las 12:42
  • @padaleiana ok esta bien , tiene razón el 15 nov. 2022 a las 12:49

2 respuestas 2

0

Como te mencionaron en los comentarios, la propiedad que hace lo que quieres es gap, solo tienes que agregarla a la class .modalidades

te dejo una página que explica muy bien el como funciona flex

* {
    margin: 0;
    padding: 0;
}

body {
    font-family: "Poppins", Helvetica, sans-serif;
}

nav ul {
    position: relative;
    display: flex;
    align-items: center;
}

nav ul li {
    list-style: none;
}

header ul li a {
    text-decoration: none;
    color: #fff;
    margin-left: 25px;
    position: relative;
}

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    transition: 0.7s;
    padding: 0 32px 0 30px;
    z-index: 10;
    background-color: #d92f37;
}

header img.logo {
    position: relative;
    font-size: 14px;
    font-weight: 500;
    line-height: 23px;
    text-align: left;
    vertical-align: middle;
    word-spacing: 0;
    height: 64px;
    width: 114.6px;
}

header .estudiante:hover {
    background-color: #d92f37;
    box-shadow: 0 10px 20px black;
    color: white;
}

header a.estudiante {
    color: #fff;
    position: relative;
    padding: 5px 15px 5px 15px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    line-height: 14px;
    word-spacing: 0;
    text-align: center;
    border-radius: 7px;
    border: solid 2px #fff;
    background-color: #d92f37;
    height: 15px;
    width: 85.4px;
    cursor: pointer;
    margin-top: 15px;
}

nav {
    display: flex;
    justify-content: center;
    align-items: center;
}

.modalidades {
    margin-top: 30px;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    display: flex;
    justify-content: space-between;
    gap: 50px;
}

.modalidades-titulo {
    padding-top: 90px;
    padding-left: 10%;
    padding-right: 10%;
    color: #5f5f5f;
}

.modalidades .bloques {
    max-width: 25%;
}

.modalidades .bloques img {
    max-width: 100%;
    margin-bottom: 30px;
}

.modalidades .bloques h4 {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 20px;
}

.modalidades .bloques p {
    color: #666666;
}

.modalidades .bloques a {
    text-decoration: none;
    font-size: 16px;
    background-color: #d92f37;
    border-radius: 8px;
    color: white;
    padding: 8px;
    display: inline-flex;
    margin-top: 8px;
}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="css/style.css" />
    <link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet" />
    <title>Document</title>
</head>

<body>
    <!-- NavBar -->
    <div class="nav">

        <!-- Logo Imagen -->
        <header>
            <img class="logo" src="img/logosweb.png" alt="" />

            <!-- Componentes Navegación -->
            <nav>
                <ul class="lista">
                    <li><a href="#">Presencial</a></li>
                    <li><a href="#">Online</a></li>
                    <li><a href="#">Corporativo</a></li>
                    <li><a href="#">Exámenes</a></li>
                    <li><a href="#">Pagos</a></li>
                    <li><a href="#">Blog</a></li>
                    <li><a href="#">Nosotros</a></li>
                </ul>
            </nav>
            <a class="estudiante">Estudiantes</a>
        </header>
        <h3 class="modalidades-titulo">Modalidades</h3>

    </div>

    <!-- Modalidades -->

    <section class="modalidades">

        <section class="bloques">
            <img src="/img/img1.jpg" alt="">
            <h4>Presencial</h4>
            <p>
                Asiste a clases en cualquiera de nuestras sedes. Tendrás flexibilidad de horarios, docentes altamente calificados; refuerzos y tutorías en el momento que lo requieras.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img2.jpg" alt="">
            <h4>Online</h4>
            <p>
                Entra aquí para conocer todos nuestros cursos en modalidad e-learning y virtual con diferentes métodos educativos.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img3.jpg" alt="">
            <h4>Empresas</h4>
            <p>
                Permite a los estudiantes incrementar sus aptitudes laborales y de negocios con la adquisición de un nuevo idioma de acuerdo al estilo de aprendizaje predominante.
            </p>
            <a href="#">Comenzar</a>
        </section>

        <section class="bloques">
            <img src="/img/img4.jpg" alt="">
            <h4>Exámenes</h4>
            <p>
                Certifica internacionalmente tu nivel de inglés y accede a oportunidades laborales y académicas en cualquier parte del mundo.
            </p>
            <a href="#">Comenzar</a>
        </section>

    </section>
</body>
</html>

0

La principal razón por la que se están comportando así tus bloques es porque tienes un max-width: 25%; en tu clase .modalidades .bloques que quedan muy justos, intenta simplemente bajarle a 20%.

Como algo así:

.modalidades .bloques {
  max-width: 20%;
}

Si no, la respuesta del otro compañero es adecuada, puedes utilizar la propiedad gap.

Saludos.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.