我有一个相互重叠的 flex 包装 div 容器。这些可能是不同的高度并包裹多次。如何避免重叠？

Posted 2023-02-22

【中文标题】我有一个相互重叠的 flex 包装 div 容器。这些可能是不同的高度并包裹多次。如何避免重叠？

【英文标题】：I have a container of flex wrapped divs that overlap each other. these could be various heights and wrap multiple times. How do I avoid the overlap?

【发布时间】：2022-01-23 19:49:19

【问题描述】：

我需要第一个 div 将第二个 div 向右推，依此类推，但是，div 的宽度在包裹后保持不变，导致它重叠。

添加 100% 的宽度是可行的，但它会使最小 div 的宽度与两侧最大的留出空间相同。

列映射如下：

orderedColumns.map((column, index) => 
        return (
          <Column
            key=index
            column=column
     
          />
        );
      ) 

<div style= display: "flex" >
       <div
         style=
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         
       >
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
         <div>Test1</div>
       </div>
       <div
         style=
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         
       >
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
         <div>Test2</div>
       </div>
       <div
         style=
           height: "60px",
           display: "flex",
           flexDirection: "column",
           flexWrap: "wrap",
           overflowX: "visible"
         
       >
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
         <div>Test3</div>
       </div>
     </div>

任何想法都将不胜感激。

谢谢。

【参考方案1】：

在 Flexbox 列中，当项目换行时，不会重新计算父级的宽度，因此会出现问题。参考When flexbox items wrap in column mode, container does not grow its width。

所以我看不出如何使用 flexbox 列实现所需的布局，因为父级无法知道实际宽度。