Question

假设您要显示元素（如小卡片），并希望它们显示如下：

首次展示：

第二次展示：

简而言之：始终填充容器的整个宽度，包裹，保持最小固定尺寸，当然也可以用尽可能多的卡填充行。

因此，我们已经可以说：

固定宽度不是一个选项，因为它不会填充容器的整个宽度
宽度百分比无效，因为您无法在不进行额外媒体查询的情况下向同一行添加更多切片（可能非常无聊，如果您希望有一天更改内容，则根本不可扩展卡的最小宽度）

我的第一个是关于 flexbox ，它最终是这样的：

您可以看到jsfiddle here来查看代码。

我们可以注意到第一行是完美的！但是，如果没有多少行，如果最后一行没有与其他行相同的元素数，则它将无法很好地显示。（即坚持左侧）。

是normal considering how flex-grow works。但那么如何创造效果？

我的解决方案是创建一个自定义指令（我使用Angular），它运行得很好（我的第一个图像就像这样显示了它。

这是指令代码：

(function () {

'use strict';

angular.module('app')

    .directive('flexGrowConsistent', function ($window, $document) {

            var directive = {};
            directive.restrict = 'A';

            directive.link = function (scope, elements, attrs) {

                $document.ready(onResize);

                function onResize() {

                    //container width
                    var cw = elements[0].parentElement.offsetWidth;
                    // first element width
                    var w = elements[0].parentElement.firstElementChild.offsetWidth;

                    if (isWrapped(w, cw, scope.$index)) {
                        elements.css({
                            maxWidth: w + 'px'
                        });
                    }

                }

                /*
                 Tell if an element is wrapped given element width, container width and index
                 Take care of the incertainty from javascript with the -0.5
                 */
                function isWrapped(w, cw, index) {
                    return ((w - 0.5) * (index + 1) > cw) && index > 0;
                }

                function cleanUp() {
                    angular.element($window).off('resize', onResize);
                }

                angular.element($window).on('resize', onResize);

                scope.$on('$destroy', cleanUp);

            };

            return directive;
        }
    );
})();

我的问题是：有没有办法用纯CSS做到这一点？。我真的不喜欢将Javascript用于纯粹的显示目的。

如果你有改进指令的建议，也欢迎他们。

在

0 个答案: