CSS27. 三列布局 - flex
描述
相比于浮动和定位，使用Flexbox布局实现三列布局要更好，因为弹性容器的高度会根据最高的弹性项进行修正，不会出现明显的台阶式效果。Flexbox实现三列布局的特点为简单、使用、强大，核心思路为设置中间内容盒子的"flex: 1"属性，让中间内容区的宽度自适应，独自占据弹性容器的全部剩余空间。HTML/CSS/JavaScript 解法, 执行用时: 1682ms, 内存消耗: 77772KB, 提交时间: 2022-02-09
{"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 .container {\n display: flex;\n }\n .left {\n width: 100px;\n border: 1px solid red;\n }\n .center {\n flex: 1;\n border: 1px solid black;\n }\n .right {\n width: 100px;\n border: 1px solid skyblue;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77772KB, 提交时间: 2022-01-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 .container {\n display: flex;\n }\n .left {\n border: 1px solid black;\n width: 100px;\n background: red;\n }\n .center {\n border: 1px solid black;\n flex: 1;\n background: pink;\n }\n .right {\n border: 1px solid black;\n width: 100px;\n background: green;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1747ms, 内存消耗: 77812KB, 提交时间: 2022-01-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 .left {\n border: 1px solid black;\n width:100px;\n }\n .center {\n border: 1px solid black;\n flex:1\n }\n .right {\n border: 1px solid black;\n width:100px;\n }\n .container {\n display:flex;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 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 box-sizing: border-box;\n }\n .left {\n border: 1px solid black;\n width:100px;\n }\n .center {\n border: 1px solid black;\n flex:1;\n }\n .right {\n border: 1px solid black;\n width:100px;\n }\n .container{\n display:flex;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\">111<br /><br /></article>\n <article class=\"center\">222<br /><br /><br /></article>\n <article class=\"right\">333<br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}
HTML/CSS/JavaScript 解法, 执行用时: 1750ms, 内存消耗: 77848KB, 提交时间: 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 .container{\n display: flex;\n }\n .left {\n border: 1px solid black;\n width: 100px;\n }\n .center {\n border: 1px solid black;\n flex: 1;\n }\n .right {\n border: 1px solid black;\n width: 100px;\n }\n </style>\n </head>\n <body>\n \t<section class=\"container\">\n <article class=\"left\"><br /><br /></article>\n <article class=\"center\"><br /><br /><br /></article>\n <article class=\"right\"><br /><br /><br /><br /></article>\n </section>\n </body>\n</html>","libs":[]}