在flexbox中的儿童中显示儿童中的项目

Question

我有三个CSS课程：.home，.products和.Item。

基本上，.home上的所有组件都应在这样的列中显示：

Home
  Products
  Button
  Something else

虽然.Frouducts中的所有内容都应顺序显示：

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

但是我尝试了很多，但我无法将其作为所需的输出，这些项目始终垂直或水平显示不同的情况。

如果我在列中删除包装div项目的产品，但是如果我添加一个按钮，我希望它显示在所有项目下方，而不是像列表中的项目列表一样。

如果我添加包装div，则这些项目总是在连续显示或喜欢

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 class="Home">
  <section class="Products">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
    <div class="Item">6</div>
    <div class="Item">7</div>
    <div class="Item">8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

任何帮助都将不胜感激，我很难过，并且从未与Flexbox这样的问题

Answer 1

如果您希望您的项目出现在多行上，则需要将flex-wrap设置为wrap ，并给出每个项目flex-basis < /code>，或最小宽度

.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 class="Home">
  <section class="Products">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
    <div class="Item">6</div>
    <div class="Item">7</div>
    <div class="Item">8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

Answer 2

您可以触摸标记吗？并添加一个线路（在您希望线路断路的任何弹性项目之后）。添加＆lt; div class =“ line-break”＆gt;＆lt;/div＆gt;在您想要链接中断的项目之后，此css .line-break {width {width：100％;可见性：隐藏;}和flex-flow：row wrap; to .products

.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;
  flex-flow: row wrap;
}

.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 */
}

.line-break {
  width: 100%;
  visibility: hidden;
}

<div class="Home">
  <section class="Products">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="line-break"></div>
    <div class="Item">5</div>
    <div class="Item">6</div>
    <div class="Item">7</div>
    <div class="Item">8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

或使用网格，它总是可以进行这种布局。

.Item {
  width: 100px;
  height: 100px;
  margin: 0.5rem;
  border: 1px solid #000000;
  text-align: center;
}

.Products {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
}

<div class="Home">
  <section class="Products">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
    <div class="Item">6</div>
    <div class="Item">7</div>
    <div class="Item">8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>

Answer 3

你几乎在那里。您必须向父添加Flex-wrap并计算卡片的正确宽度（项目）。请参阅CSS中的评论以获取进一步的参考：

.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 class="Home">
  <section class="Products">
    <div class="Item">1</div>
    <div class="Item">2</div>
    <div class="Item">3</div>
    <div class="Item">4</div>
    <div class="Item">5</div>
    <div class="Item">6</div>
    <div class="Item">7</div>
    <div class="Item">8</div>
  </section>
  <div>
    <button>Add Product</button>
  </div>
</div>