gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Added info about CSS Flexbox as update to float (#33918)

Browse Source
This commit is contained in:
Megan Bailey
2018-12-12 19:21:13 -05:00
committed by Randell Dawson
parent 5c1935d121
commit 15704be277
1 changed files with 5 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
guide/english/html/layouts/index.md
View File

@ -26,6 +26,11 @@ If you are to design a 2-column based page with left navigation pane and center
<!-- Examples needed --> <!-- Examples needed -->
#### CSS Flexbox
This is a more recent CSS update that helps avoid issues that 'float' can have, as 'float' was never meant to work as a layout attribute. CSS Flexbox allows users to designate parent containers, giving that container formatting and layout attributes. This is done by definitng 'display: flex;' in the parent container. The user can then add child items to that container. Based on whether the comtainer aligns by rows or columns, the child items will be automatically positioned. Flexbox also makes it incredibly simple to truly center align content. It also makes responsive web design much easier.
[Example Webpage using CSS Flexbox only for layout](https://codepen.io/mbailey83/pen/vVPMwL)
#### CSS Frameworks #### CSS Frameworks
This is where CSS Frameworks such as [Bootstrap](http://getbootstrap.com/) and [Materialize](http://materializecss.com/) come in. These frameworks provide a grid functionality that lets to divide each section of your webpage into 12 columns, which you can order to design. This is where CSS Frameworks such as [Bootstrap](http://getbootstrap.com/) and [Materialize](http://materializecss.com/) come in. These frameworks provide a grid functionality that lets to divide each section of your webpage into 12 columns, which you can order to design.