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 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>