askvity

# How to Display Images Side by Side in React Using Flexbox

Published in React Image Layout 4 mins read

Okay, here is how to display images side by side in React, based on the provided reference.

The most common and effective way to display images side by side in React is by using CSS Flexbox on a parent container that wraps the individual image elements.

How to Display Images Side by Side in React Using Flexbox

To arrange multiple images horizontally next to each other, you can follow these steps, utilizing the principles mentioned in the reference:

1. Wrap Images in a Parent Container

Render a list of your images within a parent div element. According to the reference, you would wrap the list of items (like products, each containing an image) with a div, potentially using a class name like productsContainer.

// Example React Component structure
function ImageGallery({ images }) {
  return (
    <div className="imagesContainer"> {/* Or productsContainer as in the reference */}
      {images.map((image, index) => (
        <div key={index} className="imageItem"> {/* Or product class */}
          <img src={image.src} alt={image.alt} />
        </div>
      ))}
    </div>
  );
}

In this structure, imagesContainer is the parent, and each imageItem (or "product" holding an image) is a child. You need to ensure your data includes the src for each image, as mentioned in the reference.

2. Apply Flexbox to the Parent Container

Apply CSS Flexbox properties to the parent container's class (.imagesContainer or .productsContainer).

  • display: flex;: This turns the parent container into a flex container, allowing its direct children to be arranged using flex properties. By default, children will try to lay out in a single row.
  • flex-wrap: wrap;: This is crucial if you have many images. It tells the flex container to wrap items onto multiple rows if they exceed the container's width, preventing overflow and keeping images within the layout.
/* Example CSS */
.imagesContainer { /* Or .productsContainer */
  display: flex;
  flex-wrap: wrap; /* Allows items to wrap to the next line */
}

3. Set Widths for Child Items

Set a width for the individual child elements (.imageItem or your product class) that wrap each image. To display images side by side, each child item needs to take up a specific percentage of the parent container's width.

  • Set the width of the items (the elements containing the <img> tag) to 50% or less.
    • Setting width: 50%; will place exactly two images side by side (assuming no padding/margin or using box-sizing: border-box).
    • Setting width: 33.33%; will place three images side by side.
    • Setting width: 25%; will place four images side by side.
    • Using a value less than 50% allows for margins or padding between images while still fitting multiple on a line.
/* Example CSS */
.imageItem { /* Or your product class */
  width: 50%; /* For two images per row */
  box-sizing: border-box; /* Include padding and border in the element's total width */
  padding: 5px; /* Optional: Add some spacing between images */
  /* You might also add other styles like text-align: center; */
}

.imageItem img {
  max-width: 100%; /* Ensure image doesn't overflow its container */
  height: auto; /* Maintain aspect ratio */
  display: block; /* Remove extra space below the image */
  margin: 0 auto; /* Center the image if the container is wider */
}

By combining these techniques – wrapping items in a Flexbox container, setting flex-wrap, and controlling the width of the child items – you can easily display images side by side in React, just as described in the reference. The <img> tag is rendered as one of the children within these sized items, or directly as the item itself if applicable.

Key CSS Properties for Side-by-Side Images

Here's a summary of the primary CSS properties used for this approach:

CSS Property Applied To Purpose
display: flex; Parent Container Enables the Flexbox layout for children.
flex-wrap: wrap; Parent Container Allows items to flow onto the next line if they don't fit horizontally.
width: X%; Child Items Determines how many items fit on a single line (e.g., 50% for two).
max-width: 100%; <img> Tag Ensures the image scales down to fit its container.

Using this Flexbox method provides a responsive and flexible way to arrange images in your React applications.

Related Articles