How to Align One Element to The Right and One Element to The Left Inside a Containing Element

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>

Center one element and right-align another on the same row

You can efficiently accomplish this task with CSS Flexbox.

#topjob {  display: flex;                /* make container a flexbox */  justify-content: center;      /* center child elements ("flex items") */  position: relative;           /* establish nearest positioned ancestor for                                   absolute positioning. */}#left {  width: 500px;  height: 50px;  background: #ff0000;}#right {  width: 100px;  height: 50px;  background: #00ff00;  position: absolute;            /* remove box from the normal flow */  right: 2%;                     /* position to the right */}#left > ul,#right > ul {  display: flex;                /* will align flex items (li) in a row by default */  justify-content: flex-start;  /* align li's starting from the left edge */  list-style-type: none;  padding: 0;}#left > ul li,#right > ul li {  margin: 10px;}

<div id="topjob">  <div id="left">    <ul>      <li><a href="#"><i class=""></i>LOGIN</a></li>      <li><a href="#"><i class=""></i>REGISTER</a></li>    </ul>  </div>  <div id="right">    <ul>      <li>        <a href="index.html">          <img src="images/mastercard.png" alt="Sample Image">        </a>        <li>          <a href="index.html">            <img src="images/visa.png" alt="Sample Image">          </a>    </ul>  </div></div>

How do I right align div elements?

You can make a div that contains both the form & the button, then make the div float to the right by setting float: right;.

Center one and right/left align other flexbox element

Below are five options for achieving this layout:

CSS Positioning
Flexbox with Invisible DOM Element
Flexbox with Invisible Pseudo-Element
Flexbox with flex: 1
CSS Grid Layout

Method #1: CSS Positioning Properties

Apply position: relative to the flex container.

Apply position: absolute to item D.

Now this item is absolutely positioned within the flex container.

More specifically, item D is removed from the document flow but stays within the bounds of the nearest positioned ancestor.

Use the CSS offset properties top and right to move this element into position.

li:last-child {  position: absolute;  top: 0;  right: 0;  background: #ddd;}ul {  position: relative;  padding: 0;  margin: 0;  display: flex;  flex-direction: row;  justify-content: center;  align-items: center;}li {  display: flex;  margin: 1px;  padding: 5px;  background: #aaa;}p {  text-align: center;  margin-top: 0;}span {  background-color: aqua;}

<ul>  <li>A</li>  <li>B</li>  <li>C</li>  <li>D</li></ul><p><span>true center</span></p>

CSS: align two element, to the left and right in the same line WHITHOUT floats

You can use some flexbox magic:

h1 {  display: flex;  justify-content: space-between;}

<h1>  <span>Align me left</span>  <a href="">align me right</a></h1>

Left align one element and center another element in div

Absolute position the facebook icon. Make sure you leave enough padding to the left of the p element to account for it (so that the p text doesn't overlap it). Make the padding is equal on both sides to make sure you p text doesn't overlap and it's still perfectly horizontally centered inside .panel-footer

.panel-footer {  text-align: center;  position: relative;}
.panel-footer .fa-facebook {   position: absolute;   left:0;   /* vertically center the icon */   top: 50%; transform: translateY(-50%);}
.panel-footer p {  font-size: medium;  padding: 0 20px; /* leave space for the icon adjust this value depending on how big your icon is */}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"><div class="panel-footer">  <a href="https://www.facebook.com/pg/facebook" target="_blank" class="fa fa-facebook"></a>  <p>This website is made by ME!</p></div>

Flutter align two items on extremes - one on the left and one on the right

Use a single Row instead, with mainAxisAlignment: MainAxisAlignment.spaceBetween.

new Row(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: [
    new Text("left"),
    new Text("right")
  ]
);

Or you can use Expanded

new Row(
  children: [
    new Text("left"),
    new Expanded(
      child: settingsRow,
    ),
  ],
);