Nested Flexbox Elements

Looking to nest elements using flexbox in order to achieve the following layout:

https://i.sstatic.net/bEKps.png

Does anyone know how to make this happen?

cssnestedflexbox

Answer №1

Finally, after several attempts, I believe I have achieved the desired outcome.

body {
  background: skyblue;
}

a {
  text-decoration: none;
}

.wrapper {
  margin: 2%;
}

.articles {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}

.article-card {
  background-color: #FFF;
  box-shadow: 0 4px 4px -4px rg;
}

.article-card--big {
  width: calc(50% - 30px);
  margin-right: 30px;
  float: left;
}

.article-card--flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-flow: row wrap;
      flex-flow: row wrap;
  width: 50%;
}

.article-card--landscape {
  width: calc(50% - 30px);
  float: left;
  margin-right: 30px;
  margin-bottom: 30px;
}
.article-card--landscape:nth-child(3), .article-card--landscape:nth-child(4) {
  margin-bottom: 0;
}

.card-content {
  display: block;
  padding: 15px;
}

.card-img {
  display: block;
  background: #ededed;
  position: relative;
  overflow: hidden;
}
.card-img:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 70%;
}
.card-img img {
  position: absolute;
  left: 0;
  right: 0;
  top: -100%;
  bottom: -100%;
  margin: auto 0;
  width: 100%;
  height: auto;
}

img {
  max-width: 100%;
  height: auto;
}
<div class="wrapper">
  <section class="articles articles-category">
    <article class="article-card article-card--big">
      <a href="">
        <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
        <span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
        <span class="infos">
<span class="time">Há 21 horas</span>
        </span>
        </span>
      </a>
    </article>
    <div class="article-card--flex">
      <article class="article-card article-card--landscape">
        <a href="">
          <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
          <span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
          <span class="infos">
<span class="time">Há 21 horas</span>
          </span>
          </span>
        </a>
      </article>
      <article class="article-card article-card--landscape">
        <a href="">
          <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
          <span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
          <span class="infos">
<span class="time">Há 21 horas</span>
          </span>
          </span>
        </a>
      </article>
      <article class="article-card article-card--landscape">
        <a href="">
          <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
          <span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
          <span class="infos">
<span class="time">Há 21 horas</span>
          </span>
          </span>
        </a>
      </article>
      <article class="article-card article-card--landscape">
        <a href="">
          <span class="card-img"> <img src="http://www.placehold.it/300x240" alt=""> </span>
          <span class="card-content">
<span class="title">Dolores é Wyatt: teorias finais para o último episódio de Westworld</span>
          <span class="infos">
<span class="time">Há 21 horas</span>
          </span>
          </span>
        </a>
      </article>
    </div>
  </section>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips to detect a specific animation completion on an element?

How can I ensure that a specific animation ends when multiple animations are triggered on an element? My scenario involves an overlay song list that appears when a list icon is clicked. The challenge lies in closing the menu smoothly. I have implemented a ...

javascriptjqueryhtmlcss

Angular: Design dependent on attributes

Can I customize the styling of a div in accordance with a boolean property called "isActive" on my controller using Angular? <div class="col-md-3" (click)="isActive = !isActive"> <div class="center"> <i class="fa fa-calendar"& ...

javascriptcssangular

Synchronizing CSS3 Animation Events and Event Listeners in jQuery: A Complete Guide

I've been exploring different ways to utilize CSS3 Animation Events and Event Listeners across browsers for more precise control over CSS3 animations. While I know it's possible, I'm struggling to implement it due to my current limitations d ...

jquerycssanimation

Responsive design challenge

I'm currently working on a WordPress theme with a fixed header and footer on the homepage, and a vertical slider in between that includes content and images. I've made the website responsive, but I'm facing an issue where the content in the ...

htmlcssresponsive-designscrollcss-position

I'm experiencing an issue with my Bootstrap Navbar Toggle not toggling

Struggling for weeks now to figure out what's wrong with this code. It works perfectly until I resize the browser, then the menu stays open no matter how many times I click the toggle. I want it to be closed by default and only open when the toggle is ...

jqueryhtmlcsstwitter-bootstrapmaterial-design

What causes the delay in CSS animations?

Is there a way to trigger an "updating" image to spin while a long JavaScript function is running? I am currently using JQuery to add a class called "spinning", defined in my CSS for the animation. The problem is that when I add the class and then call a l ...

javascriptjqueryhtmlcssanimation

How come my image isn't cooperating with text-align and vertical-align?

Hey everyone! I'm a newcomer to this community and a newbie when it comes to HTML. :D I encountered a problem recently and discovered that Stackoverflow is full of amazing developers. That's why I've decided to share my problem here and am ...

htmlcssalignment

Creating a custom Chrome extension with CSS embedded within an iframe

Recently, I developed a Chrome app that includes an iframe element within it. <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="v ...

cssgoogle-chrome-app

Extract keys and display the contents of a JSON file using Python

Currently, I am faced with the task of parsing a dictionary that contains diverse data types and structures in order to extract a list of unique headings. The dictionary not only includes key-value pairs but also nested dictionaries, lists, lists of dictio ...

pythonjsontypesnestediterable

Creating Repeating nth-child Patterns with CSS

Currently grappling with a unique CSS challenge related to patterns. Here's what I'm aiming for: For LI 1-3 = green background For LI 4-6 = red background For LI 7-9 = blue background This sequence should repeat as follows: LI 10-12 = green ...

css

Incorporating both an X button and hamburger menu is essential in my Bootstrap design, especially since I am working with React.js

Currently, I am working with the most recent version of Bootstrap and aiming to switch between the recognizable X icon and a hamburger menu. It seems like these two icons are overlapping each other, and I'm unsure if I can modify the default 3 lines o ...

cssreactjsbootstrap-4

Maximizing the use of default top positioning for absolutely positioned elements

After observing that an element with position:absolute can have its default top value determined based on its immediate parent's position, regardless of whether it is set to relative or not, BoltClock explained that in such cases, it remains in a stat ...

csscss-position

What is the best way to place a floating elastic div on top of an elastic background and ensure that the div stays in place?

Looking for some creative input here. Don't have a specific question in mind, but open to ideas. Just to clarify, I want both the floating div and the background to resize as the window size changes, while keeping the div in the same position on top ...

javascripthtmlcss

Previewing the small version, loading the URL into a container

Currently, I am working with jQuery's .load(url, ...) function to bring in a url and display it within a div. However, I am facing an issue where the result needs to be resized in order to fit correctly within the layout. Can anyone provide guidance o ...

javascriptjquerycss

JavaScript: Modify the dropdown class with a toggle option

Hi there, I'm currently facing a small issue and I could really use some assistance. I have a dropdown menu with two selection options - "green" and "blue", and I need to toggle a class based on the selected option. If you'd like to take a look, ...

javascriptjqueryhtmlcssdrop-down-menu

Adjustable DIV based on screen size

I am attempting to create a flexible div that will adjust its width and height proportionally based on the viewport size. However, in the example above, this method only seems to make the div expand horizontally without affecting the vertical height (wh ...

htmlcssheightpercentageexpandable

The ultimate guide to personalizing group titles in Angular UI-Select

Is there a way in Angular ui-select to customize the group label? I want to make it larger than the selection items as shown in the image below. https://i.stack.imgur.com/ofcak.png The list is currently grouped by country, but how can I adjust the size o ...

javascripthtmlcssangularjsangular-ui-select

Learn how to style inline HTML elements, such as headings, labels, input fields, and buttons, which are typically displayed as block elements

Title. For my dictionary chrome extension, I am looking to inline a label, input field, and button all in one line. This is what I want to achieve: Define:[ INPUT ] DEFINE The brackets represent the input field and "DEFINE" is the ...

htmlcsslayoutinputgoogle-chrome-extension

Achieving a seamless integration of a navbar and video in Bootstrap 5.3: tips and tricks

I'm updating a website design using Bootstrap and I want to create a navbar with a video playing in the background. To ensure that the navbar stays fixed at the top while scrolling, I made it sticky. After testing various methods, I managed to posit ...

htmlcssbootstrap-5

Firefox showing inconsistent jQuery positioning results

Here is a fiddle I created to demonstrate the issue at hand... https://jsfiddle.net/scottieslg/q78afsu8/10/ Running this fiddle in Chrome or Opera yields a value of 8. However, Firefox returns 9, and IE gives 8.5. How can I ensure consistency across al ...

jquerycssfirefox