如何創建靈活的自適應表格式佈局？

-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

如何創建靈活的自適應表格式佈局？

回答

相關問題