CSS 布局调整了一下 – 使用 Flexbox
除非你是从古老的网站中浮出水面的一只恐龙，不然你应该都已经听说过 Flexbox。它是 CSS 世界中的一个相对新的部分，代表着我们对于网页布局的概念已经发生了变化。
在本文中，我们将对 Flexbox 进行深入探讨，了解它一些中心概念和实际使用技巧，以使你更好地掌握它并应用到你的前端项目中去。
Flexbox 是什么？
Flexbox，也被称为弹性盒模型，是 CSS3 中一个全新的布局模块。与传统的布局模块不同，它的目的是为了在一个单一维度上优化控件的布局方式。通俗来说，就是帮助你快速解决复杂的布局需求，同时提供更好的可读性和可扩展性。
如何使用 Flexbox？
在实践中使用 Flexbox 极其简单，只需要将 display 属性设置为 flex，就可以将元素转换成弹性容器（flex container），使之成为 flexbox 的一部分。
从下面的示例中可以看出，我们使用了最少的 CSS 代码就可以将多个列表项放置在一个容器内，且容器中的所有子元素都水平排列。
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------- ---- ----------------------- ---- ----------------------- ---- ----------------------- ------ ------- ---------- - -------- ----- ---------------- -------------- - ----- - ----------- -------- -------- ----- ------------- ----- - --------
Flexbox 的核心概念
Flexbox 布局模块有一些重要的核心概念，这些概念将帮助你更好地理解它并在实践中更加游刃有余。
Flex Container（弹性容器）
Flex Container 是一个盒子，用于包含弹性子元素（flex items）。弹性容器具有以下特征：
- 可以使用
display: flex或display: inline-flex将元素转换为弹性容器 - 可以通过指定
flex-direction属性来设置弹性子元素的布局方向 - 默认情况下，弹性容器会将所有弹性子元素挤在一起，使它们尽可能地占满容器
Flex Items（弹性子元素）
Flex 模型中，弹性子元素是弹性容器中的任意容器元素，每个弹性子元素都是唯一的。它们具有以下特征：
- 可以使用
flex属性调整它们在弹性容器中占用的空间 - 可以使用
align-self属性来将单个弹性子元素与其他弹性子元素垂直对齐 - 可以使用
order属性来重新排列弹性子元素的顺序
Main Axis（主轴）
主轴是 Flex Layout 中的主要布局方向。它被定义为弹性容器的长轴，具有以下特征：
- 默认情况下，主轴是弹性子元素所处的水平轴
- 可以使用
flex-direction属性在弹性容器中更改主轴
Cross Axis（交叉轴）
交叉轴是弹性容器中的垂直轴，与主轴垂直。具有以下特征：
- 默认情况下，交叉轴是弹性子元素所处的垂直轴
- 可以使用
align-items属性将弹性子元素在交叉轴上进行对齐 - 可以使用
align-content属性调整弹性子元素在弹性容器中的间距和对齐方式
在实践中使用 Flexbox 的技巧和建议
当你更深入地学习 Flexbox 的时候，你会发现有很多种方法可以实现同样的 Flex 布局。在这里，我们分享一些 Flexbox 使用技巧和实践建议，让你的 Flex 布局更加灵活：
- 利用 Flexbox 的强大功能来避免使用无用的标记和 div 元素，减少 HTML 的复杂度和大小
- 在灵活性和可读性之间做出平衡，使你的代码既能让你自己理解，又能被其他开发者使用
- 与 CSS 网格布局（CSS Grid Layout）一起使用，以更好地控制水平和垂直布局
- 对于较老的浏览器，可以使用 Autoprefixer 或其他 CSS 前缀自动生成工具，以自动为它们添加必要的前缀
结论
在本文中，我们深入研究了 Flexbox 的核心概念和实践技巧，这些将使你更好地理解和使用它。另外，我们还分享了一些实践建议，让你能够更好地控制布局，并在代码不断发展的时候不失去优雅。最后，我鼓励你在实践中多试错、多实验，并将 Flexbox 这一强大的工具运用到你的日常开发实践中。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f2916aa44b36ee576665a3