使用Flexbox调整导航栏元素间距 如何让搜索框宽度略大于标签元素

解决方案 #

你不需要使用flex-end属性实现需求，按以下步骤调整样式即可：

1. 调整TagsContainer样式，使用gap统一控制标签和搜索框的间距，不需要设置space-between：

const TagsContainer = styled.div`
    display: flex;
    width: 100%;
    margin-top: 15px;
    gap: 16px; /* 可根据设计稿调整数值，统一所有元素的间距 */
    align-items: center; /* 垂直对齐所有元素 */
`

2. 调整TagContainer样式，固定标签宽度，避免被挤压变形：

const TagContainer = styled.div`
    height: 100%;
    max-height: 40px;
    opacity: .8;
    text-align: center;
    flex-shrink: 0; /* 禁止标签被压缩 */
`

3. 调整SearchContainer样式，取消自动占满剩余空间的flex-grow设置，手动设置宽度略大于标签即可：

const SearchContainer = styled.div`
    color: white;
    border: 1px solid black;
    min-height: 40px;
    height: 100%;
    flex-shrink: 0;
    width: 110px; /* 比标签的80px min-width大30px，可根据设计稿调整 */
    /* 如果需要搜索框在窗口宽的时候可以适当延展，可以加：
    flex-grow: 0.2;
    max-width: 150px;
    */
`

如果需要让搜索框始终靠最右侧，只需要在TagsContainer里的所有Tag外层包一个div，给这个外层div设置display: flex; gap: 16px;，再给TagsContainer加justify-content: space-between即可。

内容的提问来源于stack exchange，提问作者Ryan