使用同样具有响应能力的 flex 显示器制作 img 的 foreach

Question

我需要用一组图像制作照片布局。但我想做的是将 2 个小图像和 1 个大图像并排放置。有一次大的需要放在左边，下一次 "Row" 我想把它放在右边。（见草图）

问题是我不知道从哪里开始。到目前为止我得到了这个但不知道如何在只有图像的 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 盒子？

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

Answer 1

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

使用 flex 而不是 grid

让我们从不需要为左侧和右侧元素制作单独代码这一事实开始。 Flex 有 flex-direction option, so you can just reverse order in loop. In Tailwind it is flex-row-reverse class (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) and inside loop get correct item by using slice(0, 1).

Answer 2

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

我将其更改为包含 3 张图片的组。所以如果我有 10 张图像，我将有 4 个组，其中 3 个组有 3 个 img。最后一组还有 1 张剩余图像。

然后我唯一要做的就是 foreach 并检查组的键。如果它是偶数，我会显示左格式，如果是偶数，我会显示右格式。

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

使用同样具有响应能力的 flex 显示器制作 img 的 foreach

Making a foreach of img's with a flex display thats also responsive

php

laravel-blade

tailwind-css