Editing Responsive design (section)

= Flexible grids: Flexbox =

https://www.hexadesigns.in/blog/wp-content/uploads/2018/12/flexbox-vs-grid.png


==Flexbox Intro==
The flexbox, is a one-dimensional layout model to '''organize items, in one dimension''', either as a row or as a column. (For 2 dimension layout check the property <code>display: grid</code>)

Based on: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox

==Flexbox Basics==
'''Follow the example in https://codepen.io/PublicationStation/pen/NWWgovQ'''

Flexbox works with a set of '''items in a container''', where the container has 
<code>display: flex</code>

* container: groups flex items together and define how they’re positioned. 
* flex items: main purpose are to let their container know how many things it needs to position. Flex items can be manipulated individually, but for the most part, it’s up to the container to determine their layout.

We can indicate if we want to organize the items as rows or columns; with
<code>flex-direction: column;</code> or <code>flex-direction: row;</code>

Note however that when setting <code>flex-direction: row;</code> 
* all items will appear in 1 row.
* all items will be resized to fit the screen width.

To have more control over how many items appear in 1 row and the width of each item, 
we can:
* let the flex items '''wrap onto multiple row''' <code>flex-wrap: wrap;</code>
** <code>flex-wrap: no-wrap;</code> will force them onto a single row.
* set a minimum with for each item <code>flex: 300px ;</code>


==Flexbox align-items==
https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

<code>align-items:</code> Controls where the flex items, with different sizes sit, vertically, in relation to one another. 
  
commons values:
* stretch
* center   
* start
* end

==Flexbox other options== 
<code>flex-basis:</code> specifies the initial main size of a flex item.

<code>order:</code> to changes the order of individual elements


==Flexbox tutorials==
* https://css-tricks.com/snippets/css/a-guide-to-flexbox/
* https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
* https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties


----