Flex Play

Playing with Flex

by Florin Pop

HTML

<div class="page">
    <header>This is the header</header>
    <div>
        <p>Lors ab quaerat itaqueLorem ipsum dolor sit amet, con fugiatbcaecoris nisi temporibus ab quaerat itaqueLorem ipsum dolortas fugiat beataeLorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt obcaecati corporis nisi temporibus ab quaerat itaque earum et eius excepturi perspiciatis veritatis rem iste voluptas fugiat beatae dolores illum animi. dolores illum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt obcaecati corporis nisi temporibus ab quaerat itaque earum et eius excepturi perspiciatis veritatis rem iste voluptas fugiat beatae dolores illum animi. earum et eius excepturi perspiciatis veritatis rem iste voluptas fugiat beatae dolores illum animi.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt obcaecati corporis nisi temporibus ab quaerat itaque earum et eius excepturi perspiciatis veritatis rem iste voluptas fugiat beatae dolores illum animi.</p></div>
    <footer>This is the footer</footer>
</div>

CSS

html, body {
    width:100%;
    height:100%;
}
* {
    margin:0;
    padding:0;
}

.page {
    width: 100%;
    height:100%;
    display: -webkit-flex; /* Safari */
    display: flex;
    flex-direction: column;
    text-align:center;
}

.page > * {  
    border: 1px solid black;
    width: calc(100% - 2px);
}

div {
    flex: 1 0 auto;
    display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}