CSS flexbox 布局

新的 flexbox 布局模式被用来重新定义 CSS 中的布局方式。目前只能在支持 flexbox 的 Chrome 等浏览器中运行，基于最新的标准。

flexbox 布局

使用 flexbox 你还可以做的更多，这里只是一些让你了解概念的例子。

下面这个图完美的展示了 Flexbox 的一些基本原则，希望对大家有所帮助（点击可以查看大图）：

Flexbox Fundamentals - 基本原则

使用 flexbox 的简单布局

.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}

<section> - 1

flexbox 很容易使用！

</section>

<section> - 2

长久以来，CSS 布局中唯一可靠且跨浏览器兼容的创建工具只有 floats 和 positioning。这两个工具大部分情况下都很好使，但是在某些方面它们具有一定的局限性，让人难以完成任务。弹性盒子 flexbox 是一种用于按行或按列布局元素的一维布局方法。元素可以膨胀以填充额外的空间, 收缩以适应更小的空间。本文将解释所有的基本原理。

</section>

使用 Flexbox 的牛逼布局

.container {
  display: -webkit-flex;
  display: flex;
}
.initial {
  -webkit-flex: initial;
          flex: initial;
  width: 200px;
  min-width: 100px;
}
.none {
  -webkit-flex: none;
          flex: none;
  width: 200px;
}
.flex1 {
  -webkit-flex: 1;
          flex: 1;
}
.flex2 {
  -webkit-flex: 2;
          flex: 2;
}

空间足够的时候，我的宽度是 200px，如果空间不足，我会变窄到 100px，但不会再窄了。

无论窗口如何变化，我的宽度一直是 200px。

我会占满剩余宽度的 1/3。

我会占满剩余宽度的 2/3。

使用 Flexbox 的居中布局 - 垂直居中

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

CSS 里总算是有了一种简单的垂直居中布局的方法了！

CSS flexbox 布局

flexbox 布局

使用 flexbox 的简单布局

使用 Flexbox 的牛逼布局

使用 Flexbox 的居中布局 - 垂直居中

CSS flexbox 布局扩展阅读：

CommandNotFound ⚡️ 坑否 - 其他频道扩展阅读：

发表评论