How to Right-Align Flex Item

How to Right-align flex item?

A more flex approach would be to use an auto left margin (flex items treat auto margins a bit differently than when used in a block formatting context).

.c {
    margin-left: auto;
}

Updated fiddle:

.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>

Align the content of the div to the right in a flex

Just use margin-left: auto on the element you want shoved to the side. Inside a flex container anything with an auto margin on any side will push it to the farthest opposite side.

.song {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: 1px solid red;
  padding: 10px
}

.song-name {
  padding: 10px;
  display: flex;
  align-items: center;
}

.song-action {
  padding: 10px;
  margin-left: auto;
  color: red;
}

<div class="song">
  <div class="album-cover">
    <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y" />

  </div>
  <div class="song-name">
    Song name
  </div>
  <div class="song-action">
    Add to library
  </div>
</div>

How can I align one item right with flexbox?

To align one flex child to the right set it withmargin-left: auto;

From the flex spec:

One use of auto margins in the main axis is to separate flex items
into distinct "groups". The following example shows how to use this to
reproduce a common UI pattern - a single bar of actions with some
aligned on the left and others aligned on the right.

.wrap div:last-child {
  margin-left: auto;
}

Updated fiddle

.wrap {  display: flex;  background: #ccc;  width: 100%;  justify-content: space-between;}.wrap div:last-child {  margin-left: auto;}.result {  background: #ccc;  margin-top: 20px;}.result:after {  content: '';  display: table;  clear: both;}.result div {  float: left;}.result div:last-child {  float: right;}

<div class="wrap">  <div>One</div>  <div>Two</div>  <div>Three</div></div>
<!-- DESIRED RESULT --><div class="result">  <div>One</div>  <div>Two</div>  <div>Three</div></div>

How to align button right in a flex container?

Floats do not work in a flex container

Use align-self:flex-end instead

.faq {
  padding: 12px 20px;
  display: block;
  box-sizing: border-box;
  width: 50%;
  margin: auto;
  margin-top: 30px;
}

.outerDiv {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  margin-top: 20px;

  background-color: yellow;
}

.save {
   align-self:flex-end;
  background-color: red;
}

<div class="outerDiv">
    <h2>New FAQ</h2>
    <input type="text" class="faq">
    <br>
    <button class="save" mat-raised-button color="primary">Primary</button>
</div>

text-align right in flexbox

align-items: flex-end; will align the <p> elements to the right side of the container, but only if the container's width is greater than the children's width.

div {  width: 200px;  display: flex;  flex-direction: column;  align-items: flex-end;  box-sizing: border-box;  border: solid red 3px;}
p {  width: 100px;  text-align: right; // you might also want to use this so that your text is aligned to the far right side.  box-sizing: border-box;  border: solid lime 3px;}

<div>  <p>Testing 1...</p>  <p>Testing 2...</p>  <p>Testing 3...</p>  <p>Testing 4...</p></div>

How to align the first two elements on the left and the last on the right with display flex

Remove space-between and add margin-left:auto to the relevant icon.

.icon_item {
    display: flex;
  
}

.icon_item:after {
  font-family: fontAwesome;
  content: '\f107';
  margin-left:auto;
}

.icon_item.visible:after {
  font-family: fontAwesome;
  content: '\f068';
}

.icon_item:before {
 font-family: fontAwesome;
 content: '\f1ec';
 margin-right: 10px;
 width: 22px;
 height: 22px;
 display: flex;
 align-items: center;
 justify-content: center;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.1.1/css/all.min.css">

<div class="btnDrop">
 <span class="icon_item">Calculator</span>
</div>

How to align left for Item1 and align right for Item2 & Item3 with MUI React?

<Stack direction="row" spacing={1} divider={<Divider orientation="vertical" flexItem />} justifyContent='space-between'>
    <Box align='left'>
        <Typography>Summary</Typography>
    </Box>
    <Stack direction="row" justifyContent={"flex-end"} spacing={1}>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><DirectionsCarIcon /> {Math.round(totalDistance * 0.000621371192 * 10) / 10} Miles</Typography>
      </Box>
      <Box>
          <Typography sx={{ verticalAlign: 'middle', display: 'inline-flex' }}><AccessTimeIcon /> {totalDuration}</Typography>
      </Box>
    </Stack>
</Stack>

How to right align text inside a div for mutiline content using flexbox

Simply use text-align: right;

.wrapper {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.col-md-3 {
  flex: 0 0 25%;
  max-width: 25%;
}

.col-md-9 {
  flex: 0 0 65%;
  max-width: 65%;
  margin-left: 20px;
}

.item-first-col {
  justify-content: flex-end;
  border: 1px solid blue;
  text-align: right;
}

.item-second-col {
  border: 1px solid blue;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

<div class="wrapper">
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>
  <div class="item-first-col col-md-3 d-flex">
    One line text
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
  <div class="item-first-col col-md-3 d-flex" style="font-weight: bold;">
    Here goes the text that fills two lines
  </div>
  <div class="item-second-col col-md-9 d-flex align-items-center">
    Second column text
  </div>  
</div>

How to Right-Align Flex Item