Javascript 如何尽可能多地适应<；部门>；尽可能水平地移动

我有一个容器

div

，其中包含许多其他

div

s。我希望将那些

div

s布局到一种网格视图中，其中每行中的

div

s尽可能多，宽度相等。

div

s具有已定义的最小宽度属性，但没有最大宽度属性

我发现它与我想要的不同，我想要的不是固定的列数，而是固定的最小宽度

我正在尝试做出一种响应性设计——我想我会使用flex box来实现这一点，但我真的找不到实现我想要的任何指南。因此，基本上我想根据flex项的最小宽度和屏幕宽度，制作一个具有灵活列数的flex框

---

感谢您的帮助：3

以下是您可以使用flex box的方法

.container{
显示器：flex；
柔性流：行换行；
}
.container>div{
宽度：50px；
高度：50px；
背景：#e6；
文本对齐：居中；
边框：1px点#阿巴巴；
}

1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16

对于外部div，为其提供CSS样式：

display:flex;
flex-direction:row;

然后，对于内部div，为其提供CSS样式：

min-width: (whatever you want);

下面我举了一个例子。然而，您当然最好为外部div设置一个类，为内部div设置一个类，以实现关注点的清洁和分离

你好
再见
一
二
三
四
五
六
七
等等

您可以尝试以下方法：

  <div class="flex-container">
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
    <div>1</div>
  </div>

  .flex-container {
  -webkit-flex-wrap: wrap; /* Safari */
  flex-wrap:         wrap;
  display: flex;
}
.flex-container > div {
  background: pink;
  color: white;
  font-size: 25px;
  margin: 0 2px;
}

1.
1.
1.
1.
1.
1.
1.
1.
1.
1.
.柔性容器{
-webkit flex wrap:wrap；/*Safari*/
柔性包装：包装；
显示器：flex；
}
.flex容器>div{
背景：粉红色；
颜色：白色；
字体大小：25px；
边际：0.2px；
}

这与不带flex的Sreekanth相同

span和div选择器可以更改为类选择器，以获得更通用的解决方案

.container>div{
浮动：左；
宽度：50px；
高度：50px；
背景：#e6；
文本对齐：居中；
边框：1px点#阿巴巴；
}
.container>span{
显示：块；
明确：两者皆有；
}

之前
1.
2.
3.
4.
5.
6.
7.
8.
9
10
11
12
13
14
15
16
在

之后，首先，您可以在一个div中添加无限量的div。。现在，如果希望整个div组等于父级的100%宽度，则需要将100%/（父级内部的div）除以，并将该宽度分配给每个子级（父级内部的整个div）。为了使其正常工作，您需要为父项和子项提供“框大小：边框框”。此外，如果您希望它们“水平对齐”，则必须选择以下选项：

为每个子div指定属性Float:left

为每个子div指定属性Display:Inline block:

---

现在，在我看来，当试图建立一个响应性强的网站时，这不是一个好办法。除了“如何水平放置尽可能多的div”之外，还有其他一些技巧。我想您已经看到了一个教程，其中使用了列，但是有一个经验法则是有原因的，那就是不要在一行中使用超过12列。但同样，在尝试做出响应性设计时，还有更好的方法。

我认为您对这个问题不是很了解，或者至少不是我想要的方式。不应指定

div

s的大小，只应指定minwidth属性，使其缩放以适应屏幕宽度。我希望每行有尽可能多的div，但是如果没有水平滚动条，div不会小于它们的最小宽度。谢谢你的回答。至少目前为止，我只是使用了换行和flex grow。这是唯一一个真正回答这个问题的答案。虽然我已经解决了自己的问题，但我还是被未来的观众所接受。你是最棒的。