0

Estoy intentando hacer una página web con flexbox y tengo un problema cuando quiero alinear tres cajas con una que hay arriba, así: https://i.sstatic.net/qs3nm.jpg Las tres cajas divididas de forma igual con la de arriba Para eso he intentado dividir las cajas de abajo con un width: calc (100% / 3), dividiendo el ancho 100 de la caja entre tres para que me alinee las tres cajas, pero no sé porque no me las alinea con la de arriba. A lo mejor no es la manera correcta de hacerlo. Espero que alguien me pueda ayudar. Gracias de antemano.

Aquí está el código CSS y HTML

        .cont-main {
            width: 100%;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .box-first {
            flex-wrap: wrap;
            flex-direction: row;
            width: 100%;
        }
        
                .article-pdg {
            padding: 24px;
            box-sizing: border-box;
        }
        .article-main-first {
            padding: 24px;
            box-sizing: border-box;
        }
        
        /*main*/
        .first-article-main {
            flex-wrap: wrap;
            flex-direction:row;
            width: 100%;
            justify-content: space-between;
        }
        .amp-img-first {
            width: 65.1%;
            overflow: hidden;
        }

        .amp-text-first {
            width: 34.9%;
            padding-left: 24px;
        }

        
        .amp-text-first {
            justify-content: space-around;
            flex-direction: column;
        }
        .title-main-first {
            margin-bottom: 30px;
        }
        
 
        .box-news-cover {
            width: calc(100% / 3);
        }
        .cont-box-news-cover {
            width: 100%;
        }
  <main>
      <div class="container">
          
          <div class="cont-main flex">
              
              <div class="box-first flex">
                  
                  <article class="first-article-main article-main-first flex">
                      <div class="amp-img-first">
                         <a href="#">
                          <img alt="A view of the sea"
                          class="amp-main-first-picture"
  src="https://via.placeholder.com/735x302"
  width="735"
  height="302"
  layout="responsive">
                          </a>
                      </div>
                      <div class="amp-text-first flex">
                          <span class="category-main"><a href="#">Categoria</a></span>
                          
                          <div class="cont-text-main-first">
                          <h2 class="title-main-first"><a href="#">Título</a></h2>
                          <p class="details-main-first">Subtitulo</p>
                          </div>
                          
                          <span class="date-main-first">Date</span>
                      </div>
                  </article>
                  
                  <div class="cont-box-news-cover flex">
                  <article class="box-news-cover article-pdg">
                      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

</span>
                  </article>
                                    <article class="box-news-cover article-pdg">
<img src="img/000_1qx5q8-2_5eac526fb484d.jpg" class="img">
                  </article>
                                    <article class="box-news-cover article-pdg">
                      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</span>
                  </article>
                  </div>
                  
              </div>
              
              <div class="box-secundary"></div>
              
          </div>
          
      </div>
  </main>

2
  • Dos secciones de las tres deben dar el ancho de la caja gris y la otra el ancho del texto (categoría, titulo, subtitulo...)
    – Ruben
    Commented el 30 jun. 2020 a las 20:18
  • He dividido los tres en porcentaje con el width calc 100 / 3
    – Ruben
    Commented el 30 jun. 2020 a las 20:21

1 respuesta 1

1

Encontré dos problemas, el primero es no usas display: flex en el contenedor padre, lo otro es el padding, q le agregas a la cajas para separarlas (esto le agrega ancho a este)

65.1% + (34.9% + 24px) // Esto dara mas del 100% del ancho, lo cual la ultima caja ira hacia abajo

Una solución fácil es usa calc()

.cont-main {
            width: 100%;
            flex-wrap: wrap;
            flex-direction: column;
        }
        .box-first {
            flex-wrap: wrap;
            flex-direction: row;
            width: 100%;
        }
        
                .article-pdg {
            padding: 24px;
            box-sizing: border-box;
        }
        .article-main-first {
            padding: 24px;
            box-sizing: border-box;
        }
        
        /*main*/
        .first-article-main {
            display: flex; //esto es nuevo
            flex-wrap: wrap;
            flex-direction:row;
            width: 100%;
            justify-content: space-between;
        }
        .amp-img-first {
            width: 65.1%;
            overflow: hidden;
        }

        .amp-text-first {
            width: calc(34.9% - 24px) //restando padding;
            padding-left: 24px;
        }

        
        .amp-text-first {
            justify-content: space-around;
            flex-direction: column;
        }
        .title-main-first {
            margin-bottom: 30px;
        }
        
 
        .box-news-cover {
            width: calc(100% / 3);
        }
        .cont-box-news-cover {
            width: 100%;
        }
<main>
      <div class="container">
          
          <div class="cont-main flex">
              
              <div class="box-first flex">
                  
                  <article class="first-article-main article-main-first flex">
                      <div class="amp-img-first">
                         <a href="#">
                          <img alt="A view of the sea"
                          class="amp-main-first-picture"
  src="https://via.placeholder.com/735x302"
  width="735"
  height="302"
  layout="responsive">
                          </a>
                      </div>
                      <div class="amp-text-first flex">
                          <span class="category-main"><a href="#">Categoria</a></span>
                          
                          <div class="cont-text-main-first">
                          <h2 class="title-main-first"><a href="#">Título</a></h2>
                          <p class="details-main-first">Subtitulo</p>
                          </div>
                          
                          <span class="date-main-first">Date</span>
                      </div>
                  </article>
                  
                  <div class="cont-box-news-cover flex">
                  <article class="box-news-cover article-pdg">
                      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500

</span>
                  </article>
                                    <article class="box-news-cover article-pdg">
<img src="img/000_1qx5q8-2_5eac526fb484d.jpg" class="img">
                  </article>
                                    <article class="box-news-cover article-pdg">
                      <span>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s

</span>
                  </article>
                  </div>
                  
              </div>
              
              <div class="box-secundary"></div>
              
          </div>
          
      </div>
  </main>

2
  • Adicional, te recomiendo usar css3generator.com para q' te familiarices con flexbox Commented el 30 jun. 2020 a las 20:37
  • 1
    Me sirvió de mucho! Muchas gracias y seguiré practicando! Un saludo
    – Ruben
    Commented el 30 jun. 2020 a las 20:41

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.