如何右对齐弹性项目？

html CSS

TonyEvaL

2020-03-17

是否有比使用方法更灵活的“联系人”右对齐方式position: absolute？

.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="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>

http://jsfiddle.net/vqDK9/

第1890篇《如何右对齐弹性项目？》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共10个回答
樱小胖Mandy 2020.03.17

基于TetraDev的答案的 示例代码

右图： 

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <h1>Secure Payment</h1>
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
</div>

左图： 

* {
  outline: .4px dashed red;
}

.main {
  display: flex;
  flex-direction: row;
  align-items: center;
}

h1 {
  flex-basis: 100%;
  text-align: right;
}

img {
  margin: 0 5px;
  height: 30px;
}
<div class="main">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <img src="https://i.stack.imgur.com/i65gn.png">
  <h1>Secure Payment</h1>
</div>

飞云Tom小宇宙 2020.03.17

对于使用Angular和Flex-Layout的用户，请在flex-item容器上使用以下内容：

<div fxLayout="row" fxLayoutAlign="flex-end">

见fxLayoutAlign文档这里和全fxLayout文档在这里。

前端小宇宙 2020.03.17

“价格合理的内容：弹性端”在价格盒容器中工作。

.price-box {
    justify-content: flex-end;
}
LEY乐伽罗 2020.03.17

如果您需要将一项左对齐（例如标题），然后将多项右对齐（例如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
}

这就是它的样子（上面的片段中仅包含了relavent CSS）

在此处输入图片说明

小卤蛋猿阿飞 2020.03.17

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

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

在左侧的元素和想要右对齐的元素之间放置一个空元素：

<span class="my-spacer"></span>

小小古一 2020.03.17

一样容易

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

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

.main { display: flex; }
.c { justify-content: flex-end; }
阿飞GO 2020.03.17

如果要为此使用flexbox，则应该能够做到这一点（display: flex在容器上，flex: 1在项目上以及text-align: right在.c）：

.main { display: flex; }
.a, .b, .c {
    background: #efefef;
    border: 1px solid #999;
    flex: 1;
}
.b { text-align: center; }
.c { text-align: right; }

...或更可替代地（甚至更简单），如果不需要满足这些条件，则可以justify-content: space-between在容器上使用并text-align完全删除规则：

.main { display: flex; justify-content: space-between; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }

这是Codepen 上的演示，可让您快速尝试上述操作。

神奇Tony古一 2020.03.17

更加灵活的方法是使用auto左页边距（与在块格式化上下文中使用时相比，灵活项对自动页边距的处理有些不同）。

.c {
    margin-left: auto;
}

更新的小提琴：

.main { display: flex; }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { flex: 1; text-align: center; }
.c {margin-left: auto;}
<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="b"><a href="#">Some title centered</a></div>-->
    <div class="c"><a href="#">Contact</a></div>
</div>
<h1>Problem</h1>
<p>Is there a more flexbox-ish way to right align "Contact" than to use position absolute?</p>

小胖A 2020.03.17

干得好。设置justify-content: space-between柔性容器上。

.main { 
    display: flex; 
    justify-content: space-between;
  }
.a, .b, .c { background: #efefef; border: 1px solid #999; }
.b { text-align: center; }
<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="b"><a href="#">Some title centered</a></div> -->
    <div class="c"><a href="#">Contact</a></div>
</div>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android