给萌新的Flexbox简易入门教程

转载请注明出处：葡萄城官网，葡萄城为开发者提供专业的开发工具、解决方案和服务，赋能开发者。

原文出处：https://www.sitepoint.com/flexbox-css-flexible-box-layout/

 

近几年，CSS领域出现了一些复杂的专用布局工具，用以代替原有的诸如使用表格、浮动和绝对定位之类的各类变通方案。Flexbox，或者说是弹性盒子布局模块（Flexible Box Layout Module）是这些新布局工具中的第一个，接着是CSS网格布局模块（CSS Grid Layout Module）。咱们会在本文给出一个易于理解的flexbox入门介绍。

随着CSS网格布局的引入，你可能会问flexbox布局是否真的还有必要。虽然它们所能作的事情有一些重叠，但其各自在CSS布局中有着很是特别的目的。通常来讲，flexbox在一维场景（好比，一串相似的元素）下有最佳应用，而网格是二维场景下理想的布局方案（例如整个页面的元素）。

即使如此，flexbox仍能够用于整个页面的布局，这样它能为那些还不支持网格布局的浏览器提供合适的兼容处理。（必须认可，网格布局正在大多数现代浏览器中快速获得支持，不过对flexbox的支持仍然更为普遍，因此若是你想让你的布局在稍微老旧的浏览器中也生效，使用flexbox做为网格布局的降级方案是很容易的）。

使用Flexbox的好处

flexbox的一些好处是：

• 页面元素能被任意方向地放置（靠左、靠右、从上往下甚至从下往上）
• 布局内容的可视顺序可以被反转或重排
• 元素大小能“弹性”适应可用空间，并根据容器或者兄弟元素进行相应地对齐
• 能轻松实现等列宽布局（与每一列里面的内容无关）

为了阐述其多样的属性和可能性，让咱们假设下面有这样的布局用例：

<div class="example">
  <header>
    header content here
  </header>
  <main class="main">
    <nav>
      nav content here
    </nav>
    <div class="content">
      main content here
    </div>
    <aside>
      aside content here
    </aside>
  </main>
  <footer>
    footer content here
  </footer>
</div>

 

首先，是把元素一块儿放进.main里，好比，<nav>和<aside>。若是没有flexbox，咱们可能会把三个元素所有进行浮动，但想让它按理想的方式工做显得并不直观。并且，按传统的方式作这件事会出现一个众所周知的问题：每一列仅仅和它的内容同样高。所以，你可能须要把三个元素都设置为统一的高度，或者使用某种黑科技。

让flexbox来救场吧。

让咱们Flex

flexbox的要点是出如今display属性上的flex值，它须要被设置在容器元素上。如此设置会让它的子元素变成“弹性项目（flex item）”。这些弹性项目拥有一些易于使用的默认属性。好比，它们被紧挨着放置，那些没有特别指明宽度的元素自动占满了剩余的空间。

所以，若是你给.main设置了display:flex，它的子元素.content就被自动挤在<nav>和<aside>之间。不须要再多余的计算，多么方即是吧？做为附加奖赏，全部三个元素神奇地拥有了相同的高度。　　

.main {
  display: flex;
}

请查看下面的例子，包含了全部的细节：flexbox-demo-1。

项的顺序：Flebox的order属性

另一个flexbox的能力，是可以轻松改变元素的显示顺序。让咱们假设你为一个客户制做了上面的布局，而她如今想要.content出如今<nav>以前。

一般，你须要深刻到HTML源码中去，在那里改变元素的顺序。而有了Flexbox，你能够彻底使用CSS完成这项任务。只需把.content的order属性设置为-1，那么这一列就会出如今前面，这本例就是最左边。

.main {
  display: flex;
}

.content {
  order: -1;
}

本例中，你不须要改变其余列的order。例子在flexbox-demo-2。

若是你倾向于显式地为每一列指定order，你能够将.content的order设为1，把<nav>的order设为2，把<aside>的设为3。

HTML源码独立于CSS的Flexbox样式

但你的客户并不知足。她想让<footer>成为页面的第一个元素，显示在<header>以前。那好，一样的，flexbox是你的朋友（虽然像在此例中，可能你得跟你的客户好好谈谈，而不是跟随指示）。由于你不只要重排列内部元素，还要重排外部的，display:flex规则将被设置在<div class="example">之上。注意这里是如何在页面中嵌套使用flex容器来达到你想要的效果的。

由于<header>，<main class="main">和<footer>相互堆叠着，你须要首先设置一个垂直上下文，它可以经过设置flex-direction:column来快速完成。还有，<footer>的order被设置为-1，如此一来它就出如今页面的最上头。就这么简单。

.example {
  display: flex;
  flex-direction: column;
}

footer {
  order: -1;
}

因此，若是你想把一行元素修改成一列，或者相反，你可使用flex-direction属性，并设置它相应地为column或row（row是默认值）。

完整的例子在flexbox-demo-3。

然而，强大的能力也到来了更多的责任：谨记，一些用户可能会使用键盘来导航你的基于flexbox的网站，若是你HTML源码中元素的顺序和屏幕上显示的有所出入，那么无障碍访问的能力就成为须要认真对待的问题。若是想了解得更多，请不要错过HTML源码顺序 vs CSS显示顺序，网站无障碍访问和易用性的专家Adrian Roselli针对这个问题给出了深刻讨论。

如何在Flexbox中对齐子项

Flexbox能很是直观地处理子项的水平对齐和垂直对齐。

你可使用align-items对flex容器中的全部子项设置统一的对齐。若是你想给个别元素设置不一样的对齐方式，使用align-self。元素的对齐方式跟它所在父容器的flex-direction有关。若是它的值是row（意味着元素水平排列），对齐方式是指在垂直轴上。若是flex-direction被设置为column（意味着元素垂直排列），对齐方式就是指在水平轴上。

例如，你让一些元素在容器中分别有不一样的对齐方式，你须要：

• 设置每一个元素的align-self属性为合适的值。可能的值有：center，stretch（元素撑满它的容器），flex-start，flex-end和baseline（元素被放置在父容器的baseline上）
• 把容器元素设置为display:flex
• 最后，注意父容器的flex-direction属性，由于它关系到子元素的对齐方式。　　

　

.example {
  display: flex;
  flex-direction: column;
}

.red {
  align-self: center;
}

.blue {
  align-self: flex-start;
}

.pink {
  align-self: flex-end;
}

试试在下面的例子中，把父容器的flex-direction在row和column之间切换，看看它们引发的实时变化。

例子flexbox-demo-4.html。

若是想要容器中全部的元素有统一的对齐方式，你能够在容器上使用align-items。能够的值有center，flex-start，flex-end，stretch（默认值：子项被拉伸以适应它们的容器）和baseline（子项被放置在父容器的baseline上）。

.example {
  display: flex;
  align-items: center;
}

像往常同样，试着把父容器的flex-direction在row和column之间切换，看看它们如何影响着你设置align-items值时所发生的做用。

例子flexbox-demo-5.html

在Flexbox里两端对齐

另外一个控制对齐的属性是justify-content，当你想让多个元素等分空间时很是有用。

可接受的值有：center，flex-start，flex-end， space-between（元素利用主轴之间的空间而排布）和space-around（元素利用主轴以前、之间和以后的空间而排布）。

例如，在以前你一直使用的简单HTML模板里，你能够在<main>里找到三个元素：<nav>，.content和<aside>。以前，它们都被挤在页面的左边。若是你想让它们之间有一些空间，可是不让第一个元素的左边有空间，也不想让最后一个元素的右边有空间，你能够把.main（即它们的父容器）里的justify-content设置为space-between。

.main {
  display: flex;
  justify-content: space-between;
}

也试一下设置为space-around，观察不一样的结果。例子在flexbox-demo-6。

在上面的例子中，我一样把<header>中的文字水平和垂直对齐了，分别是把justify-content（水平居中）和align-items（垂直居中）都设置为center。

header {
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

Flexbox中弹性子项的大小

使用flex属性，你可以对照flex容器中其余元素来控制弹性子项的大小。

这个属性是如下独立属性的简写：

• flex-grow：一个数字，指明元素如何相对其余flex项来拉伸
• flex-shrink：一个数字，指明元素如何相对其余flex项来收缩
• flex-basis：元素的长度。可接受的值有：auto，inherit或者一个数字后面紧跟着%，px，em或其余长度单位。

例如，想获得三个等宽的列，只需给每一列设置flex:1，其余什么都不用作：　　

nav, aside, .content {
  flex: 1;
}

若是你须要.content占据<nav>和<aside>的两倍宽，那么就把.content设为flex:2，让其余两个为1。

例子在flexbox-demo-7.html。

那仅仅是对flex属性最简单的应用。一样能够设置flex-grow，flex-shrink和flex-basis这些值，不过那超出本文的话题范围了。

进一步的资源

若是你准备好继续前进，并想学着精通flexbox的更多东西，请查看下面的资源：

• Flexbox SitePoint上Guy Routledge制做的一个付费课程
• Building Mega Menus with Flexbox
• How 3 Modern Tools are Using Flexbox Grids
• Make Forms Fun with Flexbox.

总结

如你所见，若是咱们想控制元素在网页中的布局，flexbox可让咱们的生活更加轻松。它很是稳固和可靠，让之前那些咱们天天使用的诸如使 让容器坍缩之类的奇技淫巧，成为了过去。

像咱们说的，现在，在针对整个页面进行布局时，CSS网格是更好的方案，但咱们仍然值得去了解flexbox能作的那些事情。flexbox的最佳应用场景，体如今对元素的一维排列上，但若是有须要，它也能在稍老旧的浏览器中，为CSS网格布局提供方便的替代方案。