CSS15. display - flex - 可伸缩项属性
描述
Flexbox支持对弹性项的灵活控制。Flex的意思为可伸缩，这体现在以下三个属性中：HTML/CSS/JavaScript 解法, 执行用时: 1697ms, 内存消耗: 77804KB, 提交时间: 2022-02-07
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n nav {\n width: 500px;\n }\n nav ul {\n display: flex;\n list-style: none;\n }\n nav ul li {\n flex: 1 0 0%;\n }\n nav ul li:first-child{\n flex-grow:2\n }\n </style>\n </head>\n <body>\n \t <nav>\n <ul>\n <li>home</li>\n <li>spaceships</li>\n <li>planets</li>\n <li>stars</li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1738ms, 内存消耗: 77804KB, 提交时间: 2021-12-31
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n nav {\n width: 500px;\n }\n nav ul {\n display: flex;\n list-style: none;\n }\n li {\n flex:1 0 0%;\n }\n li:first-child {\n flex-grow:2;\n }\n </style>\n </head>\n <body>\n \t <nav>\n <ul>\n <li>home</li>\n <li>spaceships</li>\n <li>planets</li>\n <li>stars</li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1746ms, 内存消耗: 77792KB, 提交时间: 2021-12-26
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n nav {\n width: 500px;\n }\n nav ul {\n display: flex;\n list-style: none;\n }\n ul li{\n flex:1 0 0%;\n }\n ul li:nth-child(1){\n flex-grow:2;\n }\n </style>\n </head>\n <body>\n \t <nav>\n <ul>\n <li>home</li>\n <li>spaceships</li>\n <li>planets</li>\n <li>stars</li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77772KB, 提交时间: 2022-01-22
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n nav {\n width: 500px;\n }\n nav ul {\n display: flex;\n list-style: none;\n }\n nav ul li{\n flex:100%;\n flex-shrink:0;\n flex-basis:0%;\n }\n nav ul li:nth-child(1){\n flex-grow:2;\n }\n </style>\n </head>\n <body>\n \t <nav>\n <ul>\n <li>home</li>\n <li>spaceships</li>\n <li>planets</li>\n <li>stars</li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1749ms, 内存消耗: 77772KB, 提交时间: 2022-01-24
{"css":"","js":"","html":"<!DOCTYPE html>\n<html>\n <head>\n <meta charset=utf-8>\n <style type=\"text/css\">\n * {\n margin: 0;\n padding: 0;\n }\n nav {\n width: 500px;\n }\n nav ul {\n display: flex;\n list-style: none;\n }\n nav ul li{\n flex:1 0 0%;\n }\n .a{\n flex-grow:2; \n }\n </style>\n </head>\n <body>\n \t <nav>\n <ul>\n <li class='a'>home</li>\n <li>spaceships</li>\n <li>planets</li>\n <li>stars</li>\n </ul>\n </nav>\n </body>\n</html>","libs":[]}