【译】使用弹性布局写出10种常用的UI组件_html/css_WEB-ITnose

Flexbox 样式

让我们来看看如何使用 CSS3 的弹性布局写出 10 种常见的 UI 组件。

翻译自 Flexbox Patterns

目录

从 "display: flex" 属性开始

Flexbox CSS 的基础属性就是 display: flex ，只需要给元素添加这个属性，你就用上了弹性布局了。就这么简单！

你也许会问，这个属性起了什么作用？默认情况下，它指定了容器中的子元素沿主轴（main axis）排列，主轴默认是水平方向的。

接下来，我们会用两个实例来介绍这个属性是如何用在我们的 UI 组件的。

步进计数器 Demo

我们要介绍的第一个例子是步进输入框组件。当绑定 JavaScript 代码之后，点击 + / - 号，输入框中的值将会对应增加 / 减少。

译注：此处计数器的实现也可以使用 CSS Counters 来代替 JavaScript，具体例子可以参考 使用 CSS 的 counter-increment 做的游戏 。

按照以往的思路，你可能会选择用 display: inline-block 或者 float: left 来实现这种内联样式。然而，这样做的话，你还需要给这些元素统统添加特定的选择器。让我们使用弹性盒子吧，只需要往容器添加 display: flex 属性，就可以实现相同的效果了。

当你添加这个属性时，相当于对元素说：“嘿伙计，你就负责按照 flexbox 的规则排列你的子元素就好了！”。在最基本的形式下，元素沿主轴（main axis）排列，默认就是 x 轴，从左到右。

CSS 代码

.stepperInput {  /**   * Setting display to flex makes this container lay   * out its children using flexbox. By default, it    * orders items horizontally, top-aligned.   * This has a similar effect to setting the children   * to have display: inline-block.   */  display: flex;}.stepperInput__input {  border-left: 0;  border-right: 0;  width: 60px;  text-align: center;}.button {  cursor: pointer;  padding: 5px 15px;  color: #FFFFFF;  background-color: #4EBBE4;  font-size: 12px;  border: 1px solid #16A2D7;  border-radius: 4px;}.button--addOnLeft {  border-top-right-radius: 0;  border-bottom-right-radius: 0;}.button--addOnRight {  border-top-left-radius: 0;  border-bottom-left-radius: 0;}.input {  border: 1px solid #D7DBDD;  padding: 0 10px;  border-radius: 0;  box-shadow: none;} 

HTML 代码

   -       +

      
查看更多关于【译】使用弹性布局写出10种常用的UI组件_html/css_WEB-ITnose的详细内容...
        

          
声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://www.haodehen.cn/did114760