Assistance with CSS Flexbox: How to align items in a grid format (images, titles, text)

I'm currently working on constructing the layout displayed in the image below. The aim is to have the image on the left with a fixed width, while the text on the right adjusts to the available width.

Furthermore, the objective is for these items to stack in a grid layout.

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

I'm encountering challenges in aligning the items correctly, here's the current setup:

.feature-items {
  background: #CCC;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: inline-block; 
  flex-direction: row;
  box-sizing: border-box;
  width: 336px;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
}

.img-wrapper,
img {
  width: 64px;
  height: 64px;
}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
}
<div class="feature-items">
  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p
    </div>
  </div>
    
</div>

Any assistance on where I might be going wrong would be greatly appreciated. Thank you

htmlcssflexbox

Answer №1

Apply the "display: flex" property to the classes .feature-items and .feature-item--wrapper

.feature-items {
  background: #CCC;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

.feature-item--wrapper {
  background: #efefef;
  flex-direction: row;
  box-sizing: border-box;
  width: 50%;
  align-items: center;
  justify-content: center;
  display: flex;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
}

.img-wrapper,
img {
  width: 64px;
  height: 64px;
}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
}
<div class="feature-items">
  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

  <div class="feature-item--wrapper">
    <div class="img-wrapper">
      <img src="http://clipground.com/images/minecraft-server-clipart-64x64-9.png" width="64">
    </div>
    <div class="text">
      <strong class="feature-title">Title</strong>
      <p class="feature-description">This is a sentence description, hello world.</p>
    </div>
  </div>

</div>

Answer №2

I found these styles to be effective after making some minor adjustments. Also, in the HTML section, be sure to check the closing 'p' tag as it appears to not be properly closed.

.feature-items {
  background: #CCC;
  box-sizing: border-box;
  width: 100%;
  padding: 0px;
}

.feature-item--wrapper {
  background: #efefef;
  display: inline-block; 
  flex-direction: row;
  box-sizing: border-box;
  width: auto;/* adjusted */
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
    display: inline-block;/* added*/
}

.img-wrapper,img {width: 64px;height: 64px;}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
    display: inline-block;/* added*/
}

Answer №3

Give this a shot. Make sure to apply the flex property to the main container, not just the child elements

.feature-items {
  background: #EEE;
  display: flex; /* update */
  flex-flow: wrap;
  width: 100%;
  padding: 0;
}

.feature-item--wrapper {
  background: #f9f9f9;
  display: flex; /* include */
  flex-direction: row;
  box-sizing: border-box;
  width: 336px;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
}

.img-wrapper {
  box-sizing: border-box;
  width: 88px;
  padding-right: 24px;
}

.img-wrapper,
img {
  width: 64px;
  height: 64px;
}

.text {
  box-sizing: border-box;
  padding-top: 24px;
  padding-bottom: 24px;
  flex: 1 1 auto;
}

Answer №4

From my perspective, I believe Flexbox may not be the perfect choice for this particular task. Originally, it was created to align items in either a horizontal or vertical direction. It would be more effective to construct a 4 x 4 grid using CSS Grid and then utilize Flexbox to position the items horizontally within your "feature-item-wrapper" division. Check out the code below for reference:

    body {

    width: 50%;          /*   reduces available width so that */
    margin: 0 auto;      /*   items take up two rows. margin centers everything */
    }

    .feature-items {
      display: grid;
      grid-template-columns: repeat(auto-fill,minmax(300px, 1fr)); /* minimum and max column width */
      grid-gap: 20px; /* separates each grid item */
    }

    .feature-item--wrapper {
      background: #efefef;
      display: flex;
      width: 100%;
    }

    .img-wrapper img {
      padding-top: 20px;
      width: 64px;
      height: 64px;
    }

    .text {
      text-align: left;
      padding: 20px;
    }

The highest-rated answer provided, which you have chosen as the correct solution, does not effectively stack the grid items on smaller devices. To achieve this, I included a minimum width for the columns to prompt stacking when the window size reaches the specified threshold. Additionally, please consider that CSS Grid may not be supported by older browsers.

I hope this information proves helpful :)

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

Learn how to implement JavaScript code that allows a video to start playing only upon clicking a specific button

Within the confines of a div lies a <video autoplay> <source src='myvid'> </video>. This div initially has a display ='none' setting in its CSS. Upon receiving a click event, the display property changes from none to b ...

javascripthtml

Ways to align a nested list vertically

There are two nested lists: <ul> <li>First item <ul> <li> <a href="#">some item</a> </li> <li> <a href="#">some item</a> <</li& ...

css

Iframe Interactivity

My goal is to create an interactive iframe that will match the current parent URL (). For example, if I have an iframe pointing to http://www.google.com and click a link within the iframe, it should update the parent URL to , and then load the clicked con ...

javascriptjqueryhtmliframe

Is it possible to align images vertically with text in a multi-column Bootstrap 4 container?

Inquiring on how to achieve vertical center alignment of text and images for a website section similar to the one shown in this image: https://i.sstatic.net/s8gNh.jpg. The intention is to align the logos and the corresponding text of company names situated ...

htmlcsstwitter-bootstrapbootstrap-4

Navigate using React to a different HTML page based on certain conditions

After calling the fetch function, I am able to retrieve the correct token from the backend application. However, every time in this program, even if an incorrect token is retrieved, the program still navigates to StudentLobby (this should only happen when ...

javascripthtmlcssreactjsfrontend

The fixed left div and scrollable right div are experiencing issues with their alignment

I am having an issue with a section where the left div is fixed and the right div is scrollable. However, the content of the right div scrolls even before the scroll top reaches the section. My goal is for the right div to scroll only when it reaches the t ...

javascripthtmljquerycssflexbox

establish the parent child size with CSS

In my current project, I am faced with a challenge regarding the CSS and HTML code. I am attempting to have a <div> element positioned after an <img> element inherit the width and height of the image. This <div> is meant to act as an over ...

javascripthtmlcss

Combining Content on a GitHub Page

Within the <head> section of my index.html, I have successfully utilized these links on localhost: <link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> <link href=&apos ...

htmlcssgithub-pages

Having trouble with animating the background color of an input button using jQuery?

I'm completely confused as to why the background color isn't changing despite investing a significant amount of time into it: <input type="button" class="front-consultation-btn" value="Get A Free Consultation"> <script> $(' ...

jqueryhtmlanimationcssjquery-animate

Transfer information to a different html page and store it

Seeking guidance on transferring the entire content of input.html to approve.html for validation and database storage. Any tips or advice would be greatly appreciated as I am new to this and have been struggling with this issue for a week. <form action= ...

pythonhtmldjango

The Hamburger Menu Opens Smoothly But Refuses to Shut Down

Below is the HTML code for my website. I have managed to open the hamburger menu with the code, but I am facing an issue where it won't close. I have checked the HTML structuring using a validator and found no errors. Additionally, I have reviewed my ...

htmlcssfrontendbootstrap-5

Parsing HTML code using PHP's DOM parser for iteration

<div class="reviews-summary__stats"> <div class="reviews-summary"> <p class="reviews-title">A</p> <ul class="rating"> <li class="rating__item r ...

phphtmlsimple-html-dom

What steps are involved in uploading data to serve as a filter while running a PHP script to retrieve data from an SQL database?

Currently, I am retrieving data from a PHP file using miniAjax. The code snippet below demonstrates how the process begins: microAjax("genjsonphp.php", function(data) { var json = JSON.parse(data); var points = json; //code continues In the c ...

javaphpjavascripthtmlajax

Altering the dimensions of radio button options

Is it possible to change the size of a radio button using CSS in all browsers? I'm struggling to find a solution and don't want to waste my time if it's not achievable. I haven't explored CSS3 for HTML5 yet. Hmm... ...

htmlcsssizeradio-button

Tips for adding an image to a single product page without including it in the related products section

I have a WooCommerce website and I successfully inserted an image element on a single product page using a conditional tag. However, the same image is also appearing in related products near the website footer in a loop. I do not want these extra images to ...

phphtmlwordpresswoocommerce

React fullpage.js causing z-index stacking problems

Take a look at the demo here: I'm having trouble getting the 'more info' modal to display above all other elements on the screen. Here's the desired stacking order, with the highest stacked element listed first: modal nav open header ...

cssreactjsz-indexfullpage.js

Achieving dynamic HTML element addition through JavaScript while maintaining their record in PHP

There is an input box where the user specifies the number of new DIV elements to be added dynamically. This request is then sent to PHP via Ajax, where it prepares an HTML DIV with some inner input tags. Each DIV has a unique id attribute generated increme ...

javascriptphpjqueryhtmldynamic

Switching background images with Javascript through hovering

I am currently working on implementing a background changer feature from removed after edits into my personal blog, which is only stored on my local computer and not uploaded to the internet. However, I am unsure of what JavaScript code I need to achieve t ...

javascripthtmlimagebackgroundonmouseover

Display a hidden div only when a cookie is set during the initial visit

I'm currently facing an issue while trying to set multiple cookies based on the existence of a div using JavaScript. On the first visit, I want to display the div to the user if it exists, then set a cookie (named redCookie) that expires in 3 days. Up ...

javascriptjquerycsscookies

Electron fails to display images in the compiled version

I'm currently troubleshooting an issue related to displaying images using CSS in my electron project. In the latest version of the application, the images are not showing up when linked from a CSS file. However, in a previous version, the images disp ...

javascripthtmlcsselectron