使用具有响应性的柔性显示器制作 img 的 foreach答案

【问题标题】：Making a foreach of img's with a flex display thats also responsive使用具有响应性的柔性显示器制作 img 的 foreach
【发布时间】：2020-09-11 21:05:54
【问题描述】：

我需要使用一组图像制作照片布局。但我想做的是让 2 个小的 img 和 1 个大的并排在一起。有一次需要把大的放在下一个“行”上，我希望它放在右侧。（见草图）

问题是我不知道从哪里开始。到目前为止我得到了这个，但不知道如何在只有图像的 foreach 中格式化它。

<div class="w-full flex flex-wrap -mx-2">
    <div class="small-images w-1/3 px-2 ">
        <div class="bg-gray-200 ">r</div>
        <div class="bg-gray-200 mt-4">r</div>
    </div>
    <div class="large w-2/3 px-2 bg-gray-200">r</div>
</div>

<div class="w-full flex mt-4 flex-wrap -mx-2">
    <div class="large w-2/3 px-2 bg-gray-200">r</div>
    <div class="small-images w-1/3 px-2 ">
        <div class="bg-gray-200 ">r</div>
        <div class="bg-gray-200 mt-4">r</div>
    </div>
</div>

我正在使用 Tailwindcss 并尝试使用网格来实现，但遗憾的是我们还需要支持 IE 11，因此网格在缺乏支持的情况下无法实现。

我想知道 Flex 盒子是否可以做到这一点？

我正在使用带有刀片和 tailwindcss 的 Laravel 项目。任何建议或提示都会有所帮助，谢谢，如果有不清楚的地方请告诉我，以便我尝试更好地解释它:)

【问题讨论】：

使用 bootstrap 3 网格（浮点数）解决您的问题。
它如何与 foreach 一起工作？我不能让它像草图一样吗？或者我没有看到你在getbootstrap.com/docs/4.3/layout/grid/#customizing-the-grid
我也倾向于不使用引导程序，因为它会破坏一些顺风类，如容器。

标签： php laravel-blade tailwind-css

【解决方案1】：

对于将来会寻找这个的任何人 - 使用网格而不是弹性框来完成类似的任务。

使用 flex 代替网格

让我们从您不需要为左侧和右侧元素分别编写代码这一事实开始。 Flex 有flex-direction 选项，所以你可以在循环中颠倒顺序。在 Tailwind 中，它是 flex-row-reverse 类 (docs)。

在 Laravel Blade foreach（或任何其他 PHP foreach）中，您只需将结果按 3 个元素分块。只需将 eloquent 结果转换为数组并使用 php 的内置函数 array_chunk。

@foreach (array_chunk($collection->toArray(), 3) as $chunk)
    <div class="w-full flex flex-wrap -mx-2 mb-2 @if($loop->even) flex-row-reverse @endif">
        <div class="small-images w-1/3 px-2 ">
            <div class="bg-gray-200 ">{{ array_get($chunk, '0.title') }}</div>
            <div class="bg-gray-200 mt-4">{{ array_get($chunk, '1.title') }}</div>
        </div>
        <div class="large w-2/3 px-2 bg-gray-200">{{ array_get($chunk, '2.title') }}</div>
    </div>
@endforeach

在 Laravel 7 上，您必须使用 Arr::get 代替 array_get 或安装帮助程序。

您没有提供任何 PHP 代码，所以我不知道您如何在模型中存储图像。在我的示例中，我将使用文本，但对于图像，您只需按照需要的方式将 img 放在那里。

如果您需要在循环中使用模型方法（例如，如果您有 $model->getThumbnail('medium')），那么您不能像我一样将所有结果转换为数组。而是使用收集方法chunk(3) 和内部循环使用slice(0, 1) 获取正确的项目。

【讨论】：

【解决方案2】：

最后，我通过更改数组中的格式解决了我的问题。

我将其更改为具有 3 个图像的组。因此，如果我有 10 张图像，我将有 4 个组，其中 3 个组中有 3 个 img。最后一组有 1 个剩余图像。

然后我唯一要做的就是进行一次 foreach 并检查组的键。如果它是偶数，我显示左格式，而一个偶数我显示正确格式。

不知道它是否会帮助其他人，但不妨发布我的解决方案:) 可能有更好的解决方案，但这对我有用。

【讨论】：