如何创建灵活的自适应表格式布局？

-1

不知道这个问题是简单的还是没有，但我被困住了：是否可以创建一个灵活的自适应表格式布局，根据窗口宽度更改列数量？如何创建灵活的自适应表格式布局？

插图：（绿色边界意味着初始大小的块的块内容（尺寸）的，黑色边界意味着计算/渲染大小的块的）

目标是创建一个布局，其中：

块像表中一样排列 - 它们之间具有相同的空间，
行的高度是该行中具有最大高度的块的高度，
列的数量根据窗口宽度而变化中，例如将有1列，如果宽度小于300像素，2个柱 - 500像素，3列 - 750px和4列 - > 1000像素

事实上，我已经与JS达到了这个和其不是很硬为了让我的电脑执行我编写的脚本，所以我认为脚本已经过优化，但无论如何，我希望可以用纯CSS完成。

我可以显示我的解决方案（CSS + JS），但我认为它没有任何价值。

来源

2016-08-13 lucifer63

这是媒体查询基本Flexbox的。 –

你可以给我看一个这个基本的flexbox的例子吗？我没有使用Flexbox的经验，因为它的支持，所以我会很感激，如果你这样做。 – lucifer63

Flexbox的和媒体查询可以这样做：

* { 
 
    box-sizing: border-box; 
 
} 
 
.wrapper { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    justify-content: space-around; 
 
    width: 80%; 
 
    margin: auto; 
 
    border: 1px solid red; 
 
    padding: 1em; 
 
} 
 
.box { 
 
    border: 1px solid grey; 
 
    margin-bottom: 1em; 
 
    flex: 1 0 100%; 
 
    background: #c0ffee; 
 
    padding: 0 1em; 
 
} 
 
@media screen and (min-width: 500px) { 
 
    .box { 
 
    flex: 0 0 48%; 
 
    background: #bada55; 
 
    } 
 
} 
 
@media screen and (min-width: 750px) { 
 
    .box { 
 
    flex: 0 0 30%; 
 
    background: rebeccapurple; 
 
    } 
 
} 
 
@media screen and (min-width: 1000px) { 
 
    .box { 
 
    flex: 0 0 24%; 
 
    background: #b19d09; 
 
    } 
 
}

<div class="wrapper"> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit.</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eum, totam.</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque, cum. Voluptate natus quaerat eaque incidunt, accusamus veniam facere, alias provident odio est rerum commodi?</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Optio, dolore.</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit.</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>lorem</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus nobis odit possimus porro. Nihil, modi.</p> 
 
    </div> 
 
    <div class="box"> 
 
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Praesentium vel, accusamus cupiditate esse quisquam, nisi hic dolores assumenda adipisci, illum ab itaque nemo placeat! Dolorum aliquam iure veritatis reprehenderit libero.</p> 
 
    </div> 
 
</div>

Codepen Demo

A Complete Guide to Flexbox @ CSS-Tricks.com

来源

2016-08-13 18:10:00

谢谢！有没有其他的方式来使用CSS，没有flex？ – lucifer63

弹性盒子是要走的路！有关详细信息，请参阅https://css-tricks.com/snippets/css/a-guide-to-flexbox/和http://flexbox.help/。 – Chad

如何创建灵活的自适应表格式布局？

回答

相关问题