如何在没有滚动的情况下将 flex 容器全部放在一个页面中

Question

我正在创建一个网页，该网页需要在一个页面中显示所有电影封面，而无需滚动它，因为它将被显示出来。问题是我想让内容调整大小而不是使网页可滚动。我还需要支持 n 部电影（它们是依赖的）。我试过两次使用 flexbox，但它不起作用。另外，我正在使用 tailwindcss 框架，但我认为这不是问题，因为它只是 css 形式的类...

<html class='h-full m-0 p-0'>
<head>
  <link href="https://unpkg.com/tailwindcss@next/dist/tailwind.min.css" rel="stylesheet">
</head>
<body class='h-full m-0 p-0'>
  <div class='mx-10 mt-10 flex content-center items-center'>
    <div class='flex flex-wrap'>
<!-- iterate over every movie -->
      <div class='m-2 relative flex-grow h-full' style='flex-basis: 20%'>
        <span class='px-2 py-1 rounded-full bg-blue-500 text-white absolute z-0' style='top: -0.5rem; right: -0.5rem'>0</span>
         <img src='https://images.unsplash.com/photo-1525604803468-3064e402d70c' class: 'w-full' />
         <span class='w-full opacity-75 bg-black text-white py-1 absolute z-0 inset-x-0 bottom-0 text-center px-2'>title</span>
      </div>
<!-- end -->
    </div>
  </div>
</body>
</html>

编辑：我添加了一个完整的示例（带有来自 unsplash 的示例图像）我希望它看起来像什么。

Answer 1

我认为没有 JavaScript 就无法完成您的要求。在下面的示例中，我使用 CSS 来保持封面的比例，并使用 JavaScript 来计算防止内容垂直滚动的最大宽度。

Here is a fiddle.

function getRandomColor() {
  var letters = '0123456789ABCDEF';
  var color = '#';
  for (var i = 0; i < 6; i++) {
    color += letters[Math.floor(Math.random() * 16)];
  }
  return color;
}

let numCovers = 10;
let coverList = document.querySelector(".cover-list");

// this function determines what percentage of the cover-list's width
// each cover should take up. It will maximize how large they can be
// without making the total grid size larger than cover-list.
// This should prevent scrolling.
function getBasis() {
  let ratio = 1.35; // height/width
  let width = coverList.clientWidth;
  let height = coverList.clientHeight;
  
  // this loop is really slow, you may want to find a faster way
  let col = 0;
  let accWidth, accHeight, numRows;
  do {
   col++;
    if (col > numCovers) {
     // maximize height
      return (height / ratio) + "px";
    }
   accWidth = width / col;
    accHeight = accWidth * ratio;
    numRows = Math.ceil(numCovers / col);
  } while (accHeight * numRows > height);
  
  return (100 / col) + "%";
}

function generateCovers() {
 // clear existing covers
  coverList.innerHTML = "";
  let basis = getBasis();
  for (let i = 0; i < numCovers; i++) {
    let cover = document.createElement("div");
    cover.classList.add("cover");
    cover.style.flexBasis = basis;
    let inner = document.createElement("div");
    inner.classList.add("inner");
    inner.style.backgroundColor = getRandomColor();
    cover.append(inner);
    coverList.append(cover);
  }
}

let numCoversInput = document.querySelector("#num-covers");
numCoversInput.addEventListener("change", function() {
 numCovers = Math.min(Math.max(this.value, 1), 500);
  this.value = numCovers;
  generateCovers();
});
generateCovers();

window.addEventListener("resize", function() {
  let basis = getBasis();
  coverList.querySelectorAll(".cover").forEach(function(el) {
   el.style.flexBasis = basis;
  });
});

body {
  /* set margin to computable value for cover-list calcs */
  margin: 5px;
}

#controls {
  height: 25px;
}

.cover-list {
  /* account for margin and controls with calc */
  width: calc(100vw - 10px);
  height: calc(100vh - 35px);
  
  /* use flex so the content will wrap as desired */
  display: flex;
  flex-wrap: wrap;
  align-content: start;
}

.inner {
  /* padding percentages are based on width, so setting
     the height to 0 and padding-bottom to a percentage
     allows us to maintain a ratio */
  width: 100%;
  height: 0;
  padding-bottom: 135%;
}

<div id="controls">
  <label>
    Number of covers: <input id="num-covers" type="number" value="10" min="1" max="500"/>
  </label>
</div>
<div class="cover-list">
</div>

如何在没有滚动的情况下将 flex 容器全部放在一个页面中

How to keep a flex container all in one page without scroll

html

css

flexbox

tailwind-css