相见恨晚的一款前端布局神器！

大家好，我是若川。欢迎加我微信 ruochuan12，长期交流学习。今天给大家推荐一款非常实用的前端页面布局神器，点击下方卡片关注我，或者查看源码系列文章。

页面和布局是一门前端程序员的必修课，css 从来也不是停留在面试八股文的 “文科”，也不应该只停留在调用组件样式库，今天介绍一个前端页面布局学习神器 csslayout.io

image.png

资源介绍

csslayout.io 是一个由现代 CSS 功能，如flex和CSS网格，使用原生代码构建的包括91种最流行的布局页面的样例库，，通过组合它们，你可以拥有现实生活中存在的任何可能的布局。

资源实例

使用 Flex 布局实现 Card layout

image.png

<div style="display: flex;/* Put a card in the next row when previous cards take all width */flex-wrap: wrap;margin-left: -8px;margin-right: -8px;
"><!-- A card with given width --><div style="/* There will be 4 cards per row */flex-basis: 25%;padding-left: 8px;padding-right: 8px;">...</div><!-- Repeat other cards -->...
</div>

实现一个圣杯布局

image.png

<!-- Row -->
<div style="display: flex;margin-left: -8px;margin-right: -8px;
"><!--Cell with given width. Replace 25% with whatever you want --><div style="flex: 0 0 25%;padding-left: 8px;padding-right: 8px;">25%</div><!-- Cell that takes remaining width --><div style="flex: 1;padding-left: 8px;padding-right: 8px;">...</div>
</div>

实现一个下拉菜单

image.png

<style>
/* The root */
.p-nested-dropdowns {/* Border */border: 1px solid rgba(0, 0, 0, 0.3);display: flex;/* Reset list styles */list-style-type: none;margin: 0;padding: 0;
}.p-nested-dropdowns li {/* Spacing */padding: 8px;/* Used to position the sub dropdown */position: relative;
}/* The sub dropdown */
.p-nested-dropdowns ul {/* Border */border: 1px solid rgba(0, 0, 0, 0.3);/* Hidden by default */display: none;/* Absolute position */left: 0;position: absolute;top: 100%;/* Reset styles */list-style-type: none;margin: 0;padding: 0;/* Width */width: 200px;
}/* The second level sub dropdown */
.p-nested-dropdowns ul ul {left: 100%;position: absolute;top: 0;
}/* Change background color of list item when being hovered */
.p-nested-dropdowns li:hover {background-color: rgba(0, 0, 0, 0.1);
}/* Show the direct sub dropdown when hovering the list item */
.p-nested-dropdowns li:hover > ul {display: block;
}
</style><ul class="p-nested-dropdowns"><li>Home</li><li><div>Patterns</div><!-- First level sub dropdown --><ul><li>Layout</li><li>Input</li><li><div>Navigation</div><!-- Second level sub dropdown --><ul><li>Breadcrumb</li><li>Dropdown</li><li>Menu</li><li>Nested dropdown</li></ul></li><li>Display</li><li>Feedback</li></ul></li><li>Products</li><li>About</li>
</ul>

实现一个环形图表

image.png

<div style="position: relative;
"><!-- Show number of percentages --><div style="/* Center the content */align-items: center;display: flex;justify-content: center;/* Rounded border */border: 12px solid rgba(0, 0, 0, 0.3);border-radius: 9999px;/* Size */height: 128px;width: 128px;">...</div><!-- The curve --><div style="/* Position */left: 0;position: absolute;top: 0;/* Take full size */height: 100%;width: 100%;/* If percentages is less than 50 */clip: rect(0px, 128px, 128px, 64px);/* If percentages is greater than or equals to 50 */clip: rect(auto, auto, auto, auto);"><!-- The first half --><div style="/* Take full size */height: 100%;position: absolute;width: 100%;/*Background color of curve.The border width should be the same as the area showing the percentages*/border: 12px solid rgb(0, 68, 158);border-radius: 9999px;/* Position */clip: rect(0px, 64px, 128px, 0px);transform: rotate(162deg); /* Number of percentages * 360 / 100 */" /><!-- The second half --><div style="/* Take full size */height: 100%;position: absolute;width: 100%;/*Background color of curve.The border width should be the same as the area showing the percentages*/border: 12px solid rgb(0, 68, 158);border-radius: 9999px;/* Position */clip: rect(0px, 64px, 128px, 0px);/* If percentages is less than 50 */transform: rotate(0deg);/* If percentages is greater than or equals to 50 */transform: rotate(180deg);" /></div>
</div>