利用flex实现的二级导航栏_flex二级菜单-优快云博客

本文链接：https://blog.youkuaiyun.com/colorfulqq/article/details/79886331

本文探讨了Flex布局的出现背景，指出其在解决复杂网页布局问题上的灵活性。作者分享了选择Flex布局而非float来编写导航栏的原因，强调Flex布局在兼容性和易用性上的优势。文章还介绍了Flex的主要属性，包括display、flex-flow、justify-content、align-items、order和align-self，并给出了实际的导航栏代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Flex布局的出现是为了什么

在我自己看来，flex布局的出现是为了让我们在处理一些较小且较为复杂的网页布局而出现的，这种布局方式很灵活，容器内的子元素能够按照任意的布局方式进行相应的排列。

为什么我要采取flex的方式来写导航栏的原因

在没接触flex布局之前，我写导航栏都是利用float来写，其中有些很麻烦的地方，清除浮动什么的都是很扎心的一些操作，还会有一些兼容方面的问题，但是flex布局比较方便，当下大多数主流的浏览器都会支持这个属性。

flex简介(简述一些主要的属性和用处)

1.display（flex container）表示你要采用flex布局了
display: other values | flex | inline-flex;
2.flex-flow（flex container) 是flex-direction和flex-wrap的简写，可以同时定义主轴和侧轴
flex-flow: <‘flex-direction’> || <‘flex-wrap’>;
3.justify-content（flex container）定义里面伸缩元素的左右对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
4.align-items（flex container）定义里面元素上下对齐方式
align-items: flex-start | flex-end | center | baseline | stretch;
5.order（flex items）可以控制伸缩项目在他们的伸缩容器出现的顺序,最低为0。
order: <integer>
6.align-self（flex items）用来在单独的伸缩项目上覆写默认的对齐方式
align-self: auto | flex-start | flex-end | center | baseline | stretch;
以上就是flex的主要一些属性