CSS Flexbox 布局完全指南 （一）：4000字，多示例讲解
图雀社区推荐搜索
浏览器内部机制
React 源码
JS 基础进阶
Serverless
理解 Flexbox 最好的方式是什么？学好基础，再大量练习。这正是我们要在这篇文章中做的事情。
要注意的几点
- 这篇文章预设你是一名中级开发者，并且对 Flexbox 有点了解，不过......
- 如果你对 CSS 有些了解，完全不知道 Flexbox，我写了一篇综合指南（免费文章，阅读时间约为 46 分钟）
- 如果你对 CSS 掌握得不是很好，我推荐你阅读CSS 全面（实用）指南（74 课时的付费课程）
- 你不需要遵照这里列出的示例顺序
- Flexbox 只是一种布局的技巧，实际项目中涉及到的东西除了布局还有很多
- 当你看到例如 div.ohans 的例子，这代表类名是 ohans的 div
示例一：如何用 Flexbox 制作一个影片集
使用 Flexbox 实现横向纵向排列比大多数人想象的要简单。
例如一个如下的简单标识文本：
<main class="gallery"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"> <img src="/sample.jpg"></main>main.gallery 里有十张图片。
假定 main.gallery 覆盖整个可见屏幕。
.gallery { min-height: 100vh}有关图片的快速标记
图片默认是一个 inline-block 元素，有宽高，通常排列在同一行（除了图片尺寸有限定，一行排不下的情况）。
起始点
把所有图片放在一起，上面的标识文本显示效果如下：
10 张图片本身的宽高尺寸保持不变，在需要的时候自动换行，很好;)
现在，看下 Flexbox 的效果:
.gallery { display: flex }现在，图片的默认属性已经发生改变。它们从 inline-block 元素变成了 flex-items。
由于 .gallery 里的 Flexbox 布局，里面的图片会被压缩排列在一行内，而且它们会被纵向拉伸成这样：
图片都被纵向拉伸，并且挤在一行内，不能更丑 :(
这就是由于 Flexbox 布局的默认展示方式:
1、将所有的子元素压在一行内，不换行。
这并不适用于图片库，因此我们可以这样改变：
.gallery { flex-wrap: wrap}这样所有的元素会在适当的位置换行成多行排列。
因为 wrap 值的改变，现在图片换行排列
2、现在图片有换行，但是仍然被纵向拉伸。我们当然不想要这样变形的布局。
stretch 显示是因为 flex 里默认的 align-items 值。
align-items: stretch我们可以改成这样：
.gallery { ... align-items: flex-start}这样图片不会拉伸，而是保持它们默认的宽和高。
如下所示，它们会在纵向保持首部对齐。
现在图片都没有变形，这才是我们在使用 Flexbox 之前想要的效果
现在我们就有了使用 Flexbox 的强大图片集。
使用 Flexbox 的优点
此刻 Flexbox 似乎没展现出什么优势，图片还是像使用 Flexbox 之前一样。
除了能得到一个免费的响应式图片集外，使用 Flexbox 的另一个优势就是它的对齐选项。
还记得 Flex 容器 .gallery 设定的样式 flex-direction: row justify-content: flex-start 和 align-items: flex-start。
如下所示，改变默认值，我们就可以立马改变图片库的布局。
.gallery { ... justify-content:center;}图片在水平方向上完美居中
如上所示，这会让图片水平居中。
.gallery { ... justify-content:center; align-items: center;}再进一步，我们可以让图片完美居中对齐（无论是水平还是垂直）
如上所示，这可以让图片在 .gallery 内水平和垂直都居中。
你可以通过 Flexbox 的布局方式随意选择你想要的对齐选项。
也可以在 CodePen查看 Flexbox 图片库的实时布局效果。
示例二：如何通过 Flexbox 布局卡片
卡片在网上很流行，无论是Google, Twitter 还是 Pinterest，每个网站都在使用卡片。
卡片是一种在弹性容器内组合相关信息的页面设计方式，视觉上很像一种玩的卡片。
有很多使用卡片的优秀案例，其中一个常用的就是价格表。
价格表模型
让我们来建一个。
标识文本
我们给每个卡片设定一个如下标识：
<section class="card"> <header> </header> <ul> <li></li> <li></li> <li></li> </ul> <button></button></section>这里有至少 3 个卡片，我们把这些卡片包在 div.cards 里。
<div class="cards"></div>现在已经有了一个父元素。在这个例子中，父元素充满整个视图。
.cards { min-height: 100vh}建立 Flexbox 布局
下面的代码块新建了一个在 .cards 里面的 Flexbox 布局样式。
.cards { display: flex; flex-wrap: wrap}如果你还记得上一个例子， flex-wrap 可以让 flex-items 元素换行。
由于子元素排列需要更大的宽度，所以子元素不能在父元素内排列时就会换行。
接下来我们给 .card 元素一个初始宽度。
使用 Flexbox 如下布局：
.card { flex: 0 0 250px}这个样式将 flex-grow 和 flex-shrink 的值设为 0， flex-basis 值为 250px。
这时，卡片会在页面的起始处对齐，并且竖向排列。
卡片首部对齐
这有时可能满足你的使用需求，但大部分情况下，都不行。
Flex 容器的默认值
上面的布局效果是由于 Flex 容器的默认布局设置。
卡片在页面内靠左上角对齐，因为 justify-content 的值默认为 flex-start。
同时，卡片垂直拉伸充满整个父元素的高度，因为 align-items 的默认值是 stretch。
改变默认值
我们可以通过改变 Flexbox 提供的默认值来达到更好的效果。
看下面几个例子：
align-items: flex-start; justify-content: center
align-items: flex-end; justify-content: center
align-items: center; justify-content: center
你可以在 CodePen 看最终的效果。
示例三：如何使用 Flexbox 创建网格布局
在这个例子中，我们要探讨整体的 CSS 框架概念，这是很重要的一点。
什么是网格布局？
网格是用来构建内容的一系列水平垂直相交引导线。
一系列水平垂直相交引导线
如果你对 Bootstrap 这样的 CSS 框架比较熟悉，那你之前一定使用过网格布局。
你所掌握的内容可能不一样，但这个例子会涵盖不同的网格布局类型。
我们先来看第一种，基本网格布局。
基本网格布局
一组列宽度相同的基础网格
这些网格有以下特点：
- 网格单元格平均布局并充满整行
- 单元格高度一致
使用 Flexbox 很容易实现这个效果，看下面这个标识文本：
<div class="row"> <div class="row_cell">1</div></div>每个 .row 都是自己的 Flex 容器。
.row 里的每个元素也就是 Flex 元素，所有的 Flex 元素都平均分布在一行中。
根据设计，无论有 3 个子元素
<div class="row"> <div class="row_cell">1/3</div> <div class="row_cell">1/3</div> <div class="row_cell">1/3</div></div>6 个子元素
<div class="row"> <div class="row_cell">1/6</div> <div class="row_cell">1/6</div> <div class="row_cell">1/6</div> <div class="row_cell">1/6</div> <div class="row_cell">1/6</div> <div class="row_cell">1/6</div></div>或是 12 个子元素，都是没影响的
<div class="row"> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div> <div class="row_cell">1/12</div></div>解决方案
达到这个效果只需要两步：
1、新建一个 Flexbox 布局文本：
.row { display: flex;}2. 扩大每个 flex-item 元素，让它们以相同比例均匀布满整行：
.row_cell { flex: 1}就是这样。
方案解释
flex: 1flex 是 flex-grow、 flex-shrink 和 flex-basis 三个不同 Flexbox 属性的缩写。
flex: 1 只有 1 的值，这个值代表的是 flex-grow 属性。
而 flex-shrink 和 flex-basis 则分别设置为 1 和 0。
flex: 1 === flex: 1 1 0有确定大小的网格元素
有时候你需要的效果并不是同样大小的水平网格布局。
你可能想要一个元素是其他的两倍，或者几分之一。
水平网格布局中的元素是其他的两倍或三倍
实现方式很简单。
对于这些有确定大小的网格元素，只需要加一个这样的修饰符类：
.row_cell--2 { flex: 2}加上这个类，可以看到第一个 div 子元素代码如下：
<div class="row"> <div class="row_cell row_cell--2">2x</div> <div class="row_cell">1/3</div> <div class="row_cell">1/3</div></div>加上 .row__cell--2 类名的元素会是其他默认元素的两倍大小。
一个占可用空间 3 倍的元素：
.row_cell--3 { flex: 3 }
有确定对齐方式的网格元素
多亏了 Flexbox 布局，我们不需要给每个元素设置特定的对齐值。你可以给任何一个元素设定不同的对齐方式。
通过下面的修饰符类，可以达到这样的效果：
.row_cell--top { align-self: flex-start}这可以让特定的元素在 row 内靠顶部对齐。
应用 .row\_cell — top 类可以让特定的元素在 row 内靠顶部对齐
你一定有在标识文本中给特定元素加上这个类。看文本中第一个 div 子元素：
<div class="row"> <div class="row_cell row_cell--top"></div> <div class="row_cell"></div> <div class="row_cell"></div></div>下面是其他可选的对齐方式：
.row_cell--bottom { align-self: flex-end}给特定的元素加上 .row\_cell — bottom 类会让它在 row 内靠底部对齐
.row_cell--center { align-self: center}
给特定的元素加上 .row\_cell — center 类会让它在 row 内居中对齐
行内对齐
像特定的元素可以对齐一样，行内子元素也可以整体对齐。
可以使用下面的修饰符类达到这样的效果：
.row--top { align-items: flex-start}
一行上的三个元素都靠顶部对齐
需要注意的一个重点是，修饰符类 .row--top 一定要被加在 row 或是父元素 flex-container 上。
<div class="row row--top"> <div class="row_cell"></div> <div class="row_cell"></div> <div class="row_cell"></div></div>其他的对齐选项见下：
.row--center { align-items: center}
整行的三个元素都居中对齐
.row--bottom { align-items: flex-end}
整行的三个元素都靠底部对齐
嵌套网格
只需要简单的设置，rows（行元素）就可以嵌套布局。
一行内有两个元素，其中一个是另一个的两倍大小。一行三个元素居中嵌套排列在较大的元素里
你可以在这里查看最终的布局效果。
更多网格布局
当你可以用 Flexbox 垂直网格甚至更复杂的参数实现好看的网格构造时，就可以把这个很好的工具用于工作。你可以从 CSS 网格布局这份资料了解更多 CSS 网格布局的解决方案。
更多示例将在文章 Part 2 展示。
❤️爱心三连击
1.看到这里了就点个在看支持下吧，你的「在看」是我创作的动力。
2.关注公众号图雀社区，「带你一起学优质实战技术教程」！
3.特殊阶段，带好口罩，做好个人防护。
4.添加微信【little-tuture】，拉你进技术交流群一起学习。
- *
● 你不知道的 Babel（7000字，详解原理并手写插件）
Original url: Access
Created at: 2020-07-15 11:20:15
Category: default
Tags: none
未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到
最新评论