[译]Flexbox十分钟入门

原文地址:Learn basic Flexbox in just 10 minutes

Flexbox是什么?

Flexbox,“弹性盒子”(flexible box)的简称,是 CSS3引入的一种布局模式,它决定了元素在页面里是如何排列的,以便预测在不同的屏幕尺寸和设备下的展示样式。

之所以称为Flexbox是因为它可以让元素在flex盒子里伸展或者收缩来更好的填充可用空间。与传统的布局方式比如展示成表格和行内浮动相比,Flexbox在以下方面更有优势:

  • 在不同的方向上排列元素
  • 重新排列元素的展现顺序
  • 改变元素的对齐方式
  • 在容器里动态调整元素

什么时候不用Flexbox?

虽然Flexbox可以很好的实现缩放、对齐和重新排列元素,但是请避免在以下情况下使用:

Can i use...
截图来自Can i use

一些旧浏览器,比如IE11或以下的版本,不支持或者只是部分支持Flexbox的特性。如果你想安全的使用它,你需要使用其他的CSS布局方式,比如 display: inline-blockfloat ,以及 display: table.。

但是如果你只考虑主流浏览器,Flexbox的确值得一用。

术语

在Flexbox模型中,有三个核心内容:

  • flex items,需要排列的元素
  • flex container,flex items的容器
  • flow direction,决定了flex items的布局方向

学习的最好方法就是实践和经验(实践出真知?),让我们开始吧!

Level 1 — 基础

1)创建flex container

<div class="flex-container">    
    <div class="flex-item"></div>  
    <div class="flex-item"></div>
</div>
.flex-container {  display: flex;}

创建flex容器,你只需要给元素添加 display: flex 属性。默认的,所有直接子元素都会被认为是flex项目,并在一行内从左到右排列。如果flex items的宽度总和超过了容器,项目会被缩小来适应容器。

2)把flex项目放到同一列

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

设置 flex-direction: column会使flex项目垂直排列。也可以通过设置 flex-direction: column-reverse 或者 flex-direction: row-reverse来让它们反向排列。

.flex-container {  display: flex;  flex-direction: column-reverse;}

Level 2 — 初级

1)使flex项右对齐

.flex-container {  display: flex;  justify-content: flex-end;}

回想一下每个Flexbox模型都有方向(主轴方向)。 justify-content用来指定flex项目该如何沿主轴方向排列。在上面的例子中, justify-content: flex-end意味着项目被调整到flex容器水平方向的底部。这就是为什么他们被放到了右边。

2)居中flex项目

.flex-container {  display: flex;  justify-content: center;}

3)展开flex项目

你可以设置justify-content的三种值中的一个来指定容器中项目之间的间隔:

  • space-evenly:容器边框和项目的间隔与相邻项目之间的间隔相等
  • space-between:相邻的项目之间间隔相等,但是和第一个/最后一个项目与容器边缘的间隔不一定同。边框与首尾项目的间隔相同。
  • space-around:项目两侧的间隔相等,意味着两个相邻项目之间的间隔是项目与边框之间间隔的两倍。

4)交叉轴方向上的项目对齐

.flex-container {  display: flex;  justify-content: center;  align-items: center;}

通常我们想要沿着flex主轴方向排列项目,同时也沿和它垂直的方向上对齐。通过设置justify-content: centeralign-items: center可以让项目在水平和垂直方向上都居中。

5)个别项目的对齐

.flex-container {  display: flex;  align-items: center;}
.flex-bottom {  align-self: flex-end;}

通过使用align-selfCSS属性可以单独设置某个项目的对齐方式。

Level 3 — 中级

1)让项目在行/列上换行

.flex-container {  display: flex;  flex-wrap: wrap;}

默认情况下,容器宽度不够的时候flex项目会被调整大小来适应一行或一列,并不会换行。通过添加flex-wrap: wrap,超出的flex项目会被换到另一行。

2)反向折行

.flex-container {  display: flex;  flex-wrap: wrap-reverse;}

flex项目依然多行排列,但是从容器的底部开始排列。

3)调整元素的位置

.flex-container {  display: flex;  flex-wrap: wrap;  align-content: flex-start;}

默认的,换行的flex项目会平分容器的剩余高度空间。你可以在容器上设置align-content来确定换行时行的位置。可用的值有 flex-startflex-endcenterspace-betweenspace-aroundstretch(默认)。

Level 4 — 高级

1)放大元素

.flex-container {  display: flex;}
.flex-item.nth-of-type(1){  flex-grow: 1;}
.flex-item.nth-of-type(2) {  flex-grow: 2;}

flex-grow只在容器有剩余空间的时候生效。flex-grow属性定义了一个项目相对其他项目会放大多少来填充容器。默认的是0不放大。举个栗子,如果有两个项目是1和2,意味着第一个项目会占用剩余空间的1/3,另一个占用2/3。

2)缩小元素

.flex-container {  display: flex;}
.flex-item:nth-of-type(1) {  flex-shrink: 1;}
.flex-item:nth-of-type(2) {  flex-shrink: 2;}

flex-shrink只有当空间不足导致flex项目超出容器时候生效。它定义了一个项目相对其他项目缩小多少来避免项目超出容器。默认值是1。当设置成0的时候,项目将不会收缩。举个例子,两个项目比率为1:2,意味着第一个项目会缩小超出空间的1/3,另一个缩小2/3。

3)设置元素大小

.flex-container {  display: flex;}
.flex-item.nth-of-type(1) {  flex-basis: 200px;}
.flex-item.nth-of-type(2) {  flex-basis: 10%;}

除了使用元素的默认尺寸外,你可以使用flex-basis来定义他的大小。默认值是flex-basis: auto,使用元素原来的尺寸。你可以设置一个绝对值或者相对容器的百分比值;比如flex-basis: 200pxflex-basis: 10%

4)把flex-grow,flex-shrink,flex-basis写在一起(属性简写)

.flex-container {  display: flex;}
.flex-item:nth-of-type(1) {  flex: 1 0 100px;}
.flex-item:nth-of-type(2) {  flex: 2 0 10%;}

flexflex-growflex-shrinkflex-basis的简写。在上面的栗子中,第一个项目被设置为flex-grow=1flex-shrink=0flex-basis=100px,第二个被设置为flex-grow=2flex-shrink=0flex-basis=10%。当felx容器里有剩余空间的时候只有flex-grow生效,flex-shrink会被忽略。

总结

Flexbox很容易学习和使用。知识的使用是非常有用的,因为网页开发周期短并且迭代快。如果你想在项目中使用它,可以访问FlexyboxesFlexbox Froggy来尝试。也可以到FlexyboxesFlexbox Froggy获取更多知识。

这篇文章最早发布在Altitude Labs’博客 ,作者是我们的软件攻城狮Felix Yau。

Comments
Write a Comment
  • Sollrei reply

    推荐flexbox的文章: http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html