Align text to 3 edges in CSS-CodePudding

I have this html structure

<body>
<div >
    <span >Name</span>
    <span >Python</span>
    <span >RU|ENG</span>
</div>
</body>

body{
    max-width: 943.61px;
    margin: 0 auto;
}

How can I align name to the left, about_me to center, and language to the right of the parent tag?

CodePudding user response：

You need to make .home into a flex container and set justify-content: space-between. This makes it so that the children is distributed along the length of the flexbox in the flex direction.

.home {
  /* just for demo */
  width: 100%;
  background-color: pink;


  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

<body>
<div >
    <span >Name</span>
    <span >Python</span>
    <span >RU|ENG</span>
</div>
</body>

A Complete Guide to Flexbox is a good resource on how to use flex in css.

CodePudding user response：

An other solution with flexbox and text-align (just to be different from @cSharp)

body {
    max-width: 943.61px;
}

.home {
    display: flex;
}

span {
    flex: 1;
}

.about-me {
    text-align: center;
}

.language {
    text-align: right;
}

<body>
<div >
    <span >Name</span>
    <span >Python</span>
    <span >RU|ENG</span>
</div>
</body>