如何右对齐弹性项目？

一尘不染

如何右对齐弹性项目？

html

是否有比使用方法更灵活的“联系人”右对齐方式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/

阅读 222

2020-05-10

共1个答案

一尘不染

干得好。设置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>

2020-05-10