css网格的正方形与flexbox

时间：2015-03-27 18:42:20

标签： css responsive-design flexbox

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

我得到了如何调整每个方块的宽度，但我不知道如何使元素成为方形，以及在视口宽度变化时如何缩放它们的高度。

在下方小提琴的示例中，七个方格应始终水平放置，并且它们应按比例缩放。我不在乎可见的行数。

在此处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>
<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>


.flex-container {
  padding: 0;
  margin: 0;
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-flow: row;
  justify-content: space-around;
  height: 50px;
  line-height:30px;
}

.flex-item {
  background: tomato;
  margin: 5px;
  color: white;
  font-weight: bold;
  font-size: 1.5em;
  text-align: center;
  flex: 1 0 0px;
  height: auto;
}

6 个答案:

答案 0 :(得分：75)

你不应该设置任何尺寸。 你可以使用额外的元素或伪元素与垂直填充％。这将允许您使用宽度作为参考：显示的片段：

.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;
   
    line-height:30px;
}
.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 auto;
    height:auto;
}
.flex-item:before {
    content:'';
    float:left;
    padding-top:100%;
}
<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>
    <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>
</body>

inline-block元素也可以这样做，只需调整框的显示/行为及其内容即可。这里的魔力来自填充：50％0; （100％垂直填充等于父级的宽度）。请参阅关于垂直margin和padding

的w3c

答案 1 :(得分：24)

对于那些也希望在方格div中使用display: flex的用户，您需要使用display: table作为:before元素，否则该方块将适用于Chrome但不起作用使用Firefox或Edge（从Firefox 47和Edge 13开始）。

在下面应该适用于所有浏览器的片段中，我还演示了如何用百分比列包装无限项（在这种情况下为20％）并用填充和内部div分隔它们，因为百分比的边距不能正常工作在FF，当然还有Edge。

.flex-container {
  display: flex;
  justify-content: start;
  flex-wrap: wrap; 
}

.flex-cell {
  flex: 0 0 20%;
  display: flex;
  justify-content: center;
  align-items: stretch;
  padding: 0.5rem;
  box-sizing: border-box;
}

.flex-cell:before {
  content: '';
  display: table;
  padding-top: 100%;
}

.flex-item {
  flex-grow: 1;
  border: 1px solid black;
  background: tomato;
  color: white;
  
  display: flex;
  justify-content: center;
  align-items: center;
}
<body>
    <div class="flex-container">
        <div class="flex-cell">
            <div class="flex-item">1</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">2</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">3</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">4</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">5</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">6</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">7</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">8</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">9</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">10</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">11</div>
        </div>
        <div class="flex-cell">
            <div class="flex-item">12</div>
        </div>
    </div>
</body>

答案 2 :(得分：17)

保持宽高比的通常技巧是使用边际百分比值和/或填充顶部和顶部的事实。 bottom是根据包含元素的宽度计算的，而不是根据高度计算的。

您可以看到此问题的非Flex版本 HERE

但是，您希望flex处理元素的宽度，而不是设置基于百分比的宽度。为此，我想出了一种适用于flex的方法的变体：

.flex-item:before {
    content: "";
    display: block;
    padding-top: 100%;
    float: left;
}

这里的技巧是使用:before伪元素插入宽度为0 {100}的padding-top元素。 100％是宽度的100％，这意味着没有内容的元素将与其容器一样高。这会将flex项目拉伸到与其宽度相同的高度：

此外，您需要从弹性容器中移除已定义的高度，否则高度不会增长。您还可以添加min-width: 1.5em，这样您的元素就不会缩小到每个方格中角色的高度以下。

http://jsfiddle.net/gonyhvz8/14/

＆＃13;
＆＃13; 
.flex-container {
    padding: 0;
    margin: 0;
    list-style: none;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row;
    justify-content: space-around;
    line-height:30px;
}

.flex-item {
    background: tomato;
    margin: 5px;
    color: white;
    font-weight: bold;
    font-size: 1.5em;
    text-align: center;
    flex: 1 0 0px;
    min-width: 1.5em;
}
.flex-item:before {
    content: "";
	display: block;
	padding-top: 100%;
    float: left;
}
＆＃13; 
<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>
        <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>
</body>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：2)

当然使用flexbox很好，但所提到的解决方案即使使用42也缺乏灵活性。您无法调整浮动框。您可以在之前设置每行的方框数。

在此解决方案中，您可以调整瓷砖/方形的动态宽度，并按照您喜欢的方式浮动它们。如果您使用flexboxes尝试此操作，则会遇到flexboxes的问题，因为它不会定位到包含块的给定宽度。

  

没有padding-top但更灵活的解决方案：

＆＃13;
＆＃13; 
flexboxes
＆＃13; 
.flex-container {
  padding: 0;
  margin: -5px;
  font-size: 0;
  font-family: Helvetica, Arial, sans-serif;
}

.flex-item {
  position: relative;
  display: inline-block;
  height: 0;
  width: 100%;
  padding-top: 100%;
  height: auto;
  font-size: 20px;
  color: white;
  font-weight: bold;
  text-align: center;
}
@media (min-width: 480px) {
  .flex-item {
    width: 33.3333%;
    padding-top: 33.3333%;
  }
}
@media (min-width: 768px) {
  .flex-item {
    width: 25%;
    padding-top: 25%;
  }
}
.flex-item-inner {
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: 10px;
  background: tomato;
}
＆＃13;
＆＃13;
＆＃13;

链接到codepen：http://codepen.io/dailysh-it/pen/xOVydO

答案 4 :(得分：1)

有一种方法也可以不用额外的html元素。我用您的代码库http://jsfiddle.net/octavioamu/kq97pm3L/创建了一个小提琴，但要点是在带显示表的元素之后使用

flex-item:after {
    content: ' ';
    padding-top: 100%;
    display: table;
}

您可以在任何网格中使用它，例如带有自举的列网格中的正方形... 这是在％Grid列https://codepen.io/octavioamu/pen/xzeXGm

中工作的一个Sass Mixin。

以下是您的代码： 

.flex-container {
  display: flex;
}

.flex-item {
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  background-color: red;
  margin: 5px
}

.flex-item:after {
  content: ' ';
  padding-top: 100%;
  display: table;
}
<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>
  <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>
</body>

答案 5 :(得分：0)

G-Cyr答案的简化版本

.flex-container {
  display: flex;
  flex-flow: row;
  justify-content: center;
}

.flex-item {
  background: tomato;
  margin: 10px;
  max-width: 50px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 0;
  height: auto;
}

.flex-item:before {
  /* The psuedo-element's padding-top percentage is based on the element's width. */
  padding-top: 100%;
  content: '';
  float: left;
}
<div class="flex-container">
  <div class="flex-item">1</div>
  <div class="flex-item">2</div>
  <div class="flex-item">3</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>
<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>
<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>

结果

enter image description here

相关问题
最新问题