受欢迎：
 在AWS上构建弹性系统：了解如何在AWS上设计和实现弹性、高可用性、容错的基础设施。

使用Flexbox创建垫片

由上的 

在flexbox上线之前，我是它的最大粉丝之一，但由于在Mozilla的混乱，我从未有机会在任何实践项目中使用它；因此，flexbox对我来说仍然有点神秘。这让我非常痛苦，因为我觉得自己被排斥在flexbox革命之外，尽管这些天我听到的感觉是flexbox变成了一个半身像，CSS网格是新的热点。

flexbox的一个令人敬畏的实用程序是垫片。过去的一个问题是将项目停靠在左侧，项目停靠在右侧，但需要混乱绝对位置才能实现这一点。使用flexbox，无需固定元素大小或JavaScript宽度计算即可轻松实现此效果。

HTML

让我们假设一个非常简单的结构，由一个家长、一个左右孩子和一个分隔符组成：

<div class=“parent”><div class=“left-buttons”><div class=“垫片”><div class=“right-buttons”></div>

垫片将是空的。

CSS

CSS将基于flexbox：

.父级{显示：flex；}.垫片{弯曲变形：1；}

关键是具有父级显示：柔性并且间距具有弯曲变形：1。无论左右两侧有多宽，垫片都会占据剩余的空间。如果左侧和右侧增长超过可用空间。。。然后事情就被推来推去了。

查看钢笔Flexbox垫片作者：David Walsh(@暗翼)上的代码笔.

Flexbox受到了不好的指责——旧的布局API太糟糕了，适度的升级仍然值得庆祝。无论如何，让我们庆祝一个简单的API，它允许我们创建这个我们一直想要的示例布局。

请求度量实际用户监控
请求度量实际用户监控
请求度量实际用户监控
请求度量实际用户监控

最近的功能

  • 由
    响应性和无限可扩展的JS动画

    早在2012年末，很难找到使用请求动画帧（）-这是一个钩子，允许Javascript代码与web浏览器的原生绘制循环同步。使用这种方法的动画可以以60帧/秒的速度运行，并提供了精彩的。。。

  • 由
    还有5个你没有的HTML5 API&#8217；t已知存在

    这个HTML5革命为我们提供了一些很棒的JavaScript和HTML API。一些是我们知道多年来一直需要的API，另一些是尖端的移动和桌面助手。无论API的强度或用途如何，任何能帮助我们更好地完成工作的东西都是。。。

令人难以置信的演示

  • 由
    使用MooTools或jQuery创建不透明度的性感持久头

    最近我一直在使用Magento电子商务解决方案，我很喜欢他们在管理控制面板中使用的顶栏技术。当用户滚动到指定阈值以下时，顶栏将附加到。。。

  • 由
    电话链路协议

    我们总是能够使用常规HTTP以外的协议创建链接，比如电子邮件、skype、irc等；它们对游客来说非常方便。随着手机浏览器变得越来越可用，我们现在可以将这种便利扩展到电话号码：这个电话...

讨论

  1. 伊恩·西蒙斯

    这不是吗justify-content:空间-中间是为了什么？所以你不需要间隔垫？否则，我认为你可以在左边的按钮上设置右边距div公司或将右侧按钮的左边距设置为汽车实现同样的目标…

  2. 克里斯蒂安·拉杜

    对于这个简单的情况，您甚至不需要间隔元素。只需添加justify-content:space-between；在父母身上。

  3. RonnieSan公司

    您还可以使用调整内容：间距所以你不必使用间隔元件。

  4. 丹·f

    就我个人而言，我会在第一个或第二个元素上选择左边或右边的边距。但我同意flexbox是超级酷！

  5. 大卫

    嗨，大卫（很棒的名字！；）），有了flexbox，你不需要垫片，只需添加边缘左侧：自动在右边的按钮上，它将填充空白，这是规格-https://www.w3.org/TR/css-flexbox-1/#auto-保证金

  6. 阿列克斯·胡多琴科夫

    无需垫片。

    解决方案1。

    justify-content:space-between；

    https://codepen.io/hudochenkov/pen/Vxwjbv

    解决方案2。

    边缘左侧：自动；

    在最后一项上：

    https://codepen.io/hudochenkov/pen/YLzWrq网站

  7. 大卫·奥利弗

    你好，大卫。您不需要间隔元素来实现这种理由，因为justify-content:space-between；，应用于flex容器。https://css-tricks.com/snippets/css/a-guide-to-flexbox/非常有帮助。

  8. 阿拉莫沃

    关于正当内容财产？不需要空的.垫片如果你设置为间隔层.

  9. 拉尔夫

    嗯……但为什么在这种情况下需要一个空的间隔舱，而有“justify-content:space-between”？

    .父级{显示：flex；justify-content:space-between；}
  10. 艾哈迈德

    空跳水不好。

    这可以通过以下方式实现justify-content:空间-中间在父级上：https://codepen.io/anon/pen/gzOGQp

    不要急于发布刚开始的内容；）

    • 布瑞恩

      恕我直言，我很高兴大卫“匆匆忙忙地”写了这篇文章。我很快就学到了一些关于flexboxes以及justify内容属性的知识。谢谢你们俩！

  11. Šime视频

    另一种方法是应用边缘左侧：自动到.右按钮元件*而不是使用间隔元件：

    https://codepen.io/simevidas/pen/KRKXGm？编辑器=1100

  12. Pawel Grzybek公司

    你好，大卫。

    根本不需要创建div。解决方案1：

    
  
  


    .父级{显示：flex；边框：1px纯红色；高度：100px；justify-content:space-between；}.左按钮{宽度：50px；背景：粉红色；}.右按钮{宽度：50px；背景：浅蓝色；}

    …和解决方案2：

    .父级{显示：flex；边框：1px纯红色；高度：100px；}.左按钮{宽度：50px；背景：粉红色；边缘-右侧：自动；}.右按钮{宽度：50px；背景：浅蓝色；}
  13. 拉斐尔

    您也可以使用伪元素制作间隔符，而不需要任何额外的div

    .父级{显示：flex；}.parent:：之前{弯曲变形：1；}.启动按钮{顺序：-1；}
  14. 拉斐尔

    （忘记了内容：“”在我最后的评论中）

将代码打包<pre-class=“{language}”></pre>标签，链接到GitHub要点、JSFiddle提琴或CodePen笔进行嵌入！