猿问

带有Flexbox的CSS正方形网格

我正在尝试创建一个自适应的正方形网格。正方形应调整大小以适合视口的宽度。更改视口高度时，正方形不应调整大小。


我了解了如何调整每个正方形的宽度，但是我不知道如何在视口宽度改变时使元素变为正方形以及如何缩放其高度。


在小提琴下面的示例中，七个正方形应始终水平放置，并且应按正方形缩放。我不在乎有多少行可见。


在这里提琴http://jsfiddle.net/gonyhvz8/11/

<body>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

<div class="flex-container">

    <div class="flex-item">1</div>

    <div class="flex-item">2</div>

    <div class="flex-item">3</div>

    <div class="flex-item">4</div>

    <div class="flex-item">5</div>

    <div class="flex-item">6</div>

    <div class="flex-item">7</div>

</div>

临摹微笑
浏览 1009回答 3
3回答

倚天杖

您不应设置任何大小。您可以使用额外的元素或带有％的垂直填充的伪元素。这将允许您使用width作为参考：显示以下内容的代码段：.flex-container {&nbsp; &nbsp; padding: 0;&nbsp; &nbsp; margin: 0;&nbsp; &nbsp; list-style: none;&nbsp; &nbsp; display: -webkit-box;&nbsp; &nbsp; display: -moz-box;&nbsp; &nbsp; display: -ms-flexbox;&nbsp; &nbsp; display: -webkit-flex;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; -webkit-flex-flow: row;&nbsp; &nbsp; justify-content: space-around;&nbsp; &nbsp;&nbsp; &nbsp; line-height:30px;}.flex-item {&nbsp; &nbsp; background: tomato;&nbsp; &nbsp; margin: 5px;&nbsp; &nbsp; color: white;&nbsp; &nbsp; font-weight: bold;&nbsp; &nbsp; font-size: 1.5em;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; flex: 1 0 auto;&nbsp; &nbsp; height:auto;}.flex-item:before {&nbsp; &nbsp; content:'';&nbsp; &nbsp; float:left;&nbsp; &nbsp; padding-top:100%;}<body>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; </div></body>一个inline-block的元素可以做太多，只是适应框的显示/行为和它的内容。这里的魔力来自于填充：50％0; （100％的垂直填充等于父级的宽度）。有关垂直边距和填充，请参见w3c
0

慕哥9229398

对于那些也想用display: flex正方形的div里面，你需要使用display: table的:before元素，否则方将与Chrome浏览器，但不会与Firefox或边缘工作（如火狐47和边缘13）。在下面的代码段中，该代码段适用于所有浏览器，我还演示了如何用百分比列（在本例中为20％）包装无限制的项目，并用填充和内部div分隔它们，因为带有百分比的边距在FF和当然是Edge。.flex-container {&nbsp; display: flex;&nbsp; justify-content: start;&nbsp; flex-wrap: wrap;&nbsp;}.flex-cell {&nbsp; flex: 0 0 20%;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: stretch;&nbsp; padding: 0.5rem;&nbsp; box-sizing: border-box;}.flex-cell:before {&nbsp; content: '';&nbsp; display: table;&nbsp; padding-top: 100%;}.flex-item {&nbsp; flex-grow: 1;&nbsp; border: 1px solid black;&nbsp; background: tomato;&nbsp; color: white;&nbsp;&nbsp;&nbsp; display: flex;&nbsp; justify-content: center;&nbsp; align-items: center;}<body>&nbsp; &nbsp; <div class="flex-container">&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">1</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">2</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">3</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">4</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">5</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">6</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">7</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">8</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">9</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">10</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">11</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-cell">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="flex-item">12</div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div></body>
0
随时随地看视频慕课网APP

相关问题

为什么字体颜色在Eclipse上没有变化 2 回答

相关分类

Html/CSS
为什么字体颜色在Eclipse上没有变化 2 回答
我要回答