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

从 “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 代码

```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 代码```HTML

### 标签页 [Demo](http://www.flexboxpatterns.com/tabs)![image](http://www.flexboxpatterns.com/images/thumbs/tabs.png)同理，使用 `display: flex` 也可以实现这种标签页效果。CSS 代码```CSS.tabs {  /**   * Setting display to flex makes this container lay   * out its children using flexbox, the exact same   * as in the above "Stepper input" example.   */  display: flex;  border-bottom: 1px solid #D7DBDD;}.tab {  cursor: pointer;  padding: 5px 30px;  color: #16A2D7;  font-size: 12px;  border-bottom: 2px solid transparent;}.tab.is-tab-selected {  border-bottom-color: #4EBBE4;}

HTML 代码```HTML

Tab 1

Tab 2

Tab 3

Tab 4

_译注：tab 的切换效果可以通过纯 CSS 实现，可以参考 [CSS trick for tabs without javascript demo](http://poppinlp.com/demos/tabs-without-javascript.html)_### 站点头部 [Demo](http://www.flexboxpatterns.com/site-header)![image](http://www.flexboxpatterns.com/images/thumbs/siteHeader.png)你可以把这种组件作为网站或者 webapp 的顶部。要构建这种组件，典型方法是把 logo 和导航按钮包裹在一个容器，设置按钮放在另一个容器中。然后，使用 `float` 把两个容器方别推向两边。紧接着，你要对整个顶部元素清除浮动。对于一个简单布局而言，这也太复杂了。如果使用弹性盒子，你依然需要容器元素，但是你不需要为容器添加特定的样式了，因为 flexbox 已经让父元素来负责布局了。除开 `display: flex` 属性外，我们还需要另外两个属性来调整布局：* `justify-content: space-between` 让容器左右分开成为了可能。这个属性把 logo 和导航按钮推向了左边，把设置推向了右边。* `align-items: center` 讲主轴上的元素垂直居中对齐。这个属性很重要，因为 logo 和导航按钮高度不同，如果不设置该属性，它们默认会对齐上边沿。```CSS.siteHeader {  /**   * Lay out the children of this container with   * flexbox, which is horizontal by default.   */  display: flex;  /**   * Make the container put as much space as possible   * between its children, with the children at either   * end laying flush against the container's edges.   */  justify-content: space-between;  padding: 10px;  background-color: #56727C;}.siteHeader__section {  /**   * Lay out the children of this container with   * flexbox.   */  display: flex;  /**   * Align the children in the center, along   * the main axis. By default the children will   * align along their top edges.   */  align-items: center;}.siteHeader__item {  padding: 5px 15px;  font-size: 12px;}.siteHeader__item + .siteHeader__item {  margin-left: 5px;}.siteHeader__item.is-site-header-item-selected {  color: #FFFFFF;  background-color: #415F69;  border-radius: 4px;}.siteHeaderLogo {  font-size: 20px;  line-height: 0;  color: white;}.siteHeaderButton {  cursor: pointer;  color: #D9E9EF;}

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

更新时间：2022-11-17 阅读：39次