柔性容器寬度適合內容寬度與柔性包裝：包裝？

下面是一個例子：柔性容器寬度適合內容寬度與柔性包裝：包裝？

.wrap { 
 
    display: flex; 
 
} 
 

 
.wrap2 { 
 
    padding: 4px; 
 
    margin: 20px; 
 
    outline: 1px dashed; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    max-width: 310px; 
 
} 
 

 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    outline: 1px solid; 
 
}

<div class="wrap"> 
 
    <div class="wrap2"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div>

，這裏是我所需要的：

我試着換柔性容器與另一彎曲，但它沒有工作。有沒有CSS唯一的解決方案，或者我應該使用js來達到所需的結果？

來源

2017-06-29 DTXqueque

.box的{柔性基礎：計算值（100％/ 7）;}此屬性添加到盒類 – Noni

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
    <title>JS Bin</title> 
 
    <style> 
 

 
.wrap { 
 
    display: flex; 
 
} 
 

 
.wrap2 { 
 
    padding: 4px; 
 
    margin: 20px; 
 
    outline: 1px dashed; 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
    max-width: 280px; 
 
} 
 

 
.box { 
 
    width: 40px; 
 
    height: 40px; 
 
    outline: 1px solid; 
 
} 
 

 
    </style> 
 
</head> 
 
<body> 
 
<div class="wrap"> 
 
    <div class="wrap2"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    </div> 
 
</div> 
 
</body> 
 
</html>

來源

2017-06-29 12:42:14

柔性容器寬度適合內容寬度與柔性包裝：包裝？

回答

相關問題