整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
在为网页排版抓狂？别担心，CSS的 flex 布局来了，让你轻松玩转各种页面布局，实现网页设计自由！
Flex 布局，也称为弹性布局，是 CSS 中的一种强大布局方式，它能够让你的网页元素像弹簧一样，灵活地适应各种屏幕尺寸和设备方向。
想象一下:
这些看似复杂的需求，使用Flex布局就能轻松解决！
.container {
display: flex; /* 将 .container 元素设置为 Flex 容器 */
}
<div class="container">
<div class="item">项目 1</div>
<div class="item">项目 2</div>
<div class="item">项目 3</div>
</div>
<div class="container">
<div class="sidebar">侧边栏</div>
<div class="content">主要内容</div>
<div class="aside">侧边栏</div>
</div>
.container {
display: flex;
}
.sidebar {
width: 200px;
}
.content {
flex: 1; /* 自动填充剩余空间 */
}
.aside {
width: 200px;
}
Flex 布局是网页排版的神器，掌握它，你就能轻松应对各种布局需求，让你的网页设计更加灵活、美观！
家好，我是Echa。
最近又有老铁私信我，前面一段时间分享了几十款Vue、React、微信小程序开源商城项目以及后台管理开源项目等等，有没有CSS相关开源框架？羊了还没有完全康复，伴着咳嗽中上Github上搜索，功夫不负有心人，找到了一些。今天来分享 GitHub 上一些热门的 CSS 框架！
创作不易，喜欢的老铁们加个关注，点个赞，后面会持续更新干货，速速收藏，谢谢！
官网地址：https://getbootstrap.com/
GitHub（131k）：https://github.com/twbs/bootstrap
Bootstrap是 Twitter 推出的基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的CSS开发框架，使得 Web 开发更加快捷。Bootstrap 提供了优雅的HTML和CSS规范，它由动态CSS语言Less写成。Bootstrap 推出后颇受欢迎，一直是GitHub上的热门开源项目。
Bootstrap 的优点：
Bootstrap 的缺点：
官方地址：https://get.foundation/
GitHub(29.4k)：https://github.com/foundation/foundation-sites
Foundation 是一个用于开发响应式的 HTML, CSS 和 JavaScript 框架。它是一个易用、强大而且灵活的框架，用于构建基于任何设备上的 Web 应用，是一个移动优先的流行框架。
实际上，Foundation 不仅仅是一个 CSS 框架，而是一系列前端开发工具。这些工具可以一起使用，也可以完全独立使用。
Foundation 的优点：
Foundation 的缺点：
官方地址：https://bulma.io/
GitHub（46.5k）：https://github.com/jgthms/bulma
Bulma 是一个免费的开源CSS框架，它提供了现成的前端组件，可以轻松地组合这些组件来构建响应式 Web 界面。Bulma 框架最大的特点就是简单好用。所有样式都基于class，只需为 HTML 元素指定class，样式将立刻生效。
Bulma 的优点：
Bulma 的缺点：
官方网址：https://tailwindcss.com/
GitHub（63.2k）：https://github.com/tailwindlabs/tailwindcss
Tailwind CSS 是一个功能类优先的 CSS 框架，它集成了诸如 flex, pt-4, text-center 和 rotate-90 这样的类，它们能直接在HTML中组合起来，构建出任何设计。
Tailwind 的优点：
Tailwind 的缺点：
官方地址：http://getuikit.com/
GitHub（17.7k）：https://github.com/uikit/uikit
UIkit 是 YOOtheme 团队开发的一款轻量级、模块化的前端框架，可快速构建强大的前端界面。UIKit提供了全面的HTML、CSS、JavaScript组件。它基于LESS开发，代码结构清晰简单，易于扩展和维护，并且具有体积小、反应灵敏的响应式组件，可以根据 UIKit 基本的风格样式，轻松地自定义创建出自己喜欢的主题样式。
UIkit 的优点：
UIkit 的缺点：
官网网址：https://milligram.io/
GitHub（9.9k）：https://github.com/milligram/milligram
Milligram 提供了最小的样式设置，以快速和干净为起点。压缩后只有 2kb！它为更好的性能和更高的生产力而设计，需要重置的属性更少，代码更简洁。
Milligram 的优点：
Milligram 的缺点：
官网地址：http://purecss.io/
GitHub(22.7k)：https://github.com/pure-css/pure
Pure.css是美国雅虎公司出品的一组轻量级、响应式纯CSS模块，适用于任何Web项目。这个框架非常小，在使用所有模块时压缩后只有 3.7 KB。
Pure 的优点：
Pure 的缺点：
官方网址：https://tachyons.io/
GitHub（11.3k）：https://github.com/tachyons-css/tachyons
Tachyons与其他流行的前端框架不同，Tachyons旨在将CSS规则分解为小型的、可管理的、以及可复用的部件。Tachyons可以帮助开发人员创建出具有高度可读性、能够快速加载和响应的网站，而且无需使用大量CSS代码。
Tachyons 的优点：
Tachyons 的缺点：
官方地址：https://materializecss.com/
GitHub（38.7k）：https://github.com/Dogfalo/materialize
Materialize是一个使用CSS，JavaScript和HTML创建的UI组件库。实现UI组件有助于构建有吸引力，一致和功能的网页和网络应用程序，同时坚持现代网络设计原则，如浏览器可移植性，设备独立性和优雅的降级。它有助于创建更快，更美观，更灵敏的网站。它的灵感来自Google Material Design。
Materialize 的优点：
Materialize 的缺点：
这些 CSS 框架在一定程度上有助于提高工作效率。那该如何选择这些框架呢？
最后，还是要根据实际需求来选择最合适的CSS框架！
lex 布局是一维布局
Grid 布局是二维布局
flex 布局一次只能处理一个维度上的元素布局，一行或者一列
Grid 布局是将容器划分成了“行”和“列”，产生了一个个的网格。
Grid基础
display：grid 或 display：inline-grid 来创建一个网格容器
grid-template-columns 和 grid-template-rows 属性来定义网格中的行和列
一个网格单元是在一个网格元素中最小的单位
划分网格的线，称为"网格线"。应该注意的是，当我们定义网格时，我们定义的是网格轨道，而不是网格线。Grid 会为我们创建编号的网格线来让我们来定位每一个网格元素。m 列有 m + 1 垂直的网格线，n 行有 n + 1 跟水平网格线。比如上图示例中就有 4 根垂直网格线。一般而言，是从左到右，从上到下，1，2，3 进行编号排序。当然也可以从右到左，从下到上，按照 -1，-2，-3...顺序进行编号排序
grid-template-columns 属性和 grid-template-rows 属性
grid-template-columns 属性设置列宽，grid-template-rows 属性设置行高
.wrapper {
display: grid;
/* 声明了三列，宽度分别为 200px 100px 200px */
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 声明了两行，行高分别为 50px 50px */
grid-template-rows: 50px 50px;
}
repeat() 函数：可以简化重复的值。该函数接受两个参数，第一个参数是重复的次数，第二个参数是所要重复的值。
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 200px;
grid-gap: 5px;
/* 2行，而且行高都为 50px */
grid-template-rows: repeat(2, 50px);
}
auto-fill 关键字：表示自动填充，让一行（或者一列）中尽可能的容纳更多的单元格
.wrapper-2 {
display: grid;
grid-template-columns: repeat(auto-fill, 200px);
grid-gap: 5px;
grid-auto-rows: 50px;
}
fr 关键字：Grid 布局还引入了一个另外的长度单位来帮助我们创建灵活的网格轨道。fr 单位代表网格容器中可用空间的一等份。
.wrapper-3 {
display: grid;
grid-template-columns: 200px 1fr 2fr;
grid-gap: 5px;
grid-auto-rows: 50px;
}
minmax() 函数：我们有时候想给网格元素一个最小和最大的尺寸，minmax() 函数产生一个长度范围，表示长度就在这个范围之中都可以应用到网格项目中。它接受两个参数，分别为最小值和最大值。
.wrapper-4 {
display: grid;
grid-template-columns: 1fr 1fr minmax(300px, 2fr);
grid-gap: 5px;
grid-auto-rows: 50px;
}
auto 关键字：由浏览器决定长度。通过 auto 关键字，我们可以轻易实现三列或者两列布局。
.wrapper-5 {
display: grid;
grid-template-columns: 100px auto 100px;
grid-gap: 5px;
grid-auto-rows: 50px;
}
grid-row-gap 属性、grid-column-gap 属性以及 grid-gap 属性
grid-row-gap: 10px 表示行间距是 10px，grid-column-gap: 20px 表示列间距是 20px。grid-gap: 10px 20px 实现的效果是一样的
.wrapper {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-gap: 10px 20px;
grid-auto-rows: 50px;
}
.wrapper-1 {
display: grid;
grid-template-columns: 200px 100px 100px;
grid-auto-rows: 50px;
grid-row-gap: 10px;
grid-column-gap: 20px;
}
grid-template-areas 属性
grid-template-areas 属性用于定义区域，一个区域由一个或者多个单元格组成
*请认真填写需求信息，我们会在24小时内与您取得联系。
