Question

在此jsfiddle http://jsfiddle.net/54rp7x29/中，我设置了一个flexbox来包含一些固定宽度的项目。但是外部container元素比内部元素更宽。如何设置不超过所需的大小？并始终不大于调整屏幕大小时所需的大小（这将导致更多或更少的flexbox项目在同一行中）？

这是html：

<div id="container">
  <div id="content"></div>
  <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
  </div>
</div>

这是CSS：

html {
  max-width: 60%;
}

#content {
  background-color: green;
  height: 20px;
}

#container {
  background-color: yellow;
}

#container>div {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

#container>div>div {
  width: 80px;
  height: 100px;
  background-color: gray;
  margin: 3px;
}

Answer 1

希望这是您要找的东西吗？在这里，我已经从CSS中删除了html标签。否则请让我知道

<!DOCTYPE html> 
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    #content {
        background-color: green;
        height: 20px; 
    }
    #container {
        display: inline-block;
        background-color: yellow;
    }
    #container>div {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
    #container>div>div {
        width: 80px;
        height: 100px;
        background-color: gray;
        margin: 3px;
    }
    </style>
</head>
<body>
    <div id="container">
    <div id="content"></div>
    <div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    </div> 
    </div>
</body>

Answer 2

如果要删除黄色的外部空间，请在容器上添加 display：table; 。

使CSS flexbox成为其内部元素的宽度

2 个答案: