LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

Update: See @tholex's fork for a better solution!

Aligning multiple items left and right using flexbox.

There is no flexbox property alone that can do this, but by calculating the relative widths of the items and using a few negative margins, one can achieve the desired effect.

CSS
*,
*:before,
*:after {
  box-sizing: border-box;
}

body {
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: 200;
}

h1,
h2 {
  font-weight: normal;
  text-align: center;
  margin-right: auto;
  margin-left: auto;
  max-width: 30em;
}

[class*="flex-container"] {
  background: #001F3F;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  font-size: 1.5em;
}
[class*="flex-container"] > div:nth-of-type(2) {
  margin-left: -25%;
  width: 25%;
}
[class*="flex-container"] > div:nth-of-type(3) {
  text-align: right;
  margin-right: -25%;
  width: 25%;
}
[class*="flex-container"] a {
  color: #fff;
  display: inline-block;
  text-decoration: none;
  padding: 1em;
  -webkit-transition: background-color 0.1s ease;
  transition: background-color 0.1s ease;
}
[class*="flex-container"] a:hover {
  background: #0074D9;
  text-decoration: underline;
}

.flex-container-2 > div:nth-of-type(2) {
  margin-left: -20%;
  width: 20%;
}
.flex-container-2 > div:nth-of-type(3) {
  text-align: right;
  margin-right: -20%;
  width: 20%;
}
.flex-container-2 > div:nth-of-type(4) {
  text-align: right;
  margin-right: -20%;
}
Host Instantly Drag and Drop Website Builder

 

Description

I've been searching for a way to align multiple items left and right using flexbox. There is no flexbox property alone that can do this, but by calculating the relative widths of the items and using a few negative margins, one can achieve the desired effect.
Term
Wed, 11/29/2017 - 11:20

Related Codes

Pen ID
Pen ID
Pen ID