如何右对齐伸缩项目?

是否有一种比使用绝对位置更灵活的方式来将“Contact”向右对齐?

.main { display: flex; } .a, .b, .c { background: #efefef; border: 1px solid #999; } .b { flex: 1; text-align: center; } .c { position: absolute; right: 0; } <h2>With title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div> <div class="b"><a href="#">Some title centered</a></div> <div class="c"><a href="#">Contact</a></div> </div> <h2>Without title</h2> <div class="main"> <div class="a"><a href="#">Home</a></div>  <div class="c"><a href="#">Contact</a></div> </div>

http://jsfiddle.net/vqDK9/

当前回答

很容易

.main {
    display: flex;
    flex-direction:row-reverse;
}

2017-11-16 21:48:04

其他回答

或者你可以使用justify-content: flex-end

.main { display: flex; }
.c { justify-content: flex-end; }

2018-03-06 11:04:02

将以下CSS类添加到样式表中:

.my-spacer {
    flex: 1 1 auto;
}

在左边的元素和你想要右对齐的元素之间放置一个空元素:

<团队类=“我的间隔”></span>

2018-11-15 18:43:38

'justify-content: flex-end'在价格框容器内工作。

.price-box {
    justify-content: flex-end;
}

2019-03-15 14:53:08

很容易

.main {
    display: flex;
    flex-direction:row-reverse;
}

2017-11-16 21:48:04

如果你需要一个项目左对齐(如标题)，但多个项目右对齐(如3个图像)，那么你可以这样做:

h1 {
   flex-basis: 100%; // forces this element to take up any remaining space
}

img {
   margin: 0 5px; // small margin between images
   height: 50px; // image width will be in relation to height, in case images are large - optional if images are already the proper size
}

下面是它的样子(上面的代码片段中只包含了相关的CSS)

2017-09-28 16:31:46

如何右对齐伸缩项目?

推荐文章

最新文章

标签