什么是 CSS Flexbox
CSS Flexbox 是一种在 web 布局中使用的新的布局方式，它可以将容器中的元素进行排列，使得它们可以相对简便地适应于不同设备和屏幕大小。
Flexbox 的排列方式
Flexbox 拥有以下主要的排列方式：
flex-direction
flex-direction 属性定义了 flex 容器中的主轴方向。默认主轴方向为水平方向（ row ），也就是首先横向排列，之后再向竖向排列（轮廓为横轴，一行一行往下排列）。而通过设置 flex-direction 为 column ，则主轴方向变为竖直方向，也就是纵向排列。
justify-content
justify-content 属性定义了 flex 容器中的元素在主轴方向上的排列方式。属性值包括 flex-start 、 flex-end 、 center 、 space-between 、 space-around 五种不同的排列方式。
align-items
align-items 属性定义了 flex 容器中的元素在侧轴方向上的排列方式。侧轴方向即与主轴方向垂直的方向。属性值包括 flex-start 、 flex-end 、 center 、 baseline 、 stretch 五种不同的排列方式。
flex-wrap
flex-wrap 属性定义了 flex 容器中的元素是否可以换行。默认情况下，元素不可换行。而通过设置 flex-wrap 为 wrap ，则元素可以在不足一行的情况下换行排列。
Flexbox 制作导航栏
由于 Flexbox 具有很好的适应设备和屏幕大小的特性，因此在制作导航栏时也经常使用 Flexbox 来进行实现。下面是一个基于 Flexbox 的导航栏实例：
<ul class="navbar"> <li><a href="#">Home</a></li> <li><a href="#">About us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact</a></li> </ul>
-- -------------------- ---- ------- ------- - -------- ----- ---------------- -------------- ---------------- ----- ------- -- -------- -- - ------- -- - ------- - ----- - ------- -- - - ------ ----- ---------------- ----- -
如上代码，我们使用了 Flexbox 来布局导航栏。通过设置 .navbar 的 display 属性为 flex ，让 .navbar 成为一个 flex 容器。而设置 .navbar 的 justify-content 属性为 space-between ，确保元素在主轴方向上平均分布。同时，我们也设置了 .navbar li 的 margin 来增加元素之间的距离。
结论
CSS Flexbox 是一种非常便捷和灵活的布局方式，它可以让我们相对简便地适应于不同设备和屏幕大小。在制作导航栏时，我们可以使用 Flexbox 来让导航栏轻松适应不同的屏幕尺寸和设备类型。希望大家通过这篇文章能够更好地掌握 Flexbox 的使用方式，实现更加优秀的 web 布局效果。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67072811d91dce0dc8655a55