分类导航

程序问答发布时间：2022-06-02 发布网站：大佬教程 code.js-code.com

大佬教程收集整理的这篇文章主要介绍了如何使用 flex-direction: row 将项目按行顺序排列；，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。

如何解决如何使用 flex-direction: row 将项目按行顺序排列；？

开发过程中遇到如何使用 flex-direction: row 将项目按行顺序排列；的问题如何解决？下面主要结合日常开发的经验，给出你关于如何使用 flex-direction: row 将项目按行顺序排列；的解决方法建议，希望对你解决如何使用 flex-direction: row 将项目按行顺序排列；有所启发或帮助；

如何将这些盒子按顺序排列成一行？我尝试使用 flex-direction: row 解决这个问题；但它产生了另一个问题，因为每个盒子都有不同的高度

HTML

#container {
  wIDth: 35%;
  height: 80vh;
  border: 1px solID black;
  display: flex;
  flex-flow: column wrap;
}

#container > div {
  wIDth: 5rem;
  border: 1px solID black;
  margin: 3px;
  display: inline-block;
  flex-grow: 1;
}@H_674_16@
@H_874_17@<div ID="container">
  <div style='height: 10rem'>1</div>
  <div style='height: 6rem'>2</div>
  <div style='height: 5rem'>3</div>
  <div style='height: 9rem'>4</div>
  <div style='height: 3rem'>5</div>
  <div style='height: 5rem'>6</div>
  <div style='height: 2rem'>7</div>
  <div style='height: 7rem'>8</div>
  <div style='height: 9rem'>9</div>
  <div style='height: 5rem'>10</div>
  <div style='height: 7rem'>11</div>
  <div style='height: 1rem'>12</div>
  <div style='height: 11rem'>13</div>
  <div style='height: 6rem'>14</div>
  <div style='height: 6rem'>15</div>
</div>@H_674_16@

解决方法

#container {
    border: 1px solid black;
    display: flex;
    align-items: center;
    height: 100%;
    width: 100%;
}

#container > div {
    width: 5rem;
    border: 1px solid black;
    margin: 3px;
}@H_674_16@
@H_874_17@<div id="container">
  <div style='height: 10rem'>1</div>
  <div style='height: 6rem'>2</div>
  <div style='height: 5rem'>3</div>
  <div style='height: 9rem'>4</div>
  <div style='height: 3rem'>5</div>
  <div style='height: 5rem'>6</div>
  <div style='height: 2rem'>7</div>
  <div style='height: 7rem'>8</div>
  <div style='height: 9rem'>9</div>
  <div style='height: 5rem'>10</div>
  <div style='height: 7rem'>11</div>
  <div style='height: 1rem'>12</div>
  <div style='height: 11rem'>13</div>
  <div style='height: 6rem'>14</div>
  <div style='height: 6rem'>15</div>
</div>@H_674_16@

它工作正常，如果你只设置 display: flex; （flex-direction 的默认值为 row）和宽度：100%;

#container {
    width: 100%;
    height: 80vh;
    border: 1px solid black;
    display: flex;
}
#container > div {
  width: 5rem;
  border: 1px solid black;
  margin: 3px;
  display: inline-block;
  flex-grow: 1;
}@H_674_16@
@H_874_17@<div id="container">
  <div style='height: 10rem'>1</div>
  <div style='height: 6rem'>2</div>
  <div style='height: 5rem'>3</div>
  <div style='height: 9rem'>4</div>
  <div style='height: 3rem'>5</div>
  <div style='height: 5rem'>6</div>
  <div style='height: 2rem'>7</div>
  <div style='height: 7rem'>8</div>
  <div style='height: 9rem'>9</div>
  <div style='height: 5rem'>10</div>
  <div style='height: 7rem'>11</div>
  <div style='height: 1rem'>12</div>
  <div style='height: 11rem'>13</div>
  <div style='height: 6rem'>14</div>
  <div style='height: 6rem'>15</div>
</div>@H_674_16@

您在容器 > div 中写了“disolay”而不是“display”。

你在哪里使用了 flex row ？在 div 或容器中？