技术频道


CSS flexbox 布局

flexbox 布局


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

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

Flexbox Fundamentals - 基本原则

 

使用 flexbox 的简单布局


.container {
  display: -webkit-flex;
  display: flex;
}
nav {
  width: 200px;
}
.flex-column {
  -webkit-flex: 1;
          flex: 1;
}
<div class="container">
<div class="flex-column">
<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;
}
<div class="container">
<div class="initial">

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

<div class="none">

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

<div class="flex1">

我会占满剩余宽度1/3

<div class="flex2">

我会占满剩余宽度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;
}
<div class="vertical-container">
<div class="none">

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

 

CSS flexbox 布局扩展阅读:




发表评论