php - 响应式 Flex 框

Question

我有一个循环，这个循环保存了我写的所有东西，并将它作为一个列表返回给我，一个元素在另一个之下，但我需要每行显示 2 个元素，使用 Responsive Flex 框，但我不不知道该怎么做!

我想这很简单，但我是初学者，有人可以帮助我吗？

我是这样做的，但是错了，我需要完成屏幕

<ul class="flex flex-wrap gap-6" style="width: 50%; flex-basis: 100%">
     @foreach($notes as $note)
        <div class="bg-white overflow-hidden shadow-sm sm:rounded-lg mb-4">
            <div class="p-6 bg-white border-b border-gray-200" style="width: 100%">
                   {{ $note->actual_date }}
                   <div class="prose prose-sm mt-4">
                   {{ $note->getNoteAsHTML() }}
                   </div>
             </div>
         </div>
       @endforeach
   </ul> 

Answer 1

我需要每行显示 2 个元素，使用 Responsive Flex box

我想我知道您在寻找什么，如果我错了请告诉我，我可以删除此答案或对其进行编辑以进一步修饰您的意图。

这可以通过在 flex-children 上使用 calculated min-width 和 flex 增长。

例如，如果您已重置边距和填充，并且知道没有隐藏的任何一个需要处理，那么您可以计算一个差距 或 margin 元素之间的分隔以及 flex 子 元素上的百分比。下面我使用一个 Javascript 驱动的数组来迭代和模拟你的动态字符串数量的问题。我在父元素上添加了 flex-wrap: wrap; 以及 1em 的 gap => flex parent ，然后添加 1 的 flex-grow，以及 min-width: calc(50% - 1em) 。所以 flex-grow: 1 告诉 css flex 容器中的剩余空间有多少应该分配给元素，然后 min-width: calc(50% - 1em) 告诉 css 元素的最小宽度 应该是 parents< 的 50%/em> 宽度 减去1em 的gap 大小。所以基本上这将只允许两个元素占用每个 flex parents row 的空间，然后是 parents flex-wrap: wrap 接管并将您的下一个元素包装到下一个行或行。

const parent = document.querySelectorAll('.parent')

const target = parent[0];

const arr = ['first list item', 'second list item', 'third list item', 'fourth list item', 'fifth list item', 'sixth list item', 'seventh list item', 'eigth list item', 'ninth list item']
arr.forEach(val => {
  let child = document.createElement('DIV')
  child.classList.add('children')
  child.textContent = val
  target.append(child)
})

* {
   padding: 0;
   margin: 0;
}

.parent {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
}

.children {
  display: flex;
  justify-content: center;
  flex-grow: 1;
  min-width: calc(50% - 1em);
  background-color: green;
  height: 2em;
}

<div class="parent">
</div>