article

Action executed in 0.000

Switching from inline-block to flex

Holy Grail Layout by Mozilla

While disliking CSS floats, i though i achieved the nirvana of page layout by using display: inline-block. Then i found display: flex.

Both the left side navigation and the right side main content were inline-blocks with the left side width: 20% and the right side width: 80%. I just had to make sure there was no margin on these elements and there was no white space between the elements. So often i had code like this <div><div class='left'>menu</div><div class='main'>content</div></div>; or for forms like this: <div class='form_style'><label>name</label><div><input/></div></div>.

Now i'm using display: flex. It's pretty well supported among all browsers. It easy to support responsive layouts. I'm looking forward to finding and switching to a flex based grid.

Reference: Using CSS flexible boxes

Comments

none yet

Post a Comment

* indicates a required field
anonymous (If you want to identify yourself, please sign in first.)
required This field is required.

Max size is 2 MB, aspect ratio 3:4 width:height
required This field is required.
Please include a short description.
required This field is required.

480 characters remaining.
is public

(Use this field if you have to. 3000 characters remaining.)
1 quarter, 2 nickels, 2 pennies + 100

Trackback URL

http://derocher.org/~brian//trackback.php?ParentId=104892

form