在flexbox的中间水平对齐两个范围

Question

I have a div (flex) containing 2 spans that I want to be aligned like this .

What I have now is this

Code:

<div className="MemberLinks">
      <div>
        <span className="linkTitle">Schedule of Benefits</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
      <div>
        <span className="linkTitle">General Exclusions</span>
        <span>
          <a href="./manifest.json">
            doc.pdf
          </a>
        </span>
      </div>
    </div>

css:

.MemberLinks {
margin-top: 1em;
display: flex;
flex-direction: column;
}
.linkTitle {
display: inline-block;
margin: 0 .6em 0 0;
}

I want to accomplish horizontally alligned spans in the midle of them, so it stays formatted like there was a even space between elements

Answer 1

I don't think you need to use flex to achieve this effect.

What I've done is removed the flex, set the span s to have 50% width, then set the text-align property to right for the first span .

 .MemberLinks { margin-top: 1em; } .MemberLinks span { display: inline-block; width: 50%; padding: 0 0.1em; box-sizing: border-box; } .MemberLinks span:first-of-type { text-align: right; } 

 <div class="MemberLinks"> <div> <span class="linkTitle">Schedule of Benefits</span><span> <a href="./manifest.json"> manifestdoc.pdf </a> </span> </div> <div> <span class="linkTitle">General Exclusions</span><span> <a href="./manifest.json"> otherdoc.pdf </a> </span> </div> </div>