文章/答案/技术大牛

发布

社区首页 >问答首页 >Flexbox Nav菜单

问Flexbox Nav菜单
EN

Stack Overflow用户

提问于 2015-03-05 16:59:22

回答 1查看 275关注 0票数 0

我正在尝试创建一个导航菜单，其中一个(或更多)项目被钉在左边。

我尝试过使用align-self: flex-start;，但除非设置了flex: 1;，否则它不会改变，在这种情况下，项目将填充所有剩余的空间，我不希望这样做。

HTML：

<ul>
   <li class="left">1</li>
   <li>2</li>
   <li>3</li>
   <li>4</li>
</ul>

我想要这个：

| [ 1 ]            [ 2 ] [ 3 ] [ 4 ] |

或

| [ 1 ] [ 2 ]            [ 3 ] [ 4 ] |

不是：

| [ 1            ] [ 2 ] [ 3 ] [ 4 ] |

或

| [ 1 ] [ 2            ] [ 3 ] [ 4 ] |

我想要的效果将与类left一起应用，因为当前所有项都是justify-content: flex-end;。

css

flexbox

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-03-05 17:17:25

您要做的是将margin-left:auto;添加到您的第一个右对齐元素中。这将把该元素和所有下一个元素推到右边。

nav {
    background:#d8d8d8;
    display:flex;
    padding:1px;
}

a {
    background:white;
    margin-right:1px;
    padding:3px;
}
a.start_right { margin-left:auto; } 
a:last-child { margin-right:0; }

<nav>
    <a href='#'>Link 1</a>
    <a href='#' class='start_right'>Link 2</a>
    <a href='#'>Link 3</a>
    <a href='#'>Link 4</a>
</nav>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28883445

复制

相似问题

问Flexbox Nav菜单
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox Nav菜单EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Flexbox Nav菜单
EN