[译] 3 分钟掌握 CSS Flexbox

阅读 3091
收藏 219
2016-09-06
原文链接:github.com

在这篇文章中你将学到关于 CSS 中弹性布局最重要的概念。如果你发现你经常在 CSS 布局上纠结,这篇文章将帮你解脱出来。

我们将只专注那些核心要素,暂时抛弃那些你现在不应该注意的东西直到你掌握基础。

1. 容器和项目

弹性布局中两个主要的组件是容器(蓝色)和项目(红色)。我们将在本教程的这个示例中看到,无论是容器还是项目都是 div’s。查看 示例代码 如果你有兴趣 。

横向布局

要创建一个弹性布局,只需要给容器设置以下的 CSS 属性。

.container {
    display: flex;
}

布局的结果如下:

注意你目前不需要对项目做任何事,它们将沿水平轴自动定位。

垂直布局

在上述布局中,主轴线是水平的,交叉轴是垂直的。的概念对理解弹性布局有帮助。

当你添加 flex-direction: column 时可以交换这两个轴。

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

则现在主轴线是垂直的,而交叉轴是水平的,导致项目被垂直堆叠。

2. Justify content and Align items

为了使列表再次水平,我们能将 flex-directioncolumn 设置为 row 因为这将再次翻转弹性布局的轴。

轴的概念必须理解是因为 justify-contentalign-items 这两个属性控制如何使项目主轴线交叉轴分别定位。

让我们通过使用 justify-content 来沿主轴居中所有的项目:

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

使用 align-items 沿着交叉轴进行调整。

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

以下是你可以为 justify-contentalign-items 设置的其他值:

justify-content:

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around

align-items:

  • flex-start (default)
  • flex-end
  • center
  • baseline
  • stretch

我建议你将 justify-contentalign-items 属性与可为 columnrow 值的 flex-direction 结合使用。这将让你更好的理解这个概念。

3. The items

我们将了解的最后一件事就是 items 本身,以及如何将具体的样式单独设置。

比方说,我们想调整第一个 item 的位置,我们通过给它一个与 align-items 接收同样的值的 align-self CSS 属性来实现:

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

将形成以下的布局:

就是这样!

当然关于弹性布局还有很多要学习,但是上面的概念是我最常用的,因此能正确理解很重要。

评论