我正在尝试创建一个响应格子的方块.应调整广告尺寸以适应视口的宽度.更改视口高度时,方块不应调整大小.
我得到了如何调整每个Square的宽度,但是我不知道如何使元素平方,以及如何在视口宽度改变时缩放它们的高度.
在下面的小提琴的例子中,七个方格应该总是水平放置,并且它们应该以正方形缩放.我不在乎有多少行是可见的.
小提琴http://jsfiddle.net/gonyhvz8/11/
@H_404_8@<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> @H_404_8@.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; }解决方法
你不应该设置任何大小.
您可以使用额外的元素或伪元素与垂直填充在％.这将允许您使用width作为参考：一个代码段来显示： @H_404_8@.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%; } @H_404_8@<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>
您可以使用额外的元素或伪元素与垂直填充在％.这将允许您使用width作为参考：一个代码段来显示： @H_404_8@.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%; } @H_404_8@<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>
一个@L_301_1@元素也可以做,只是适应框的显示/行为,它的内容.这里的魔法来自于填充：50％0; (100％垂直填充等于父母的宽度).参见w3c关于垂直margin和padding
