Html Flexbox定义列的宽度并向左对齐

我使用flexbox来创建等宽列。我正在将flex设置为flex:1200px；在每一项上。当每行中的项目数量不相等时，将项目数量较少的行中的项目展开，以填充下图中测试7和测试8的空间

在上图中，我希望test7项只填充test1行的空间，而test8列只填充test2列的空间

* { -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } html， 身体{ 身高：100%； 宽度：100%； } 身体{ 字体系列：无衬线； 线高：1.4； } .eqWrap{ 显示器：flex； 柔性包装：包装； } .eq{ 填充：10px； } .eq:typeodd的第n个{ 背景：黄色； } .eq:type偶数的n次方{ 背景：浅蓝色； } .equalHW{ flex:1200px； } 测试1 测试2 测试3 测试4 测试5 测试6 测试7 测试8

---

解决这个问题的最简单的方法就是给你的.eq元素一个最大宽度200px。这可以应用于所有.eq元素，如下所示，也可以通过添加额外的类专门应用于元素7和8

* { -webkit框大小：边框框； -moz框大小：边框框； 框大小：边框框； } html， 身体{ 身高：100%； 宽度：100%； } 身体{ 字体系列：无衬线； 线高：1.4； } .eqWrap{ 显示器：flex； 柔性包装：包装； } .eq{ 填充：10px； 最大宽度：200px； } .eq:typeodd的第n个{ 背景：黄色； } .eq:type偶数的n次方{ 背景：浅蓝色； } .equalHW{ flex:1200px； } 测试1 测试2 测试3 测试4 测试5 测试6 测试7 测试8 供您参考。

---

如果要固定设置的宽度，请将0设置为flex grow和flex shrink，如flex:0 200px

很好用