I am working with an angular project along with angular material. i want to use flexbox for controlling the layout.But i have encountered two types of implementation . First , directly adding the flex content as an attribute to the div tag or so . Second , declaring a separate css class in an css file. Is there any difference between the two?

I randomly tried some examples with both but they were not reflecting the same result.

First,

<div fxFlex flexLayout="row">
    //contents
</div>

Second ,

<div class="sample">
    //contents
</div>

//in css file
.sample
{
    display : flex;
    flex-directoin : row;
}

I want to if there is any notable difference between the two. If not , what is best to use?

1 Answers

0
trichetriche On Best Solutions

Using the attribute implies that you have installed the Angular flex layout library.

Using the style itself doesn't require any dependency (other than polyfills for older browsers).

There should be no difference between the end result of both.

The main differences are in the abstraction provided by the library : with it, you have access to more display options (space-around, space-evenly, space-between ...), you can use a gap between the elements, and you can easily implement breakpoints for your app.

But everything the library does can be implemented in flex boxes with CSS.