How to Use Flexbox

Flexbox is a newer CSS3 web layout model which allows responsive elements within containers to be arranged vertically or horizontally. It is much more powerful and easy to use than previous techniques involving floats or display: inline-block to position items.

Flexbox is currently supported by all modern browsers.

Centering a Div

Using Flexbox it is very easy to center anything vertically and horizontally. Just make sure the containing div has a set height or else the vertical alignment isn’t going to work. * For all these examples I will be applying more CSS than indicated for purposes of presentation. Only the CSS relevant to flexbox will be listed.

HTML

  <div class='flexbox-wrapper'>
    <div>LEVON</div>
  </div>

<div>LEVON</div>

</div>

CSS

  .wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
  }

.wrapper {

display: flex;

justify-content: center;

align-items: center;

height: 100%;

}

LEVON

In this example we apply display: flex to the parent container and we also set justify-content: center and align-items: center.

Using flex-direction

One of the more confusing aspects of Flexbox is the use of justify-content vs. align-items. These two properties are related to the flex-direction property. This can be set as flex-direction: row or flex-direction: column. The default is flex-direction: row which causes items to arrange horizontally (similar to having a float applied). While flex-direction is set to the row default, the justify-content property will arrange items horizontally and align-items will arrange items vertically. But if flex-direction is set to column then this becomes reversed, and justify-content will arrange items vertically and align-items will arrange items horizontally. It is useful to think of this in terms of the ‘primary-axis’ and ‘secondary-axis’ – justify-content will always affect the ‘primary-axis’ and align-items will always affect the ‘secondary-axis’. Bye default the ‘primary-axis’ is horizontal. Setting the flex-direction property to column lets you switch the primary and secondary axis.

The justify-content property

The justify-content property allows you to precisely position elements along the primary axis. To demonstrate justify-content and the default behavior of flexbox, observe the following simple navigation example with different justify-contentproperties applied to it.

HTML

  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Testimonials</a></li>
    <li><a>Jobs</a></li>
  </ul>

<ul>

<li><a>About</a></li>

<li><a>Testimonials</a></li>

</ul>

flex-start (Default)

    ul {
      display: flex;
      //justify-content: flex-start;
    }

ul {

display: flex;

//justify-content: flex-start;

}

Flex-End

    ul {
      display: flex;
      justify-content: flex-end;
    }

ul {

display: flex;

justify-content: flex-end;

}

Center

    ul {
      display: flex;
      justify-content: center;
    }

ul {

display: flex;

justify-content: center;

}

Space-Around

    ul {
      display: flex;
      justify-content: space-around;
    }

ul {

display: flex;

justify-content: space-around;

}

Space-Between

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

ul {

display: flex;

justify-content: space-between;

}

Basic Responsive Layout

Flexbox makes it very easy to create a simple responsive layout. If you divide your site into three areas (header, content, footer) – you can use flex-direction: column to arrange these items vertically. In this case adding flex: 1 to the content div causes it to stretch to fill up the remaining space, and push the footer to the bottom of the page (assuming the containing div has a height of 100%). You could also apply margin-bottom: auto to the content div or margin-top: auto to the footer to achieve the same effect.

HTML

<div class='container'>
<header>Levon</header>
<div class='content'>
Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus velit.
</div>
<footer>
  Copyright Levon 2017
</footer>
</div>

<header>Levon</header>

Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus velit.

</div>

</footer>

</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}
.content {
  flex: 1;
}

.container {

display: flex;

flex-direction: column;

}

.content {

flex: 1;

}

Levon

Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus velit.

You can make a similar layout including a sidebar. In this example we use a media query to position the sidebar below the content when the device width is below a certain amount using flex-direction: column-reverse. This also illustrates how you can next different instances of display: flex and switch between different flex-direction values. In this example I use margin-bottom: auto instead of flex: 1 since the latter would cause the content div to move to the bottom of the screen when using flex-direction: column-reverse. You can test this in your browser by shrinking the width. * You are already seeing the column layout if your are viewing on a mobile device.

HTML

<div class='container'>
  <header>Levon</header>
  <div class='content'>
    <sidebar>
      <ul>
        <li><a>About</a></li>
        <li><a>Contact</a></li>
        <li><a>Testimonials</a></li>
      </ul>
    </sidebar>
    <div class='text'>
      Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus.
    </div>
  </div>
  <footer>
    Copyright Levon 2017
  </footer>
</div>

<header>Levon</header>

<ul>

<li><a>About</a></li>

<li><a>Contact</a></li>

<li><a>Testimonials</a></li>

</ul>

</sidebar>

Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus.

</div>

</footer>

</div>

CSS

.container {
  display: flex;
  flex-direction: column;
}
.content {
  display: flex;
  margin-bottom: auto;
}
@media(max-width: 768px) {
  .content {
    flex-direction: column-reverse;
  }
}

.container {

display: flex;

flex-direction: column;

}

.content {

display: flex;

margin-bottom: auto;

}

@media(max-width: 768px) {

.content {

flex-direction: column-reverse;

}

Levon

Vivamus consectetuer hendrerit lacus. Aliquam eu nunc. Mauris sollicitudin fermentum libero.Phasellus accumsan cursus.

Flexbox with React Native

While React Native doesn’t technically use CSS, you are able to style your apps in a very similar fashion, writing a JavaScript object which closely resembles CSS. The spec flexbox has been imported, and it is usually the basis for any layout in React Native. There are a few differences while using flexbox in React Native.
1) You don’t need to use display: flex – everything is flex by default.
2) Since React Native is used for mobile devices flex-direction: column is the default. This means that justify-content and align-items will be reversed.
Other than that it will function pretty much as it would in CSS. Here is an example of some JavaScript used in React Native to output styles with flexbox:

JS

const defaultStyles = StyleSheet.create({
    outerWrap: {
        flex: 1,
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    textWrap: {
        flex: 1,
    }
});

const defaultStyles = StyleSheet.create({

outerWrap: {

flex: 1,

alignItems: 'center',

justifyContent: 'space-between',

textWrap: {

flex: 1,

}

});