What is preventing me from setting flex when I add display flex to the parent element?

Question

What is preventing me from setting flex when I add display flex to the parent element?

Currently, I am developing components in React and experimenting with styling using index.css (although I understand this is not the recommended approach). Below is the current structure: https://i.sstatic.net/8euhM.png

I am looking to display a specific number of productContainer components (let's say 3) out of a total of 24. Currently, all items are appearing on the same line and I have attempted using flex-wrap without success. Adjusting the width also results in everything being grouped on the same line.

Although inline block or grid could resolve this issue, I prefer finding a solution via flexbox layout techniques.

CSS:

.productlist {
display: flex;
}
.productContainer {
padding: 10px;
width: 340px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-items: flex-start;
border-style: ridge;
border-color: black;
border-width: 1px;
}
.item {
width: 100px;
word-wrap: break-word;
}

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

javascript css reactjs flexbox

Answer 1

Answer №1

To achieve the desired outcome, it is essential to utilize both wrap and basis. In the context of flex properties, flex-basis serves the same purpose as width, while flex-wrap prevents elements from overflowing. When flex-grow is not specified, the last elements that do not neatly fit into a row will maintain their size. This is particularly useful for scenarios where there are an odd number of elements.

.productlist {
  display: flex;
  flex-wrap: wrap; /* wrap items in container */
}

.productContainer {
  padding: 10px;
  box-sizing: border-box;
  flex-basis: 33%;  /* 3 containers per row */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px ridge black;
}

<div class="productlist">
    <div class="productContainer">
        <div class="item title">Title-1</div>
        <div class="item price">Price</div>
        <div class="item company">Company 1</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-2</div>
        <div class="item price">Price</div>
        <div class="item company">Company 2</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-3</div>
        <div class="item price">Price</div>
        <div class="item company">Company 3</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-4</div>
        <div class="item price">Price</div>
        <div class="item company">Company 4</div>
    </div> 
</div>

Answer 2

To achieve the desired outcome, it is essential to utilize both wrap and basis. In the context of flex properties, flex-basis serves the same purpose as width, while flex-wrap prevents elements from overflowing. When flex-grow is not specified, the last elements that do not neatly fit into a row will maintain their size. This is particularly useful for scenarios where there are an odd number of elements.

.productlist {
  display: flex;
  flex-wrap: wrap; /* wrap items in container */
}

.productContainer {
  padding: 10px;
  box-sizing: border-box;
  flex-basis: 33%;  /* 3 containers per row */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px ridge black;
}

<div class="productlist">
    <div class="productContainer">
        <div class="item title">Title-1</div>
        <div class="item price">Price</div>
        <div class="item company">Company 1</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-2</div>
        <div class="item price">Price</div>
        <div class="item company">Company 2</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-3</div>
        <div class="item price">Price</div>
        <div class="item company">Company 3</div>
    </div>
    <div class="productContainer">
        <div class="item title">Title-4</div>
        <div class="item price">Price</div>
        <div class="item company">Company 4</div>
    </div> 
</div>

What is preventing me from setting flex when I add display flex to the parent element?

Answer №1

Similar questions

Algorithm MinMax is not functioning as originally anticipated

The Query Parameters in NextJS are currently blank and are being utilized with the isReady

Utilize the accurate information retrieved from the API and store it in MongoDB

Navigating through various tables (documents) using angularjs and mongoose

deciding on the axis for flipping a div with CSS

Guidelines for importing Json information onto a Charts.js visualization

In search of a comprehensive AJAX-enabled content management system

Enhancing User Experience with AJAX-loaded Navigation Bar

What is the best way to set up a loop for displaying Chat Bubbles?

Can a DjangoREST+React project be deployed on a single Google Cloud App Engine instance?

Incorporating an if condition within the componentDidUpdate method in React resulted in an unforeseen infinite loop

Utilizing Unique Icons for HTML Button Design

Challenges with Table and <p> Spacing in HTML and CSS

Using React TypeScript: maximize the efficiency of sending multiple JSON objects to the frontend with the useData hook

The useMutation function from react-apollo-hooks is failing to pass variables as intended

Using jQuery to load content with a dynamic variable instead of specific element IDs

An alternative in the Android platform that simulates the functionality of CompositeOperation in

Is it possible to author TypeScript modules in a format other than ES6?

Encountered a peculiar problem with nested $.ajax calls within another $.ajax call

Modifying the content of a webpage with the help of Tampermonkey