chap13

css - the complete guide/13. adding_flexbox_to_our_project.md

@@ -1 +1,94 @@
-# Adding Flexbox To Our Website
+# Adding Flexbox To Our Website
+
+## Understanding Flexbox
+
+It allows us to change the way our elements are displayed.
+
+To use flex box we can add the `display` property with value `flex` to an element, and that element will now be turned into a **flex container**.
+
+Inside our **flex container**, we will add different elements, which are also called **flex items**.
+
+Once we add the `flex` construct we can add different properties to the parent (**flex container**) and the children (**flex items**).
+
+| Parent Properties | Children Properties |
+| --- | --- |
+| `flex-flow` | `...` |
+| `justify-content` | `order` |
+| `align-content` | `flex` |
+| `align-items` | `align-self` |
+
+
+## Creating A **Flex Container**
+
+When you apply the `display: flex;` property to a parent element, all children inside that element will be displayed in a single row by default.
+
+We can also use `display: inline-flex`, which as the name suggests turns the parent into a flex container but itself is an inline element.
+
+### Using `flex-direction` And `flex-wrap`
+
+`flex-direction` has the default value `row`. Changing its value to `column` would display all the items in a single column or vertically. We also have `row-reverse` and `column-reverse` values for this property which display the items in the reverse order.
+
+`flex-wrap` has the default value `nowrap`. If we change it's value to `wrap`, the overflown elements will jump to the next row. We also have also value `wrap-reverse`, which does the same as `wrap` but in the reverse order, that is the first element would jump to the next row if we reduce the width.
+
+We also have a shorthand these two properties, which is `flex-flow`, e.g. `flex-flow: row wrap;`.
+
+### Understanding The Importance Of Main Axis And Cross Axis
+
+The **main axis** if we apply the property `flex-direction: row;`, starts from top left with direction towards right, and the **cross axxis** is top left to bottom. 
+
+For `flex-direction: column;`, the **main axis** would be from top left to bottom, and the **cross axis** would be from top left to right.
+
+We have two other values for `flex-direction` property, that are `row-reverse` and `column-reverse`, which has the same axis as `row` and `column` values but have opposite directions.
+
+### Working With `align-items` & `justify-content`
+
+With `align-items` we can align our elements along the **cross axis**. The default value for this property is `stretch`. Other values are `center`, `flex-start`, `flex-end`, `baseline` etc.
+
+To align items along the **main axis**, we use the property `justify-content`.
+
+To see the available values, go to [link](https://developer.mozilla.org/en-US/docs/Web/CSS/align-items) for `align-items`, and [link](https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content) for `justify-content`.
+
+
+### What About The `align-content`
+
+The last property to look at for the **flex container** is `align-content`. It is also used to align our items along the **cross axis** but for **multiline flex containers**, so it is used to determine the spacing between multiline container and has no effect for a single line flex container.
+
+
+## Flex Items
+
+We can use different properties on flex items like `order`, `flex` (shorthand for `flex-grow`, `flex-shrink` and `flex-basis`) and `align-self`, to have impact on a single item.
+
+
+### Understanding The `order` Property
+
+The `order` property changes the order of an item inside the flex container, the default value is `0`. We can change its value to `1` or `-1` to move the flex item to end or front of other items, based on the main axis. Or we can also use other numbers to order the items accordingly.
+
+
+### Working With `align-self`
+
+Like the flex container property `align-items`, we use `align-self` also to position the element in **cross axis**, but instead of all the items it is used to position a single flex item. We can use the same `flex-start`, `flex-end`, `center` etc as values.
+
+
+### Understanding The `flex-grow`
+
+The `flex-grow` property also has an initial value of `0`. By applying `flex-grow: 1;` to a flex item, the element will fill the available space. 
+
+If we add `flex-grow: 4;` to another flex item, then the available width will be divided into 5 parts, 1/5th for the item with `flex-grow: 1;`, and 4/5th for the item with `flex-grow: 4;` applied.
+
+If a flex item with `flex-grow: 1;` moves to a new line, it'll take the whole available space because that line won't have any other flex item to share the availabe space.
+
+
+### Applying `flex-shrink`
+
+It defines the behavior as we decrease the `width`. By default decreasing the width would make flex items to shrink to a point where the items content requires the width.
+
+The default value for `flex-shrink` is `1`. If you change it to `0`, then the flex item won't shrink below it's defined `width`.
+
+We can also control the ratio by which the items shrink relatively, e.g. applying `flex-shrink: 1;` to an item and `flex-shrink: 4;` to another item will make this item shrink 4 times more than the first one.
+
+
+### Comparing `flex-basis` vs `width` & `height`
+
+`flex-basis` defines the size of an element depending on the **main axis**. It is used to override the `width` or `height` properties depending on the main axis. It has the default value of `auto`.
+
+For example, adding `flex-basis: 300px;` to a flex item with main axis set as `row`, it'll override the `width` property. And likewise for an item with main axis from top to bottom it'll override the `height`. 

css - the complete guide/14. using_css_grid.md

@@ -0,0 +1,2 @@
+# Using The CSS Grid
+