Flexbox Align Items Horizontally

Flexbox: center horizontally and vertically

I think you want something like the following.

html, body {
    height: 100%;
}
body {
    margin: 0;
}
.flex-container {
    height: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.row {
    width: auto;
    border: 1px solid blue;
}
.flex-item {
    background-color: tomato;
    padding: 5px;
    width: 20px;
    height: 20px;
    margin: 10px;
    line-height: 20px;
    color: white;
    font-weight: bold;
    font-size: 2em;
    text-align: center;
}

<div class="flex-container">
    <div class="row"> 
        <div class="flex-item">1</div>
        <div class="flex-item">2</div>
        <div class="flex-item">3</div>
        <div class="flex-item">4</div>
    </div>
</div>

Centering content horizontally using flexbox

The property justify-content:center aligns the flex-items along the flex direction - use align-items:center- see demo below:

.container {  display: flex;  flex-direction: column;  width: 600px;  background-color: blue;  justify-content: center;  align-items:center;/*NEW*/}.item {  max-width: 500px;  width: 250px;/*NEW*/  height: 100px;  background-color: yellow;  border: 2px solid red;}

<div class="container">  <div class="item"></div>  <section class="item"></section>  <section class="item"></section>  <footer class="item"></footer></div>

Flexbox - align-self: flex-end horizontally

align-self: flex-end; only goes "column", in your case you have two options:

1. justify-content: space-between; on .container, fiddle

2. remove the align-self on both elements and use margin-left: auto; on .b, fiddle

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

.container {
  border: 2px solid;
  height: 500px;
  display: flex;
  flex-direction: row; 
}

.box {
  border: 1px solid;
  height: 200px;
  width: 50px;
}

.a {
  background-color: red;
}

.b {
  background-color: cyan;
  margin-left: auto;
}

EDIT

now that you edited your question to be 3 boxes you can have a look at this fiddle,

.a {
  background-color: red;
}

.b {
  background-color: cyan;
}

.c {
  background-color: deepskyblue;
  margin-left: auto;
}

---

Related Topics