Using flexbox with angular 2 components

Question

I want to update visual side(grid, colors) of my angular 2 application. Old layout was build with bootstrap 4, which I don\'t really need anymore. I decided to go for plain css3

Answer 1

The angular team released their own flex-layout package, so you don't need to write it by your self anylonger:

https://github.com/angular/flex-layout

Answer 2

I fixed this issue by adding styles to component. For example:

:host {
  display: flex;
}

:host {} was the key.

Answer 3

:host selector solves the problem but you end using it very often in many components.

I used instead the following global CSS:

.row > * {
  display: flex;
  flex-basis: 100%;
}