css flexbox模型_使用Flexbox的技巧，以获得更好CSS模式

css flexbox模型

如果您是几年前开始编写CSS的，那么您很有可能已经习惯了一些不可避免CSS布局怪癖。 例如，在相对定位的元素内使用绝对定位的元素，或将clearfix与浮点数结合使用以实现列网格。

直觉上，我们都认为应该有更好的方法。 毕竟，使用display:table;进行垂直居中的最佳解决方案有点奇怪display:table; 及相关样式。 我们为什么要使用黑客手段使基本功能正常工作？

灵活盒模块，或Flexbox的简称，是新兴的解决方案，我们的许多过去的困境，以及适合的设计模式，已成为流行的主机。 flexbox的基本思想是允许包含元素的框调整大小并重新排序这些元素，从而以适当的方式最适合容器。

当前支持

Flexbox并非一定要用于整个站点。 CSS网格规范正在努力解决该问题，但不幸的是，它的状态仍然比flexbox少得多，flexbox在除Opera Mini之外的所有浏览器中至少都有部分支持 。 相比之下，CSS网格规范仅由IE完全支持，而所有其他浏览器均不支持或不支持。

Flexbox旨在用于布局的离散部分。 在本文中，我们将介绍一些可以通过flexbox更有效地执行的常见任务，并说明如何实现特定结果的语法。 要获得所有属性选项的全面概述，请查看“ flex box A Guide to Flexbox”上CSS Tricks文章。

更好的居中

在Flexbox之前，动态内容的垂直居中不是一件容易的事。 （有关完整的故事，请参见Smashing Mag文章以及CSS-Tricks文章 。）使用flexbox，一切都变得更加容易。 我们将建立一个带有子元素的基本容器。

<div class="container">
  <div class="center-all">Testing vertical center</div>
  <div class="center-all">A secondary test</div>
  <div class="center-all">Tertiary is for three</div>
</div>

我们的目标是将这些元素垂直和水平居中。 使用flexbox，它就像下面这样简单：

.container {
  width: 500px;
  height: 500px;
  margin: 0 auto;
  background-color: #dedede;
  /* Flex rules */
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

注意：我们没有使用供应商前缀版本，但您应该使用！ 另外，看看Autoprefixer 。

我们刚刚完成的工作

您会注意到这里应用了一些陌生的新规则； Flexbox是一个包含许多属性的模块。 首先， display:flex创建我们的flexbox容器，其子元素会自动被视为flex项。

除非我们另外声明，否则我们的伸缩项将沿主轴内联。 但是， flex-flow （这是flex-direction和flex-wrap属性的简写形式）可以改变主轴和横轴。 flex-flow: column nowrap告诉flexbox我们希望我们的内容显示在垂直列中，并且我们不希望我们的项目包装（迫使它们跳到下一行）。

align-items: center将我们的商品相对于第二（“十字”）轴对齐。

视觉秩序与认知秩序

传统的布局方法存在一个固有的问题，尤其是在处理响应式内容时。 例如，当使用浮点数时，很容易以与自然或认知完全不同的顺序查看页面的内容。 而且，很难操纵页面上元素的顺序。 借助flexbox，我们将解决传统CSS较难实现的布局之一； 顶部对齐的元素的反向排列。 因此，换句话说， 首先出现在标记中的元素将出现在屏幕的最后 ，而将新元素添加到标记的底部将使它们出现在屏幕的顶部。

我们将使用以下标记：

<main>
  <div class="item">Here is the first item</div>
  <div class="item">Here is the next item</div>
  <div class="item">The third item</div>
  <div class="item">The fourth item</div>
</main>

使用以下CSS，我们可以轻松实现我们想要做的事情。

main {
  position: relative;
  height: 100%;
  display: flex;
  flex-flow: column-reverse nowrap;
  justify-content: flex-end;
  align-items: center;
}

这将给我们确切的目标。 在此处查看结果（添加一些其他样式以便于查看）。

我们刚刚完成的工作

通过在flex-flow上创建column-reverse，我们要求flexbox反转项目的顺序。 我们想将内容对齐到flexbox交叉线的末端，在反向列的情况下，该垂直线是从box底部到顶部的垂直线。

我们还设置了align-items:center以将列中的项目水平居中。 这对于任何类型的元素堆叠（认知顺序（从头到尾）与视觉顺序（从上到下）都不匹配）很有用。

进一步的订购操作

在很多情况下，您需要根据屏幕尺寸对元素进行重新排序。 解决此问题的常见方法通常是费解的，否则它们会重复标记。 看一下这个例子 ，在这里我们使用简单的order属性将特色图片从文章的流程移动到文章的开头。 我们使用以下HTML：

<main>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam eum repudiandae ullam ipsum repellendus officiis eaque unde aut ea porro accusamus placeat earum qui quia quidem totam harum odit voluptates?</p>
  <img src="http://lorempixel.com/200/200" alt="" />
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem provident voluptas commodi atque. Consequatur non natus earum nobis exercitationem sapiente dolorem explicabo asperiores soluta unde est voluptatibus fugit officia quo.</p>
</main>

以及随附CSS：

main {
  display: flex;
  flex-flow: row wrap;
}
img {
  flex-grow: 1;
  width: 200px;
  order: 3;
}
p {
  flex: 1 auto;
  order: 1;
  padding: 10px;
  background-color: #dedede;
  margin: 0;
}
p:nth-child(3){
  order: 2;
  flex: 3 0 50px;
}

@media only screen and (max-width: 600px){
  img {
    order: 1;
  }
  p {
    flex: 1 auto;
    order: 2;
    padding: 10px;
    background-color: #dedede;
    margin: 0;
  }
  p:nth-child(3){
    order: 3;
    flex: 3 0 50px;
  }
}

当谈到flexbox提供的强大功能来完成很少的几行代码时，这只是冰山一角，这通常很难实现。

没问题

您有多少次对100/3不可能做到这一点感到沮丧，然后又求助于创建99.9％宽度的列，只是为了意识到解决方案的糟糕程度？ Flexbox可以一劳永逸地解决此问题。 进行标记：

<div class="container">
  <div class="column">Testing</div>
  <div class="column">Testing</div>
  <div class="column">Testing</div>
</div>

并添加CSS，以使所有三列均显示为完美的计算结果。

.container {
  display: flex;
  justify-content: center;
  align-content: space-between;
  background-color: #dadada;
}
.column {
  width: 100%;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 10px #c0c0c0;
}

要一点水槽吗？ 没问题。 只需向您的.column类添加边距。 适当间距的计算已为您完成。

想要更多？

查看更多精彩示例的GitHub存储库“ Solved By Flexbox” 。 Flexbox是一个功能强大的模块，我们希望本文已对此进行了证明。 您在flexbox上还能看到哪些其他功能强大且令人兴奋的用例？ 让我们在评论中知道！

翻译自: https://webdesign.tutsplus.com/tutorials/tricks-with-flexbox-for-better-css-patterns--cms-19449

css flexbox模型