CODEWITHSUNDEEP
cssangulartypescript
Ratchet
Ratchet

Reputation: 283

Angular conflict with basic css

i am trying to do the below steps to have my grids as i want:

How to set auto-margin boxes in flexible-width design using CSS?

The solution that they offer here is nice, and its works if i put this code outside angular, but the problem is when i insert this inside angular component, for example app-root

if i put the below code, outside the component(inside the index.html) works, but in another componet not.

error

i thinks that some functionality of angualr is breaking my basic css code, because if outside of app-root components works and inside of it doesnt, but i dont have any style, is strange.

good

Upvotes: 0

Views: 363

Answers (1)

Ethan Vu
Ethan Vu

Reputation: 2987

I would suggest to use flex for layout instead. No tricks needed, flex support it all. Try this:

.container {
    border: 2px dashed #444;
    min-width: 800px;
    max-width: 1400px;

    /*No tricks needed, flex support it all*/
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    display: inline-block;  
}
<div class="container">
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
    <div></div>
</div>

Upvotes: 1

Related Questions