Display items in child of child in column in flexbox-CodePudding

I have three css classes: .Home, .Products, and .Item.

basically all components on the .Home should display in a column like this:

Home
  Products
  Button
  Something else

While everything in .Products should display sequentially like this:

Products
  Item01  Item02  Item03 Item04
  Item05  Item06  Item07 Item...

However I have tried a lot and I cannot get this to be the desired output the items always display vertically or horizontally in different situations.

If I delete the products wraping div the items display in a column, but if I add a button I want it to display below all of the items and not with the item list like it is apart of the list.

if I add the wrapping div then the items always display in a row or like

A
B
C
D

.Home {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.Products {
  display: flex !important;
  flex-direction: row !important;
  width: 100% !important;
  height: 100px;
  color: white;
}

.Item {
  margin-right: 3%;
  /* start: added by editor for visualization purpose */
  min-height: 75px;
  border: 2px dashed red;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  /* end: added by editor for visualization purpose */
}

<div >
  <section >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

any help would be appreciated, I am stumped and have never had an issue like this with flexbox

CodePudding user response：

YOu where nearly there. You had to add flex-wrap to the parent and to calculate the correct width of the cards (item). See the comments within CSS for further reference:

.Home {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.Products {
  display: flex;
  /* flex-direction: row; *//* default value and as such unecessary redundant */
  width: 100%;
  min-height: 100px; /* change to min-height to prevent overflow issues */
  color: white;
  --gap: 3%; /* variable for gap, required to calculate correct spacings */
  gap: var(--gap); /* includes the gap */
  flex-wrap: wrap; /* to allow Item to wrap after 4 items to a new row */
}

.Item {
  /* margin-right: 3%; *//* poor use for spacings, use gap on the parent instead */
  /* start: added by editor for visualization purpose */
  min-height: 75px;
  border: 2px dashed red;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  box-sizing: border-box;
  /* end: added by editor for visualization purpose */
  --col: 4; /* variable for ammount of columns to calculate correct width */
  width: calc((100% - ((var(--col) - 1) * var(--gap))) / var(--col)); /* calculates the correct width for the cards and taking the gap into account.
}

<div >
  <section >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

CodePudding user response：

If you want your items to appear on multiple rows, then you would need to set flex-wrap to wrap and give each of your items a flex-basis, or min-width

.Home {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-items: stretch;
  align-content: stretch;
}

.Products {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between;
  width: 100% !important;
  /* this height ruins the day */
  /* height: 100px; */
  color: white;
  flex-wrap:wrap;
}

.Item {
  /* start: added by editor for visualization purpose */
  min-height: 75px;
  border: 2px dashed red;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: gray;
  /* allow for margin, and borders */
  flex-basis:calc(25% - 3%);
  box-sizing: border-box;
  /* end: added by editor for visualization purpose */
}

<div >
  <section >
    <div >1</div>
    <div >2</div>
    <div >3</div>
    <div >4</div>
    <div >5</div>
    <div >6</div>
    <div >7</div>
    <div >8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>