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 structure
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;
}
index.css
?width: 1
is not valid CSS.width
demands a proper length value, and anything but0
needs a unit to be one.flex-wrap
would probably have worked, if you had specified a proper width for your items.