-2

I am writing components in react and for now trying to style using index.css(I know that is not the right way).So here is the structureenter image description here

Also I want to display certain number of productContainer components(let us say 3) out of a total 24. Right now everything gets displayed in the same line. I tried flex-wrap but it does not work correctly.Width also pushes everything in the same line.

I know we can fix it by using inline block or grid but I wanted a flexbox way of doing the same.

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;
}

enter image description here

7
  • Show your css also? Jul 16, 2019 at 10:12
  • can you show your index.css ?
    – Gaël S
    Jul 16, 2019 at 10:12
  • added css for the same
    – leo
    Jul 16, 2019 at 10:17
  • width: 1 is not valid CSS. width demands a proper length value, and anything but 0 needs a unit to be one. flex-wrap would probably have worked, if you had specified a proper width for your items.
    – misorude
    Jul 16, 2019 at 10:20
  • that was some copy paste error...I put 100px there...
    – leo
    Jul 16, 2019 at 10:22

1 Answer 1

0

You need both wrap and basis to achieve the result you want. flex-basis is the equivalent of width in flex, and flex-wrap will make the elements not overflow. Not specifying flex-grow will maintain the same size for the last elements that do not fit neatly into row (if you had odd elements, like in this example).

.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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.