display:flex;.
+Any elements nested inside the flex container will be displayed according to any attributes given to it.
+
+
+
+**Example:**
+CSS CODE
+--------
+
+```css
+.container {
+ display: flex;
+ background: yellow;
+}
+.box {
+ background-color: brown;
+ width: 200px;
+ height: 200px;
+ box-sizing: border-box;
+ border: solid 1px black;
+ color: white;
+```
+HTML CODE
+---------
+```html
+Box 1
+Box 2
+Box 3
+Box 4
+display: flex; lays out the divs into a single horizontal row, along what is called the **main axis**, which runs horizontally from left to right. This is because the default direction of a flex container is flex-direction: row;. It is behaving in the same way as float: left;.
+
+The other flex direction is _column_, and its main axis runs vertically from top to bottom.
+The images below summarise the significance of the main axis, and they also show some alignment attributes.
+
+
+
+
diff --git a/guide/english/css/flexbox-flex-basis/index.md b/guide/english/css/flexbox-flex-basis/index.md
new file mode 100644
index 0000000000..36aa14391e
--- /dev/null
+++ b/guide/english/css/flexbox-flex-basis/index.md
@@ -0,0 +1,47 @@
+---
+title: Flex Basis
+---
+
+# Flex-basis
+
+To determine the initial width or height of a flex element along the main axis, we can use flex-basis: instead of width: or height:. flex-basis: is dynamic, so it can shrink or grow to fit inside the flex container.
+flex-basis: can be set as a value, e.g. 200px; 20vw; 50vh; or auto. Auto will assess the contents of the flex item and expand or contract with them. Example 1 shows a nested div with flex-basis: 20vw;, while the second and third use flex-basis: auto;.
+
+**Example 1:**
+```css
+.container {
+display: flex;
+flex-direction: row;
+justify-content: center;
+background-color: yellow;
+}
+.box {
+background-color: brown;
+flex-basis: 20vw;
+height: 200px;
+box-sizing: border-box;
+border: solid 1px black;
+color: white;
+}
+```
+```html
+flex-direction of the flex container. When there are multiple flex items in a container, the available space is shared among them to provided proportions. flex-grow: has no effect with static dimensions; use min-width:, min-height: or flex-basis:.
+
+Here’s an example with just one div in a flex container. Notice than min- is used with width and height to allow it to be affected. However, flex-grow: has not been applied in this instance.
+
+```css
+.container {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ background-color: yellow;
+}
+.box {
+ background-color: brown;
+ min-width:200px;
+ min-height: 200px;
+ box-sizing: border-box;
+ border: solid 1px black;
+ color: white;
+}
+```
+```html
+flex-grow: 1; applied to the .box class. With flex-grow: the div *grows* into the available space both sides of it.
+```css
+.box {
+ background-color: brown;
+ min-width:200px;
+ min-height: 200px;
+ box-sizing: border-box;
+ border: solid 1px black;
+ color: white;
+ flex-grow: 1;
+}
+```
+
+
+The value of 1 could have been any number because it only becomes significant when multiple flex items are allocated different proportions of free space. It is similar to cutting a cake into pieces, one piece is the whole cake, but if there are two people, they get (as close to) one equal piece each. Let’s take a look at that now.
+
+In this example, the classes box and box2 both receive 1 piece of the free space each (50%), an equal allocation. If the number were 15, they’d both receive 15 smaller pieces of the space.
+```css
+.box {
+ background-color: brown;
+ min-width:200px;
+ min-height: 200px;
+ box-sizing: border-box;
+ border: solid 1px black;
+ color: white;
+ flex-grow: 1;
+}
+.box2 {
+ display: flex;
+ min-width:200px;
+ min-height: 200px;
+ justify-content: center;
+ background: rgb(142, 213, 255);
+ align-items: center;
+ flex-grow: 1;
+}
+```
+```html
+flex-grow: 2;.
+```css
+.box2 {
+ display: flex;
+ min-width:200px;
+ min-height: 200px;
+ justify-content: center;
+ background: rgb(142, 213, 255);
+ align-items: center;
+ flex-grow: 2;
+}
+```
+
+
+This time, Box 2 receives twice as much free space as Box 1. Remember, it does not make Box 2 twice as wide. It is simply allocated twice as much free space. To use the cake analogy, Box 1 receives one piece of cake, while Box 2 receives two pieces.