CSS3 Flexible Boxes display：flex

最新推荐文章于 2024-03-13 15:34:28 发布

玫瑰余香fly

最新推荐文章于 2024-03-13 15:34:28 发布

阅读量1.4k

点赞数

分类专栏：最新html5 最新css3 文章标签： css html5 css3

最新css3 同时被 2 个专栏收录

8 篇文章 0 订阅

订阅专栏

Flexible Boxes来了

老的和新的Flexible Boxes

Flexible Boxes是有点让人摸不到头脑，因为在几个浏览器中实现Flexible Boxes模块有好几个版本。CSS-Tricks在《"Old" Flexbox and "New" Flexbox》做了一个简短的解释，告诉我们不同的版本可用以及如何认出他们。特别声明：这篇文章是关于Flexbox的最新版本（使用的是"display:flex"）。

Flexible Boxes是什么？

现在，最好的方法是通过实例来解释某些东西，所以，我们将使用flex来创建一个完整的布局。为了让我们避免任何阻碍级的事情，一切都会使用flex来创建伸缩容器和伸缩项目。

看看接下来会发生什么：CSS3 Flexible Boxes

上图来自于W3C，有关于Flexible Boxes术语的标识。

首先，在这里你要有一些概念，我们将更好的理解：

<div class="flex-container"> <!-- 这个是伸缩容器 -->
  <div class="flex-item">1</div> <!-- 这个是伸缩项目 -->
 
  <div class="flex-item">2</div>
 
  <div class="flex-item">3</div>
 
  <div class="flex-item">4</div>
</div>

这只是一个包含四个div标签的容器，为了让们能够灵活性适应宽度，我们需要添加一些CSS3样式：

.flex-container {
  /* Chrome下的写法 */
 
  display: flex;
}
 
.flex-item {
  -webkit-flex: 1;
 
  flex: 1;
}

可以通过CodePen但看上面代码运行的效果。

正如您所看到的，当给一个容器设置了“display:flex”，这个容器就变成了伸缩容器，而这个容器的子元素就变成了伸缩项目。伸缩项目总是会尽量的配合伸缩容器，自动的适配伸缩容器的宽（如果是行的话）或者自动适配伸缩容器的高（如果是列的话）。你是否希望伸缩容器是一行或者一列，你可以使用“flex-flow:column”属性来设置。最后每一个伸缩项目具有一个弹性属性（上面的例子是flex:1）。有了flex属性可以让伸缩项目填补多余的空间（或收缩不足的空间）来填充整个伸缩容器。

每一个伸缩容器被定义为两个轴（主轴和侧轴），但仅这两个轴往往是不够的。为了更能准确性了解这些弹性盒子，我们创建一个完整的布局实例来说明，以及回答大多数大家想知道的问题。

使用Flexible Boxes创建一个完整的布局

这里使用了HTML5的结构

<div class="flex-container"> 
  <header>
    Header
  </header>
 
  <div class="flex-area">
    <section>
      <article class='featured-article'>
        First Article
      </article>
 
      <article>
        Second Article
      </article>
 
      <article>
        Third Article
      </article>
    </section>
 
    <aside>
      Sidebar
      <div class="box"></div>
      <div class="box"></div>
      <div class="box"></div>
    </aside>
  </div>
 
  <footer>
    Footer
  </footer>
 
</div>

如果要将这个结构变成一个布局，我们需要添加一些CSS。我们将制作一个典型的布局，宽屏的页眉和页脚，一个中间容器，这个中间容器包括两列（主内容列和侧边栏列），并且主内容列将有特色的文章置顶，其他两篇文章放在下面分两列并排显示；侧边栏有三个box并列显示：

.flex-container {
  -webkit-flex-flow: column;
  display: flex;
  flex-flow: column;
}
 
header,
footer {
  -webkit-flex: 0px 0px 100px;
  flex: 0px 0px 100px;
}
 
.flex-area {
  -webkit-flex-flow: row;
  -webkit-flex: 3 1 auto;
  display: flex;
  flex-flow: row;
  flex: 3 1 auto;
}
 
section {
  -webkit-flex-flow: row wrap;
  -webkit-flex: 4 1 auto;
  display: flex;
  flex-flow: row wrap;
  flex: 4 1 auto;
}
 
article {
  -webkit-flex: 1 35%;
  flex: 1 35%;
}
 
.featured-article {
  -webkit-flex: 2 1 100%;
  flex: 2 1 100%;
}
 
aside {
  -webkit-flex-flow: column;
  -webkit-flex: 0px 0px 240px;
  display: flex;
  flex-flow: column;
  flex: 0px 0px 240px;
}
 
.box {
  -webkit-flex: 1;
  flex: 1;
}

在CodePen可以看到上面示例的效果。

看看接下来会发生什么：CSS3 Flexible Boxes

上图就是这个布局示例的效果。

我们在示例中添加了少量的代码，比如说背景和间距等，使例子清晰一些。现在我们一步一步来分析这个CSS代码，让我们能更清晰的了解发生了什么：

首先我们需要将几个容器变成伸缩容器，我们的主容器是一个定义了类名为“flex-container”的div元素，因此我们使用前面介绍的方法，在这个元素中定义一个“display:flex”。这样一来，“div.flex-container”下的所有子元素(header、div.flex-area和footer)都变成了伸缩项目。然后我们想要伸缩项目从上到下的分几行排列，所以在这个伸缩容器中还定义了一个“flex-flow:column”。
给页眉和页脚设置一个固定的高度。通过“flex”属性我们决定他们按下面的形式来表现：第一个“0”意味着我们不想让它扩展（flex-grow:1），第二个“0”意味着我们不想让它收缩（flex-shrink:0），最后一个值“100px”是收缩基准值（flex-basis）。
接下来将“div.flex-area”元素设置为另一个收缩容器，所以我们也在这个元素上设置了“dislpaly:flex”。注意，这个非常好设置了“flex”属性后也变将对应的变成了伸缩容器，而其子元素也对应的变成了伸缩项目。在这个例子中，我们将其收缩基准值(flex-basis)设置为“auto”，因为我们希望它能在主内容区内扩展任何空间，在不收缩太多的情况下扩展足够大的空间，主要出发点他们是主要内容。
flex-area伸缩容器具有两个伸缩项目：<section>和<aside>，我们希望他们能从左到右相互依靠在一起，因此我们在“flex-area”伸缩容器上设置了“flex-flow”的值为“row”。同时我们也希望侧边栏有一个固定的宽度“240px”，而<section>相对于剩余的空间进行扩展或者收缩填充。因此，我们为每个伸缩项目设置了一个明确的flex属性值。
<section>伸缩项目也需要变成伸缩容器，因此我们也要将其设置为“display:flex”。这次我们希望他的伸缩项目能从左到右排列，但同时也希望他们超过一行时能自动换行，所以我们设置了“flex-flow”为“row wrap”。我们希望有“特色的文章（article.featured-article）”能置顶显示，而其他的两列等宽的显示，所以我们给所有的<article>设置了“flex”值为“1”(flex-grow)，并且希望这两要大于33%,小于50%为基础。我们选择了35%，然后让余下的空间自己灵活处理。
对于特色文章，我们前面说了想置顶整行显示在主内容区域内，至于扩展还是收缩我们让用户来进行决定，所以我们把他的收缩基准值(flex-basis)设置为“100%”。
最后侧边栏应该保持为一组框，将做为一个主菜单，所以我们重复上述过程。这一次我们不希望使用一个基准收缩值，便是每个伸缩项目必须自动填充所有侧边栏空间。

这是一个非常简单的布局，适合屏幕提供适量的内容。尽管如此，在小型设备下浏览，侧边栏可能会导航一些不能看到的问题，所以我们需要借助媒体查询来使它得到充分响应。

Flexbox也可以通过一些参数设置伸缩项目是否在一行或一列。

媒体查询和Flexible Boxes响应不同尺寸

虽然我们的做了很多工作，但我们的布局还不是很友好，仍然需要添加几个媒体查询来适应不同设备。

首先我们想让侧边栏显示在页眉下面，然后是主内容，接着是页脚，同时减少页眉和页脚的高度，我们应该这样做：

@media only screen and (max-width:640px) {
 
  .flex-area { 
    -webkit-flex-flow: column; 
    flex-flow: column; 
  }
 
  header, 
  footer, 
  aside {
 
    -webkit-flex: 0px 0px 50px; 
    flex: 0px 0px 50px; 
  }
 
  aside { 
    -webkit-flex-flow: row; 
    -webkit-order: 1; 
    flex-flow: row; 
    order: 1; 
  }
 
  section { 
    -webkit-order: 2; 
    order: 2; 
  } 
}

如果用户使用一个更小的设备，两列文章中部分将被丢失显示不出来，所以我们要添加另一个媒体查询，创建一个完全垂直站点，以适应420px或者更小的设备

@media only screen and (max-width:420px) {
 
  section { 
    -webkit-flex-flow: column; 
    flex-flow: column; 
  }
 
  article { 
    -webkit-flex: 1; 
    flex: 1; 
  } 
}