fix(guide): simplify directory structure

guide/english/css/layout/flexbox/flex-basis-property/index.md

@@ -0,0 +1,43 @@
+---
+title: Flex Basis Property
+---
+# Flex Basis 
+`flex-basis` property defines the size of the `flex-item` along the main axis of the flex container. The main axis is horizontal if `flex-direction` is set to `row` and it'll be vertical if the `flex-direction` property is set to `column`.
+
+## Syntax
+
+```css
+flex-basis: auto | content | <width> | <height>;
+```
+
+## flex-basis: auto
+
+`flex-basis: auto` looks up the main size of the element and defines the size. For example, on a horizontal flex container, `auto` will look for `width` and `height` if the container axis is vertical.
+
+If no size is specified, `auto` will fall back to `content`.
+
+## flex-basis: content
+
+`flex-basis: content` resolves the size based on the element's content, unless `width` or `height` is set through normal `box-sizing`.
+
+In both the cases where `flex-basis` is either `auto` or `content`, if main size is specified, that size will take priority.
+
+## flex-basis: <size>
+
+This is just as specifying `width` or `height`, but only more flexible. `flex-basis: 20em;` will set the initial size of the element to `20em`. Its final size will be based on available space, `flex-grow` multiple and `flex-shrink` multiple.
+
+The specification suggests use of `flex` shorthand property. This helps write `flex-basis` along with `flex-grow` and `flex-shrink` properties.
+
+## Examples
+Here is rows of individual flex containers and individual flex elements showing how `flex-basis` affects the `box-sizing`.
+
+![effect of flex-basis on horizontal axis](https://vijayabharathib.github.io/fcc_guide_images/css/properties/flex-basis-horizontal.png)
+
+When the `flex-direction` is `column`, the same `flex-basis` will control the `height` property. An example below,
+
+![example of flex-basis controlling height in a vertical container](https://vijayabharathib.github.io/fcc_guide_images/css/properties/flex-basis-vertical.png)
+
+#### More Information:
+Additional references on following pages:
+* CSS specification [level 1](https://drafts.csswg.org/css-flexbox-1/)
+* Mozilla Developer Network page on [flex-basis](https://developer.mozilla.org/en-US/docs/Web/CSS/flex-basis#content)

guide/english/css/layout/flexbox/flex-grow/index.md

@@ -0,0 +1,74 @@
+---
+title: Flex-grow
+---
+# Flex-Grow
+
+The flex-grow property is a flexbox property that allows you to specify the allocation of free space to containers within a flex-container. It provides a solution to all that unwanted space!
+
+It'll turn your container from this
+
+<img src = "https://i.imgur.com/lFJaBUfh.png">
+
+<b><h1>to this</h1></b>
+
+<img src = "https://i.imgur.com/4X8ITZih.png">
+
+What just happened?
+
+Well, we added two things to the css syntax.
+
+HTML
+
+```html
+<p class = "ten">1</p>
+<p class = "twenty">2</p>
+```
+
+CSS
+
+```css
+body {
+  display:flex;
+}
+
+p {
+  flex-grow: 1;
+}
+```
+
+Two things happened
+
+1. The parent container was converted into a flex-display by `display:flex`
+2. The remaining "free space" was then allocated among the remaining p containers in an equal ration since each has a flex-grow property of 1.
+
+What happens if we have p containers with different flex-grow properties?
+
+Let's see an example.
+
+First let's create two paragraphs and enable display: flex;
+
+<img src = "https://i.imgur.com/wPqUgsih.png">
+
+Notice a few things
+
+- The colour scheme is nice
+- There's some empty space to the right of the two boxes.
+
+That empty space is the "free space" that will be allocated to each of the different paragraphs later depending on their flex-grow properties.
+
+To see this in action, let's give the first one a class of "ten" and a flex-grow property of 1. Let's also give the second one a class of "twenty" and a flex-grow property of 2.
+
+<img src = "https://i.imgur.com/7n0V1G4h.png">
+
+Notice a few things
+
+1. The second one's size is not double that of the first one despite having a flex-grow property that is double that of the first.
+2. The entire space is filled. ( Some margins were added to the side to enable it to be seen more clearly. )
+
+As we resize the screen, we also find that the first one shrinks at twice the speed of the second one.
+
+<img src = "https://i.imgur.com/pa4grM8h.png">
+
+#### More Information:
+
+<!-- Please add any articles you think might be helpful to read before writing the article -->

guide/english/css/layout/flexbox/flexbox-direction/index.md

@@ -0,0 +1,36 @@
+---
+title: Flexbox Direction
+---
+## Flexbox Direction
+Now that you know what flexbox is, it's time to move on to how you can arrange content within a flex container. You can set this via <i>flex-direction</i>
+
+There are 4 ways to set the flex direction
+
+1. Row
+
+<img src = "https://css-tricks.com/wp-content/uploads/2013/04/flex-direction2.svg">
+
+The flex direction is set to row by default. This arranges all your content in a single row <b>without margins<b>. 
+
+2. Row-reverse
+
+<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681588.png">
+
+This reverses your content in the opposite direction. Originally it was going from left to right, now it's going right to left.
+
+3. column
+
+<img src = "https://i-msdn.sec.s-msft.com/dynimg/IC681589.png">
+
+This arranges your content in a single column from top to bottom. 
+
+4. column-reverse
+
+
+
+This arranges your content in a single column from bottom to top. 
+
+
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->

guide/english/css/layout/flexbox/index.md

@@ -0,0 +1,27 @@
+---
+title: Flexbox
+---
+## Flexbox
+Flexbox is a new way to structure content in CSS3. It provides a wonderful way to create responsive websites that work well across different screen sizes and order content.
+
+There are 3 simple steps to use flexbox.
+
+1. Convert parent container to a flex container by using <i>display:flex;</i> in the css section
+2. Adjust arrangement of different containers using <i>flex-direction</i>
+3. Adjust individual items by using properties like justify-content, align-items etc.
+
+The Flexbox Layout aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space.<br><br>
+<img src="https://cdn.css-tricks.com/wp-content/uploads/2011/08/flexbox.png" width="80%" height="auto" alt="flexUsage"><br><br>
+<ul>
+  <li><b>main-axis</b>: The main axis of a flex container is the primary axis along which flex items are laid out. Beware, it is not necessarily horizontal; it depends on the flex-direction property (see below).</li>
+  <li><b>main-start | main-end</b>The flex items are placed within the container starting from main-start and going to main-end.</li>: 
+  <li><b>main size</b>: A flex item's width or height, whichever is in the main dimension, is the item's main size. The flex item's main size property is either the ‘width’ or ‘height’ property, whichever is in the main dimension.</li>
+  <li><b>cross axis</b>: The axis perpendicular to the main axis is called the cross axis. Its direction depends on the main axis direction.</li>
+  <li><b>cross-start | cross-end</b>: Flex lines are filled with items and placed into the container starting on the cross-start side of the flex container and going toward the cross-end side.</li>
+  <li><b>cross size</b>: The width or height of a flex item, whichever is in the cross dimension, is the item's cross size. The cross size property is whichever of ‘width’ or ‘height’ that is in the cross dimension.</li>
+ </ul>
+
+#### More Information:
+<!-- Please add any articles you think might be helpful to read before writing the article -->
+<a href='https://medium.freecodecamp.org/an-animated-guide-to-flexbox-d280cf6afc35' target='_blank' rel='nofollow'>This is a great article</a> to read up to understand more about flexbox
+This is a highly recommended practical guide that illustrate the different flex properties applied to the flex container and th flex items:  <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">https://css-tricks.com/snippets/css/a-guide-to-flexbox/</a>