CSS14. display - flex
描述
Flexbox，也就是Flexible Box Layout模块，是CSS提供的用于布局的一套新属性。这套属性包含针对容器、容器直接子元素（弹性项）的两类属性。Flexbox可以控制弹性项的这几个方面：HTML/CSS/JavaScript 解法, 执行用时: 1690ms, 内存消耗: 77820KB, 提交时间: 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 box-sizing: border-box;\n }\n ul {\n display: flex;\n justify-content: center;\n align-items: center;\n }\n nav ul {\n height: 2rem;\n list-style: none;\n }\n nav ul li {\n border: 1px solid black;\n }\n nav ul li:first-child {\n font-size: 1.2rem;\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 解法, 执行用时: 1744ms, 内存消耗: 77772KB, 提交时间: 2022-01-04
{"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 box-sizing: border-box;\n }\n ul{\n display:flex;\n justify-content:center;\n align-items:center \n \n }\n nav ul {\n height: 2rem;\n list-style: none;\n }\n nav ul li {\n border: 1px solid black;\n }\n nav ul li:first-child {\n font-size: 1.2rem;\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 解法, 执行用时: 1744ms, 内存消耗: 77772KB, 提交时间: 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 box-sizing: border-box;\n }\n nav ul {\n height: 2rem;\n list-style: none;\n display:flex;\n justify-content: center;\n align-items: center;\n }\n nav ul li {\n border: 1px solid black;\n }\n nav ul li:first-child {\n font-size: 1.2rem;\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 解法, 执行用时: 1744ms, 内存消耗: 77900KB, 提交时间: 2021-12-30
{"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 box-sizing: border-box;\n }\n nav ul {\n height: 2rem;\n list-style: none;\n background-color:#bfa;\n display:flex;\n justify-content: center;\n align-items: center\n }\n nav ul li {\n border: 1px solid black;\n }\n nav ul li:first-child {\n font-size: 1.2rem;\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 解法, 执行用时: 1744ms, 内存消耗: 77904KB, 提交时间: 2021-12-30
{"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 box-sizing: border-box;\n }\n nav ul {\n height: 2rem;\n list-style: none;\n display: flex;\n flex-direction: row;\n justify-content: center;\n align-items:center;\n \n }\n nav ul li {\n border: 1px solid black;\n }\n nav ul li:first-child {\n font-size: 1.2rem;\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":[]}