Flexbox 实战：使用 Flexbox 轻松实现下拉导航菜单

CSS3弹性盒子(Flexible Box 或 Flexbox)，是一种用于在页面上布置元素的布局模式，使得当页面布局必须适应不同的屏幕尺寸和不同的显示设备时，元素可预测地运行。对于许多应用程序，弹性盒子模型提供了对块模型的改进，因为它不使用浮动，flex容器的边缘也不会与其内容的边缘折叠。

浏览器对Flexbox的支持越来越好。使用它可以轻松实现一些复杂的UI用户界面，不需要任何的CSS或者是javascript的黑科技。

使用Flexbox可以轻松实现各种水平或者是垂直的布局，对于不同尺寸的屏幕，不需要很多的媒体查询就可以轻松做到自适应。

这篇教程，我们使用Flexbox来实现一个复杂一点的下拉导航菜单。当然这里不会花太多文字放在Flexbox的一些基本属性的介绍，Flexbox基本的介绍和使用可以去下面这些文章看看：

Flexbox Course by Guy Routledge

A Friendly Introduction to Flexbox for Beginners

A Complete Guide to Flexbox

下来看看我们要做的导航菜单，如下图所示：

demo地址
下载地址
主要用到了下面三个方面的知识：

1、使用Flexbox实现一个包含下拉菜单的水平方向导航栏

2、实现一个单栏的下拉菜单

3、实现一个多栏的下拉菜单

使用Flexbox实现一个水平菜单

导航菜单的结构非常简单，主要是由navbar和menu两个类结构组成。

< nav class = "navbar" >    < ul class = "menu" >      < li >        < a href = "#" >          Electronics          <!-- FontAwesome icon -->          < i class = "fa fa-angle-down" ></ i >        </ a >      </ li >        <!-- ... More nav items here... -->      < ul > </ ul ></ ul ></ nav >

首先导航菜单是水平方向的布局，我们期望的是每个导航栏目在没有足够的空间时，也能自动的根据空间来进行响应式适用。

这种布局使用Flexbox来实现再好不过了。首先要声明menu这个元素的flex属性，可以使用display:flex来声明，这样menu元素的所有子元素都具有来flex属性。

现在设置flex的值为1，即如果空间不足，该项目将缩小。

.navbar .menu {    display : flex;    position : relative ; }   .navbar .menu li {    flex: 1 ;    display : flex;    text-align : center ; }   .navbar .menu a {    flex: 1 ;    justify- content : center ;    color : #ffffff ;    padding : 20px ; }

从上面的代码可以看到，对于.navbar .menu li和.navbar .menu两个元素都设置了display:flex的属性。从demo可以看到，当鼠标滑过菜单选项的时候可以看到背景颜色发生了改变。如果不设置display的值为flex，那么li元素只会占据本身内容所占的宽度，而不是根据整个导航栏的宽度来平分了。

为了使导航菜单的子元素能根据父级元素的宽度来扩展自己的宽度，所以在li元素和a元素上都声明了flex:1属性，这样可以使子元素能占满整个宽度了。

目前导航栏的基本布局完成了，代码预览地址。
demo地址
下载地址
可以看到使用Flexbox可以非常轻松的完成这样类型的布局，而且简洁高效。

下面来实现下拉菜单这一项。

单栏下拉菜单

下面是下拉菜单的结构，当然它可以复用到其它地方。

< ul class = "container" >    <!-- single column -->    < div class = "container__list" >      <!-- menu item -->      < div class = "container__listItem" >        < div >Televisions</ div >      </ div >        <!-- ... other menu items here -->      </ div > </ ul >

类名为container是flex容器而且每一个子元素（containerlist）都是容器成员，即Flex项目。而且每一个**containerlist项目都有多个导航栏目，所以我使用了一个div**来包裹它。

下面是CSS代码：

.container {    /* initially hidden; display:flex on hover */    display: none;    position: absolute;    top: 56px;    left: 0;    right: 0;    background-color: #ffffff;    padding: 20px;    text-align: left; }   .container__list {    flex: 1;    display: flex;    flex-wrap: wrap; }   .container__listItem {    flex: 0 0 25%;    padding: 10px 30px; }   .container__listItem > div {    color: #DB6356; }

从上面代码可以注意到我在container__list容器上使用了flex-wrap属性，我们想它的宽度是占整个宽度的25%，当空间不够时，它就自动换行。

flex-grow属性定义项目的放大比例，我们设置它的值为0，即如果存在剩余空间，也不放大。

对于container__listItem元素，为了使文字太宽而影响布局的美观，需要做一下截断处理，比如超过指定的宽度，就显示省略号，可以使用下面的代码来实现：

.container__list {    flex: 1;    display: flex;    flex-wrap: wrap;    /* updated */    min-width: 0; }   .container__listItem {    flex: 0 0 25%;    padding: 10px 30px;    /* updated */    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis; }   .container__listItem > div {    color: #DB6356;    /* updated */    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis; }

实现多栏下拉菜单

在上面单栏菜单的基础上实现多栏菜单，就非常简单了。在这里，直接复用单栏菜单的结构即container__list的结构到菜单选项Appliances里面。当然这里只是简单的复制结构实现一个实例，在实际开发中，一般会使用到javascript来动态生成这些菜单选项。

这里会额外的增加一个has-multi类来区分开单栏与多栏的区别，并且来针对多栏菜单声明一些单独的属性的值。

.container.has-multi .container__list {    flex-basis: 33.333%; }   .container.has-multi .container__list:not(:last-child) {    border-right: solid 1px #f3f3f3;    margin-right: 20px; }   .container.has-multi .container__listItem {    flex-basis: 100%; }

这里指定了多栏菜单选项的flex-basis的值为33.333，即多栏菜单选项占据的宽度为33.333，这样可以显示为三栏菜单。

当然，这个菜单并不是完全是响应式的。在小屏幕上只是简单垂直显示选项，而且选项下的子菜单并没有显示，还有很多改进的余地。总之通过这一个下拉导航菜单的实例，可以充分的证明Flexbox这个属性在布局上的威力，这里只是抛砖引玉下，在实际开发中还有很多的实用的地方。

本文主要是从Building Mega Menus with Flexbox这篇文章整理而来，有删减，有疏漏或者理解不到位的地方，还请多多指教！

demo地址

原文地址：http://svgtrick.com/tricks/d172c31188f427a598b00148337a621d