响应式弹性盒子布局

Question

响应式弹性盒子布局

3

我有一个循环，这个循环保存我写的所有内容，并将它们作为列表一个接一个地返回给我，但是我需要使用响应式 Flex box 每行显示 2 项，但我不知道该如何实现！

我想这很简单，但我是个初学者，有人能帮帮我吗？

我正在尝试这种方法，但是它是错误的，我需要完成屏幕。

<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>

- Julia Cassemiro

3个回答

1

使用 flex-basis 可以确保每行有两个 flex 项目，然后使用 flex-grow 让它们填充剩余的可用空间。 flex-basis 是让 flex 项目“告诉” flex 容器它们想要多大的属性。您可以将其指定为固定的 px 值，也可以指定百分比。百分比是相对于 flex 容器的内部大小而言的。

flex 容器（您的 ul 元素）将获取每个元素，查看其 flex-basis，如果它们仍然可以适合，则将它们放置在一个 flex 行中。例如，如果您设置了 flex-basis: 50%，则每行可以容纳两个项目，接下来的项目将必须放在自己的一行中。

挑战在于，如果您在flex容器中使用gap来在flex项目之间添加一些间距，那么可能会将您的flex项目推到新行。例如，您的第一个flex项目是flex-basis: 50%，然后有20px的间隙，第二个flex项目使用flex-basis: 50%就不再适合了。 两种可能的解决方案：

在设置flex-basis时手动考虑gap。例如，如果您有gap: 10px，则可以设置flex-basis: calc(50% - 10px)
为您的flex项目设置保证每行只有两个flex项目的flex-basis，但留出足够的空间供gap使用。然后让flex项目增长以填充flex行中的剩余空间。例如，您的两个具有flex-basis: 35%的flex项目将总共占用70%，然后您的gap将增加一点，剩余的约30%几乎肯定足以容纳gap，除非它真的很大。

这里是使用第二种想法的有效解决方案：

ul {
  list-style-type: none;
  padding: 0;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.flex-item {
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 35%;
}

.flex-item:nth-child(odd) {
  background-color: whitesmoke;
}

.flex-item:nth-child(even) {
  background-color: burlywood;
}

<ul class="flex-container">
  <li class="flex-item">Item 1</li>
  <li class="flex-item">Item 2</li>
  <li class="flex-item">Item 3</li>
  <li class="flex-item">Item 4</li>
  <li class="flex-item">Item 5</li>
  <li class="flex-item">Item 6</li>
  <li class="flex-item">Item 7</li>
  <li class="flex-item">Item 8</li>
  <li class="flex-item">Item 9</li>
  <li class="flex-item">Item 10</li>
</ul>

- Andy Jakubowski

谢谢，我明白了。 - Julia Cassemiro

0

<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="flex p-6 bg-white border-b border-gray-200" style="width: 100%">
               <div class="box">
               {{ $note->actual_date }}
               </div>
               <div class="box">
               {{ $note->getNoteAsHTML() }}
               </div>
         </div>
     </div>
   @endforeach

- Prakash Thapa

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- dale landry · Accepted Answer

我需要使用响应式Flex盒子每行显示2个项目。

我认为我知道你在寻找什么，如果我错了，我可以删除这个答案或编辑它以进一步说明你的意图。

可以通过在flex子元素上使用min-width和flex-grow来实现这一点。

例如，如果您已重置了边距和填充，并且知道没有任何隐藏的内容要处理，那么您可以计算元素之间的间隙或边距以及flex子元素上的百分比。以下示例使用JavaScript驱动的数组来迭代并模拟具有动态字符串数量的问题。我在父元素中添加了flex-wrap: wrap;和gap为1em，然后添加了flex-grow为1，以及min-width: calc(50% - 1em)。因此，flex-grow: 1告诉CSS应将多少剩余空间分配给该项，然后min-width: calc(50% - 1em)告诉CSS元素的最小宽度应为其父元素的宽度的50％减去gap大小1em。因此，这将仅允许两个元素占用每个flex父级行的空间，然后父级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>