与flexbox正方形的css网格 [英] css grid of squares with flexbox

查看：110 发布时间：2017/12/17 20:23:56 css responsive-design flexbox

本文介绍了与flexbox正方形的css网格的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我试图创建一个正方形网格。正方形应调整大小以适合视口的宽度。当改变视口的高度时，方块不应该调整大小。

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

在这个例子中，七个方格下面的小提琴应该总是水平放置，而且他们应该按照方格来放大。我不在乎有多少行可见。

 < 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; 
保证金：0; 
 list-style：none; 
 display：-webkit-box; 
显示：-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; 
保证金：5px; 
颜色：白色; 
 font-weight：bold; 
 font-size：1.5em; 
 text-align：center; 
 flex：1 0 0px; 
 height：auto;

解决方案

。
你可以使用一个额外的元素或伪元素与垂直填充％。这将允许您使用宽度作为参考：一个片段显示：

 .flex-container {padding：0;保证金：0; list-style：none;显示：-webkit-box;显示：-moz-box;显示：-ms-flexbox;显示：-webkit-flex;显示：flex; -webkit-flex-flow：row; justify-content：space-around; line-height：30px;}。flex-item {background：tomato; margin：5px;白颜色; font-weight：bold; font-size：1.5em; text-align：center; flex：1 0 auto; height：auto;}。flex-item：before {content：'';向左飘浮; padding-top：100％;}  < body>

$ b

内联块元素也可以，只是调整框的显示/行为和内容。这里的魔术来自填充：50％0; （100％垂直填充等于父项的宽度）。有关垂直保证金和 padding

 
I am trying to create a responsive grid of squares. The squares should resize to fit the viewport's width. The squares should not resize when changing the viewport's height.

I got how to adjust the width of each square, but I don't know how to make the elements square and how to scale their height when the viewport width changes. 

In the example at the fiddle below the seven squares should always fit horizontally, and they should scale as squares. I do not care how many rows are visible.

Fiddle here 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;
}

 解决方案 
you should not set any size.
you may use an extra element or a pseudo elemnt with vertical padding in %. this will allow you to use width as reference : a snippet to show: 



.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>





an inline-block element could do too, just adapt the display/behavior of the box and it's content. the magic here comes from padding:50% 0; (100% vertical padding equals width of parent). see w3c about vertical margin and padding

                        这篇关于与flexbox正方形的css网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！


                    
                        查看全文

与flexbox正方形的css网格 [英] css grid of squares with flexbox

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录关闭

与flexbox正方形的css网格 [英] css grid of squares with flexbox

问题描述

相关文章

前端开发最新文章

热门教程

热门工具

登录 关闭

登录关闭