100-京东导航栏-插槽使用-弹性布局(display: flex；)

100-京东导航栏-插槽使用-弹性布局(display: flex;)

display:flex

这是一种布局方式。它即可以应用于容器中，也可以应用于行内元素。
Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。
设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。 

flex：1

即为flex-grow：1，经常用作自适应布局，将父容器的display：flex，侧边栏大小固定后，
将内容区flex：1，内容区则会自动放大占满剩余空间。 

justify-content: space-around;
均匀排列每个元素,每个元素周围分配相同的空间 

插槽的作用: 提高组件的复用性, 和组件的可扩展性(灵活性)

效果如下：