Skip to main content
3 de 3
se añadieron 8780 caracteres en el cuerpo

¿Cómo crear cajas de diseño responsive flexboox?

Tengo la siguiente estructura de diseño muy elegante en su forma de adaptarse en pantallas muy pequeñas cada columna se vuelve al 100%.

.bg-dark-1 {
    background-color: #1A1A1A;
}
.module-1 {
    display: flex;
    flex: 1;
}
.col-cover-five {
    flex: 1;
    order: 1;
}
.col-flex {
    display: flex;
}
.col-1 {
    display: flex;
    flex: 2;
    flex-direction: column;
}
.col-grid {
    display: flex;
    flex: 1;
    flex-direction: column;
}
.col-text {
    width: 25%;
    order: 3;
}
.text-category {
    overflow-y: scroll;
    max-height: 40em;
}
.date-text h4 {
    color: rgba(58, 134, 68, 0.9);
    font-size: .875em;
    text-transform: uppercase;
    margin: 0.5em 0;
}
.date-text ul li {
    display: block;
    margin: .5em 0;
    white-space: normal;
}
.date-text ul li a {
    color: #B7B7B7;
    font-size: .875em;
    text-decoration: none;
}

.post {
    margin: 0.7em;
    overflow: hidden;
}
.post-module-x2 {
    width: 100%;
    position: relative;
    display: flex;
}
.thumbnail-left.max img {
    max-height: 12em;
    max-width: 50em;
}
.post-content-x2 {
    padding-left: 1em;
}
/**/
.post-module {
    overflow: hidden;
}
.module-width {
    width: 390px;
}
.module-full {
    width: 100%;
}
.post-module .post-content{
    margin-top: -5px;
    width: 100%;
    padding: 1em;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 200px;
}
.thumbnail img {
    width: 100%;
    object-fit: cover;
}
.pixels-img-x2 img {
    height: 200px;
}
.pixels-img-x3 img {
    height: 300px;
}
.pixels-img-x35 img {
    height: 350px;
}
.post-module .post-content p{
    font-size: 13px;
    margin-bottom: 1.5em;
}
.post-date img{
    width: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 40px;
    margin-right: 10px;
}
.post-module .post-date{
    display: flex;
    align-items: center;
    margin-top: auto;
}
.thumbnail {
    position: relative;
}
.date {
    position: absolute;
    min-width: 48px;
    min-height: 48px;
    background-color: #fff;
    color: #700877;
    font-size: 18px;
    font-weight: 700;
    padding: 10px 0;
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    border-radius: 100%;
    text-align: center;
    text-transform: uppercase;
    top: 20px;
    right: 20px;
    z-index: 1;
}
.date * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    -webkit-transition: all 0.25s ease;
    transition: all 0.25s ease;
}
.date span {
    display: block;
    line-height: 14px;
}
.date .month {
    font-size: 11px;
}

.post-date small{
    color: #888;
}
<div class="box module-1 bg-dark-1">
                            <div class="col-cover-five">
                                <div class="box col-flex">
                                    <div class="col-1"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/YJdDc99.jpg" alt="Jugadores de Liga">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div></div><div class="col-grid"><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">22 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/ZGd83BY.jpg" alt="Salida de jugadores">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Estos son los jugadores de Liga de Quito que no seguirán en el club la próxima temporada</h2>
                                        </a>
                                        <p class="result">La dirigencia " Alba" ya piensa en el 2021</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Justo ahora</span>
                                        </div>
                                    </div>
                                </div><div class="post">
                                    <div class="thumbnail">
                                        <div class="date">
                                            
            <span class="day">18 </span>
            <span class="month">Nov</span>
        
                                        </div>
                                        <img src="https://i.imgur.com/Wux8vR8.jpg" alt="Liga de Quito con ausencias">
                                    </div>
                                    <div class="text-horizontal">
                                        <a href="#">
                                            <h2 class="sub_title colr-yellow2">Liga de Quito con ausencias para enfrentarse a Emelec</h2>
                                        </a>
                                        <p class="result">Pablo Repetto con problemas al definir su once titular</p>
                                        <div class="post-date">
                                            <span class="timestamp colr-white2">Hace 4 días</span>
                                        </div>
                                    </div>
                                </div></div>                                </div>
                            </div>
                            <div class="col-text">
                                <div class="text-category">
                                    <div class="date-text">
                                        <h4>Titulo Principal</h4>
                                        <ul>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                            <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                      <li><a href="">Enlaces Resultado</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>

No obstante lo que deseo lograr es crear unas cuadriculas de 5, a excepción de algunos aspecto del diseño, tener 3 filas de imágenes más pequeñas y las dos más grandes, mediante el uso de flexbox es posible pero no doy con los cambios que se debe realizar para tener el siguiente aspecto:

introducir la descripción de la imagen aquí

Nota: Que los cambios que se deban realizar sea solamente en esta estructura HTML y estilo css

<div class="box col-flex">
    <div class="col-1"></div>
    <div class="col-grid"></div>
</div>