CSS灵活框布局：使用flexbox布置Web应用程序 | CSS Flexible Box Layout: Using flexbox to lay out web applications

使用flexbox可以帮助您在Web应用程序中设计引人注目的布局，从桌面到移动应用程序的扩展性更好。结束使用浮动的<div>元素，绝对定位和JavaScript hack，并开始在几行CSS中构建横向和纵向流动布局。一些基本的示例用例：

你想要在一个页面中间放置一个元素

你需要一套竖直流动的容器

您想创建一排按钮或其他元素，在较小的屏幕尺寸上垂直折叠

本文仅介绍使用支持标准的现代前置实现的浏览器的flexbox。有关旧版浏览器的供应商前缀的信息，请参阅使用CSS灵活框的更一般指南。

基本

您可以通过将<div>的display属性设置为属性flex，然后将flex-flow属性设置为任意流row，如果要使元素水平流动，或者column如果要使元素垂直流动，可以使用柔性框使任何流中的元素。如果您使用的是水平柔性盒，并且希望您的内容垂直换行，那么还要指定wrap值。

然后，对于您想要成为flex flow的一部分的每个元素，请设置flex属性。通常你会想使用以下三个值之一：

如果您想要一个只占用其分配宽度的元素，如按钮，请使用flex: none扩展到0 0 auto...

如果要显式调整元素的大小，请使用flex: 0 0size例如：flex 0 0 60px...

如果您想要一个扩展到填充可用空间的元素，即如果流中有多个此类元素，则使用相同的共享空间。flex: auto.它扩展到1 1 auto...

当然还有其他的可能性，但是这应该包括基本的用例。让我们来看几个例子。

将页面中的元素居中

对于这种情况，最简单的做法是创建两个 flexible box，一个在另一个之内。每个flexbox将有三个元素：其中两个填充居中元素，然后是居中元素本身。

CSS内容

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.horizontal-box {
  display: flex;
  flex-flow: row;
}
.spacer {
  flex: auto;
  background-color: black;
}
.centered-element {
  flex: none;
  background-color: white;
}

HTML内容

<div class="vertical-box">
  <div class="spacer"></div>
  <div class="centered-element horizontal-box">
    <div class="spacer"></div>
    <div class="centered-element">Centered content</div>
     <div class="spacer"></div>
  </div>
  <div class="spacer"></div>
</div>

结果

垂直流动一组容器

想象一下，你有一个页面布局的页面部分，内容部分和页脚。页眉和页脚应该有一个固定的大小，但内容应根据可用空间调整大小。这可以通过设置内容的flex属性auto和flex页眉的属性，以及页脚来完成none。

CSS内容

.vertical-box {
  display: flex;
  height: 400px;
  width: 400px;
  flex-flow: column;
}
.fixed-size {
  flex: none;
  height: 30px;
  background-color: black;
  text-align: center;
}
.flexible-size {
  flex: auto;
  background-color: white;
}

HTML内容

<div id="document" class="vertical-box">
  <div class="fixed-size"><button id="increase-size">Increase container size</button></div>
  <div id="flexible-content" class="flexible-size"></div>
  <div class="fixed-size"><button id="decrease-size">Decrease container size</button></div>
</div>

JavaScript内容

var height = 400;
document.getElementById('increase-size').onclick=function() {
  height += 10;
  if (height > 500) height = 500; 
  document.getElementById('document').style.height = (height + "px");
}

document.getElementById('decrease-size').onclick=function() {
  height -= 10;
  if (height < 300) height = 300; 
  document.getElementById('document').style.height = (height + "px");
}

结果

这个例子已经设置好，点击标题会增加尺寸，点击页脚会减小尺寸。观察内容如何自动调整大小，同时保持页眉和页脚大小不变。

创建一个折叠的水平容器

在某些情况下，您可能希望在屏幕大小允许的情况下水平放置一组信息，但水平地将内容折叠到不存在的位置。使用flexbox这非常简单。您可以通过将wrap值添加到flex-flow属性来完成此操作。

CSS内容

.horizontal-container {
  display: flex;
  width: 300px;
  flex-flow: row wrap;
}
.fixed-size {
  flex: none;
  width: 100px;
  background-color: black;
  color: white;
  text-align: center;
}

HTML内容

<div id="container" class="horizontal-container">
  <div class="fixed-size">Element 1</div>
  <div class="fixed-size">Element 2</div>
  <div class="fixed-size">Element 3</div>
</div><button id="increase-size">Increase container size</button><button id="decrease-size">Decrease container size</button>

JavaScript内容

var width = 300;

document.getElementById('increase-size').onclick=function() {
  width += 100;
  if (width > 300) width = 300; 
  document.getElementById('container').style.width = (width + "px");
}

document.getElementById('decrease-size').onclick=function() {
  width -= 100;
  if (width < 100) width = 100; 
  document.getElementById('container').style.width = (width + "px");
}

结果

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18