Angular 2 CSS FlexBox – Flexible Box

FlexBox is a good way to lay out our elements (e.g. <div>), align them and/or distribute the space between our elements. We can use the FlexBox with Angular 2 to make our layouts flexible.

FlexBox is a container. This container can change the order (height/width) of its elements, to find the best fill of the free space.

angular 2 flexbox 1
angular 2 flexbox 1

If it’s your first time with Angular 2, Please check our hello world (step by step + npm and environment setup) tutorial here. To be able to run this example.

angular 2 flexbox 2
angular 2 flexbox 2

 

Step 1

We write our Component: angular-2-css-flexbox.component.ts

Inside our Component we link to our CSS file using the configuration attribute: styleUrls

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';

@Component({
    selector: 'angular-2-css-flexbox',
    template:`
            <div class="demo">
                <h2 class="primary">{{title}}</h2>
                <div class="mother">
                            <div class="achild" style="background-color: #1d2120">Child A</div>
                            <div class="achild" style="background-color: #5a5c51">Child B</div>
                            <div class="achild" style="background-color: #ba9077">Child C</div>
                            <div class="achild" style="background-color: #bcd5d1">Child D</div>
                </div>
            </div>
        `,
    styleUrls: ['./src/css/angular-2-css.css'],
})
export class Angular2CssFlexBoxComponent {
    public title = 'Angular 2 CSS FlexBox';
}

Step 2

We write our Css File: angular-2-css.css

Please read the explanation inside the css file.

 

.mother {
    display: flex;
    flex-flow: row wrap;/* it's the same as => flex-direction: row ; flex-wrap: wrap;*/
    /*
     flex-direction: can accept 4 parameters :
     row            => left to right (with ltr)
     column         => the same this as row but Top to Buttom
     row-reverse    => right to left (with ltr)
     column-reverse => the same this as row-reverse (bottom to top)

     flex-wrap:
     wrap         => multi-line, left to right (with ltr)
     nowrap       => no new line.
     wrap-reverse => multi-line, right to left (with ltr)
    */
     justify-content: space-around; /*it helps with the distribute of extra free space*/
    /*
     accepts 5 parameters :
      flex-start    => elements grouped to the start of the line
      flex-end      => elements grouped to the end of the line
      center        => elements centred
      space-between => first element to the start line / the end element to the end line
      space-around; => equality distribution
    */
    align-items: flex-end;/*align element to an extremity*/
    /*
    flex-start => Top
    flex-end   => Bottom
    center     => Center
    baseline   => as Baseline
    stretch    => stretch with the respect of min/max (width)
    */

    height: 220px;
    background-color: #00b3ee;
}
.achild {
    width: 100px;
    height: 100px;
    margin: auto;
    align-self: flex-start ;/* override the mother configuration*/
    /*
      auto, flex-start, flex-end, center, baseline, stretch;
    */
}
.demo {
    color:white;
    font-size: xx-large;
    text-align: center;
}
.primary {
    color:#e6e6e8 ;
}
angular 2 flexbox 3
angular 2 flexbox 3
angular 2 flexbox 4
angular 2 flexbox 4

Step 3

We call our Component : angular-2-css-flexbox.app.ts

 

/**
 * Created by Tareq Boulakjar. from angulartypescript.com
 */
import {Component} from 'angular2/core';
import {Angular2CssFlexBoxComponent} from "./angular-2-css-flexbox.component";


@Component({
    selector: 'my-app',
    template: `
                <angular-2-css-flexbox>loading...</angular-2-css-flexbox>
               `,
    directives: [Angular2CssFlexBoxComponent]
})
export class Angular2CssFlexBoxApp {

}

Step 4

We bootstrap the application : main.ts

 

import {bootstrap} from 'angular2/platform/browser';
import {Angular2CssFlexBoxApp} from "./css/flexbox/angular-2-css-flexbox.app";
bootstrap(Angular2CssFlexBoxApp);

 

angular 2 flexbox 5
angular 2 flexbox 5

Done !