那些遇到过的问题

css网格的正方形与flexbox

Mot*_*oto 58 css flexbox responsive-design

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

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

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

在这里小提琴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>
Run Code Online (Sandbox Code Playgroud) 

.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;
}
Run Code Online (Sandbox Code Playgroud)

G-C*_*Cyr 86

你不应该设置任何大小.你可以使用额外的元素或伪元素与垂直填充%.这将允许您使用宽度作为参考:一个片段显示:

.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%;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

一个inline-block的元素可以做太多,只是适应框的显示/行为和它的内容.这里的魔力来自填充:50%0; (100%垂直填充等于父级的宽度).请参阅关于垂直边距和填充的 w3c

  • 请注意,当flex容器的子节点自己被赋予`display:flex`时,这个*在Firefox(不在Chrome中)中断*.请参阅小提琴http://jsfiddle.net/d562oL7w/删除弹性项目上的`display:flex`声明以查看差异. (5认同)

CGo*_*odo 25

对于那些也想用display: flex正方形的div里面,你需要使用display: table的:before元素,否则方将与Chrome浏览器,但不会与Firefox或边缘工作(如火狐47和边缘13).

在应该适用于所有浏览器的片段下面,我还演示了如何用百分比列包装无限项(在这种情况下为20%)并用填充和内部div分隔它们,因为百分比的边距在FF中无法正常工作边缘.

.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • `你需要使用display:table for:before element`真的很短且很好的解决方案,谢谢. (2认同)
  • 这应该是公认的答案.display:table for:before元素是唯一可行的解​​决方案! (2认同)

Jam*_*gne 19

保持纵横比的常用技巧是使用以下事实:边距和/或填充顶部和底部的百分比值是根据包含元素的宽度计算的,而不是根据高度计算的.

你可以看到这个问题的非柔性版HERE

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

.flex-item:before {
    content: "";
    display: block;
    padding-top: 100%;
    float: left;
}
Run Code Online (Sandbox Code Playgroud)

这里的技巧是使用:before伪元素插入一个padding-top100%的0宽度元素.100%是宽度的100%,这意味着没有内容的元素将与其容器一样高.这会将flex-item拉伸到与其宽度相同的高度:

此外,您需要从弹性容器中移除已定义的高度,否则高度无法增长.您也可能想要添加,min-width: 1.5em以便您的元素不会缩小到每个方格中的字符高度以下.

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

.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;
}
Run Code Online (Sandbox Code Playgroud) 
<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>
Run Code Online (Sandbox Code Playgroud)

  • 非常感谢！我喜欢非弹性版本:) (2认同)

归档时间：

查看次数：

53017 次

最近记录：

7 年，7 月 前
响应方块网格 163
更多相关链接
相关归档
更改:使用JavaScript悬停CSS属性 75
像图像一样缩放iFrame css宽度100% 52
CSS Page-Break在所有浏览器中都不起作用 49
密码验证至少为6个字符 24
如何使CSS伪元素区域可点击？ 21
CSS伪元素的jQuery .click()事件(:之前/:之后)？ 20
Flexbox - 如何在垂直方向做空间？ 6
使用平衡的 CSS flex-wrap 容器导航 5
如何在没有实际拥有iphone的情况下测试响应式设计字体 1
为什么在 CSS 文件的正文部分中，align-items 不起作用？ 0
难疑归档
如何将Git存储库还原为以前的提交 7278
如何以MS Word保留格式和语法高亮显示代码片段？ 1877
用JavaScript比较两个日期 1791
npm install的--save选项是什么？ 1779
将文件从Docker容器复制到主机 1438
何时使用虚拟析构函数？ 1420
检索HTML元素的位置(X,Y) 1418
如何检查对象是否在JavaScript中具有属性？ 1396
修复一个Git分离的头？ 1318
如何删除旧的Docker容器 1162