用CSS Frasbox创建一个干净的CSS比较表

比较表是由多个相互堆叠的ULs组成的。我将使用CSS Flex框使它们都相等的宽度，并以相同的速率扩展和收缩，因此它们的行为与表中的行类似。

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven Twenty-eight Twenty-nine Thirty Thirty-one Thirty-two Thirty-three Thirty-four Thirty-five Thirty-six Thirty-seven Thirty-eight Thirty-nine Forty Forty-one Forty-two Forty-three Forty-four Forty-five Forty-six Forty-seven Forty-eight Forty-nine Fifty Fifty-one

Office Chairs          Eurotech          Hbada          Zenith          Amazonbasics                         Weight          25kg          13kg          17kg          28kg                         Cost          $$          $          $$          $                         Delivery          Domestic          International          International          Domestic                         Verdict          Best ChairforBack Pain          Best budget chair          All MeshforCooling          Only ChairwithTop Grain Leather                                  Buy Now          Buy Now          Buy Now          Buy Now

每个UL中的第一个Li元素是特征/图例。为了轻松地将它们与其他的包装不同，我把那些Li元素作为一个“传奇”的CSS类。

CSS：

现在是有趣的部分-将标记转换为比较表。使用CSS FrasBox，转换UL元素相对容易，因此它们在布局、弯曲和拉伸方面是水平的，因此它们的行为更像表单元。

我已经删除了一些不必要的线，所以你可以把重点放在下面的重要位置：

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven Twenty-eight Twenty-nine Thirty Thirty-one Thirty-two Thirty-three Thirty-four Thirty-five Thirty-six Thirty-seven Thirty-eight Thirty-nine Forty Forty-one Forty-two Forty-three Forty-four Forty-five Forty-six Forty-seven Forty-eight

div.comparisontable{     显示：flex；     FLEX-Direction：Column；/* turn children ul elements into stacked rows */ } div.comparisontable ul.row{     列表样式：无；     显示：flex；/* turn children li elements into flex children */     Flex：1；     flex-wrap: wrap; } div.comparisontable ul.row li{     背景：#c9f4ca;     Flex：1；     PADDING:10PX；     Border-bottom：1px solid gray； } /* the legend column (first li within each row) */ div.comparisontable ul.row li.legend{     背景：#6640d8;     color: white;     边界：无；     宽度：200px；     border-bottom: 1px solid white; } /* very first row */ div.comparisontable ul.row:first-of-type li{     Text-align：Center； } /* very last row */ div.comparisontable ul.row:last-of-type li{     Text-align：Center；     边界底部：无；     P.O.Box-Shadow:0 6PX 6PX RGBA（0.0,0.23）； } /* first and last cell within legend column */ div.comparisontable ul.row:first-of-type li.legend.legend, div.comparisontable ul.row:last-of-type li.legend{     背景：透明；     盒影：无； }

“特征列表”或“传奇”列是每行的第一个Li元素。它具有明确的宽度为200 px，不像其他的Li元素是Flex宽度（Flex：1）。

比较表的制作

现在，比较表没有响应。也就是说，即使屏幕尺寸变得非常小，每行中的“列”仍然并排。

在CSS Flex框中，通过将Flex方向属性从“行”设置为“列”，可以轻松地将Flex子元素的显示顺序从默认的“并排”行为改为“在下一个上叠加”。

现在在我的比较表中，UL元素本身是堆叠的，尽管孩子的Li元素像表中的单元格一样并排出现。当屏幕足够小的时候，我会把它们改成堆叠。

One Two Three Four Five Six Seven Eight Nine Ten Eleven Twelve Thirteen Fourteen Fifteen Sixteen Seventeen Eighteen Nineteen Twenty Twenty-one Twenty-two Twenty-three Twenty-four Twenty-five Twenty-six Twenty-seven

@media screen and (max-width:650px){ div.comparisontable ul.row{     FLEX-Direction：Column； } div.comparisontable img{     width: auto;     高度：自动； } div.comparisontable ul.row li{     margin-right: 0;     width: auto;     flex: auto; } /* first and last cell within legend column */ div.comparisontable ul.row:first-of-type li.legend.legend, div.comparisontable ul.row:last-of-type li.legend{     显示：无； } div.comparisontable ul.row li.legend{     width: auto; } }

现在，当我调整窗口大小时，比较表崩溃，每个“单元格”出现在自己的行上：