Best way to develop a flexbox grid?

Asked

Viewed 189 times

2

I have doubts with the display:flex, thinking of a grid system as would be the container, row and the column.

For example the container would have the property display:flex? And how to organize the row and the column?

html css css3 web-application grid

1 answer

1


Lennon, I started using more display:flex in css as a means to replace the float, which greatly helped the usability of the page itself.

Well first let’s understand how the display flex, he is done for the purpose of getting to leave any div position in any direction and can have flexible dimensions to adapt. 

<div style="display:flex;height: 100px;width: 400px;">
     <div style="background:#FFFF00;width: 150px;"></div>
     <div style="background:#FF00FF;width: 150px;"></div>
     <div style="background:#FFFF00;width: 150px;"></div>
     <div style="background:#FF00FF;width: 150px;"></div>
</div>

The orientation of how the elements from within the div who has the display flex other attributes of the css, in the case of horizontal and vertical orientation if the flex-wrap:wrap where you change direction to vertical

<div style="display:flex;height: 100px;width: 400px;flex-wrap:wrap;">
     <div style="background:#FF00FF;width: 150px;"></div>
     <div style="background:#FFFF00;width: 150px;"></div>
     <div style="background:#FFFF00;width: 150px;"></div>
     <div style="background:#FF00FF;width: 150px;"></div>
</div>

Well for a start I think we can already understand, follows an article from tableless how it works displays flex-ply http://tableless.com.br/flexbox-organizando-seu-layout/ .

I hope I’ve helped and remember that flex is not yet an accepted attribute in all browsers so you need to use prefixes like -webkit-, -moz-, -ms-, -o-.

Browser other questions tagged html css css3 web-application grid

You are not signed in. Login or sign up in order to post.