Question

我目前正在使用Flexbox / CSS构建搜索结果页面。

我的要求是：

结果应以网格显示
响应，基于屏幕尺寸的列数从1-3变化
结果应保持1：1的宽高比
结果应该是屏幕宽度均匀
结果应该换
某些特色结果偶尔会占据相对于网格大小的2 x 2的大小 - 每20-30个结果只会发生一次，因此没有特色结果会重叠

我无法弄清楚上一个要求，如果有任何可能的方法可以使用纯CSS 而不涉及JavaScript 。

请注意，StackOverflow上有很多关于如何使用 colspan或rowspan执行此操作的答案，但不是两者都有。这些答案通常涉及设置我的网格从上到下加载行，而不是从左到右，这也是我不想要的。

电流：

我想要的（见黄色）：

我能够通过以下代码获得除了我最后一次使用CSS之外的所有要求：

HTML（简化）：

<div class="products">
    <div class="product">
        <div class="content">
            <img/>
        </div>
    </div>

    <div class="product">
        <div class="content">
            <img/>
        </div>
    </div>

    <div class="product">
        <div class="content">
            <img/>
        </div>
    </div>

    [...and so on...]

</div>

SCSS：

// From bootstrap 4:
$grid-breakpoints: (
    xs: 0,
    sm: 576px,
    md: 768px,
    lg: 992px,
    xl: 1200px
) !default;

@mixin media-breakpoint-up($name) {
  @if $name == xs {
    @content;
  } @else {
    @media screen and (min-width: map-get($grid-breakpoints, $name)) {
      @content;
    }
  }
}

// Variables:
$gap: 1rem;
$background-color: white;

// Results:
.products {
    // Parent flex layout
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin: -#{$gap} 0 #{$gap} -#{$gap};

    .product {
        // Child flex layout
        flex: 1 1 auto;
        position: relative;
        &:before {
            content: '';
            display: block;
            padding-top: 100%;
        }
        margin: #{$gap} 0 0 #{$gap};

        // Background
        background-color: $background-color;
        background-repeat: no-repeat;
        background-position: center;

        // Number of columns based on screen size
        @include media-breakpoint-up(sm) {
            width: calc(100% - #{$gap});
            max-width: calc(100% - #{$gap});
        }
        @include media-breakpoint-up(md) {
            width: calc(50% - #{$gap});
            max-width: calc(50% - #{$gap});
        }
        @include media-breakpoint-up(lg) {
            width: calc(33.33% - #{$gap});
            max-width: calc(33.33% - #{$gap});
        }
        @include media-breakpoint-up(xl) {
            width: calc(25% - #{$gap});
            max-width: calc(25% - #{$gap});
        }

        .content {
            // Maintain aspect ratio
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;

            > img {
                // Restrict to size of parent container
                max-width:100%;
                max-height:100%;
                // Center horizontally and vertically
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }
        }
    }
}

具有colspan和rowspan /不同大小的Flexbox CSS

0 个答案: