Best way to develop a grid with flexbox?

Question

Best way to develop a grid with flexbox?

Navigation

#1 by (1 votes)

2

I have doubts with display:flex , thinking of a grid system like container , row and column .

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

html css css3 grid

asked by anonymous 23.11.2016 / 14:33

1 answer

How to change Wordpress .htaccess via FTP CollapsingToolbarLayout change and leave transparent

score 1 · Accepted Answer

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

First of all let's understand how display flex works, it's done for the purpose of letting any div position itself 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 within the div that has the display flex is given by other attributes of the css, in the case of horizontal and vertical orientation is by flex-wrap:wrap where you change the 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 you've got an understanding of what's in the tableless section of how displays works in flex link .

I hope I have 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- .