From fe699cde79cd66dae9950f0dbd54844b501b7950 Mon Sep 17 00:00:00 2001
From: Rehab Ali <49806841+rehabas@users.noreply.github.com>
Date: Sat, 24 Oct 2020 13:56:23 +0300
Subject: [PATCH 1/5] Update flexbox.md
---
coursebook/Week 03/session-06/flexbox.md | 71 ++++++++++++++++++++----
1 file changed, 61 insertions(+), 10 deletions(-)
diff --git a/coursebook/Week 03/session-06/flexbox.md b/coursebook/Week 03/session-06/flexbox.md
index eb33b8e7..28768f67 100644
--- a/coursebook/Week 03/session-06/flexbox.md
+++ b/coursebook/Week 03/session-06/flexbox.md
@@ -5,6 +5,8 @@ flexbox is technique to layout,organize and distribute HTML elements in efficien
In flexbox, there are two main components you have to recognize them before start play around with flexbox which are **flex-container**, **flex-elements**
+
+
and there is something else you have to know before dive in flex box, as we said before flexbox is direction-agnostic so it works with the both direction and each one has it's own name, which are **Main Axis**, **Cross Axis**
@@ -19,7 +21,7 @@ let's begin with simple example, let's add some boxes (flex elements) inside an
2
3
3
-
+
```
```css
@@ -44,7 +46,11 @@ let's begin with simple example, let's add some boxes (flex elements) inside an
Here CSS ordered elements one by one, start from the **Main Axis** and put them horizontally according to its direction which is by default is the row(horizontal direction).
-So,this is the most basic usage of flexbox, now let's play with the direction of flex:
+So,this is the most basic usage of flexbox, now let's play with the properties of flex:
+
+## Properties for the Parent (flex container)
+
+### flex-direction
**row** (default)
```css
@@ -52,7 +58,7 @@ So,this is the most basic usage of flexbox, now let's play with the direction of
flex-direction: row;
}
```
-Here the elements will start order from left and right.
+Here the items will start order from left and right.
**row-reverse**
```css
@@ -60,7 +66,7 @@ Here the elements will start order from left and right.
flex-direction: row-reverse;
}
```
-Here the elements will start order from right to left.
+Here the items will start order from right to left.
**column**
@@ -69,7 +75,7 @@ Here the elements will start order from right to left.
flex-direction: column;
}
```
-Here the elments will start order from top to bottom.
+Here the items will start order from top to bottom.
**column-reverse**
```css
@@ -77,8 +83,43 @@ Here the elments will start order from top to bottom.
flex-direction: column-reverse;
}
```
-Here the elments will start order from bottom to top.
+Here the items will start order from bottom to top.
+### flex-wrap
+
+**nowrap** (default)
+```css
+.container{
+ flex-wrap: wrap;
+}
+```
+Here flex items will be on one line.
+
+**wrap**
+```css
+.container{
+ flex-wrap: wrap;
+}
+```
+Here flex items will wrap onto multiple lines, from top to bottom.
+
+**wrap-reverse**
+```css
+.container{
+ flex-wrap: wrap-reverse;
+}
+```
+Here flex items will wrap onto multiple lines from bottom to top.
+
+### flex-flow
+
+This is a **shorthand** for the ```flex-direction``` and ```flex-wrap``` properties.
+
+```css
+.container{
+ flex-flow: row nowrap; // default
+}
+```
### Manage Extra Space
@@ -91,6 +132,8 @@ right now let's learn how to manage the extra space in the flex system, let's st
> 2- the direction is row (horizontally)
>
+### justify-content
+
we can manage the main axis space using ```justify-content``` in flex-container:
**center**
@@ -99,7 +142,7 @@ we can manage the main axis space using ```justify-content``` in flex-container:
justify-content: center;
}
```
-Here the elements will place at the center and extra spaces will be around them
+Here items will place at the center and extra spaces will be around them.
**flex-start**
```css
@@ -107,7 +150,7 @@ Here the elements will place at the center and extra spaces will be around them
justify-content: flex-start;
}
```
-Here the space will place after the last element
+Here the space will place after the last item.
**flex-end**
@@ -116,7 +159,7 @@ Here the space will place after the last element
justify-content: flex-end;
}
```
-Here the space will place before the first element.
+Here the space will place before the first item.
**space-between**
```css
@@ -141,13 +184,16 @@ This image, taken from an CSS-Tricks article on justify-content, does a good job
+
>here we will assume two things:
> 1- space is the space in the **Cross Axis**
-> 2- the direction is row (horizontally)
+> 2- the direction is column (vertically)
+### align-items
+
**flex-start**
```css
.container{
@@ -175,6 +221,11 @@ Here the extra space (of the cross axis) will be above flex-elements.
```
Here the extra space (of the cross axis) will be distributed equally above and bellow flex-elements which will make the element in the middle of cross axis.
+
+
+
+## Properties for the Children (flex items)
+
### **Flex-Elements Order**:
flexbox provides a way to determine the order of each element, which is a property you can use in flex-elements.
From 2b4abe38b634081c84abe19bc94f9d43d237ef81 Mon Sep 17 00:00:00 2001
From: Rehab Ali <49806841+rehabas@users.noreply.github.com>
Date: Sun, 25 Oct 2020 00:33:04 +0300
Subject: [PATCH 2/5] Update flexbox.md
---
coursebook/Week 03/session-06/flexbox.md | 71 +++++++++++++++++++++++-
1 file changed, 70 insertions(+), 1 deletion(-)
diff --git a/coursebook/Week 03/session-06/flexbox.md b/coursebook/Week 03/session-06/flexbox.md
index 28768f67..64836ecf 100644
--- a/coursebook/Week 03/session-06/flexbox.md
+++ b/coursebook/Week 03/session-06/flexbox.md
@@ -144,7 +144,7 @@ we can manage the main axis space using ```justify-content``` in flex-container:
```
Here items will place at the center and extra spaces will be around them.
-**flex-start**
+**flex-start** (default)
```css
.container{
justify-content: flex-start;
@@ -194,6 +194,15 @@ This image, taken from an CSS-Tricks article on justify-content, does a good job
### align-items
+**stretch** (default):
+
+```css
+.container{
+ align-items: stretch;
+}
+```
+stretch to fill the container.
+
**flex-start**
```css
.container{
@@ -223,6 +232,53 @@ Here the extra space (of the cross axis) will be distributed equally above and b
+### align-content
+
+**flex-start**
+```css
+.container{
+ align-content: flex-start;
+}
+```
+Here items packed to the start of the container.
+
+**flex-end**
+```css
+.container{
+ align-content: flex-end;
+}
+```
+Here items packed to the end of the container.
+
+**center**
+```css
+.container{
+ align-content: center;
+}
+```
+Here items centered in the container.
+
+**space-between**
+```css
+.container{
+ align-content: space-between;
+}
+```
+Here items evenly distributed, the first line is at the start of the container while the last one is at the end.
+
+**space-around**
+```css
+.container{
+ align-content: space-around;
+}
+```
+Here items evenly distributed with equal space around each line.
+
+**Note:** This property only takes effect on multi-line flexible containers, where ```flex-wrap``` is set to either ```wrap``` or ```wrap-reverse```).
+
+
+
+
## Properties for the Children (flex items)
@@ -258,6 +314,19 @@ so we have the following values : 2, -1, 3, 4 so CSS we reorder them to -1 -> 2
and the final result will be :
+
+### align-self
+```css
+.box-3 {
+ align-self: flex-end;
+}
+```
+Here box-3 are placed at the end of the cross axis individually.
+
+
+
+
+
## Exercise:
we have a brillient practical exercise for you [here](https://flexboxfroggy.com/) we will solve it with each other
From 27e62ee0fd7c2999e7b4d8a139d8c00125183189 Mon Sep 17 00:00:00 2001
From: Rehab Ali <49806841+rehabas@users.noreply.github.com>
Date: Sun, 25 Oct 2020 00:36:36 +0300
Subject: [PATCH 3/5] Update flexbox.md
---
coursebook/Week 03/session-06/flexbox.md | 42 ++++++++++++------------
1 file changed, 21 insertions(+), 21 deletions(-)
diff --git a/coursebook/Week 03/session-06/flexbox.md b/coursebook/Week 03/session-06/flexbox.md
index 64836ecf..1bfa4c31 100644
--- a/coursebook/Week 03/session-06/flexbox.md
+++ b/coursebook/Week 03/session-06/flexbox.md
@@ -52,7 +52,7 @@ So,this is the most basic usage of flexbox, now let's play with the properties o
### flex-direction
- **row** (default)
+ **```row```** (default)
```css
.container{
flex-direction: row;
@@ -60,7 +60,7 @@ So,this is the most basic usage of flexbox, now let's play with the properties o
```
Here the items will start order from left and right.
- **row-reverse**
+ **```row-reverse```**
```css
.container{
flex-direction: row-reverse;
@@ -69,7 +69,7 @@ Here the items will start order from left and right.
Here the items will start order from right to left.
- **column**
+ **```column```**
```css
.container{
flex-direction: column;
@@ -77,7 +77,7 @@ Here the items will start order from right to left.
```
Here the items will start order from top to bottom.
-**column-reverse**
+**```column-reverse```**
```css
.container{
flex-direction: column-reverse;
@@ -87,7 +87,7 @@ Here the items will start order from bottom to top.
### flex-wrap
-**nowrap** (default)
+**```nowrap```** (default)
```css
.container{
flex-wrap: wrap;
@@ -95,7 +95,7 @@ Here the items will start order from bottom to top.
```
Here flex items will be on one line.
-**wrap**
+**```wrap```**
```css
.container{
flex-wrap: wrap;
@@ -103,7 +103,7 @@ Here flex items will be on one line.
```
Here flex items will wrap onto multiple lines, from top to bottom.
-**wrap-reverse**
+**```wrap-reverse```**
```css
.container{
flex-wrap: wrap-reverse;
@@ -136,7 +136,7 @@ right now let's learn how to manage the extra space in the flex system, let's st
we can manage the main axis space using ```justify-content``` in flex-container:
-**center**
+**```center```**
```css
.container{
justify-content: center;
@@ -144,7 +144,7 @@ we can manage the main axis space using ```justify-content``` in flex-container:
```
Here items will place at the center and extra spaces will be around them.
-**flex-start** (default)
+**```flex-start```** (default)
```css
.container{
justify-content: flex-start;
@@ -153,7 +153,7 @@ Here items will place at the center and extra spaces will be around them.
Here the space will place after the last item.
-**flex-end**
+**```flex-end```**
```css
.container{
justify-content: flex-end;
@@ -161,7 +161,7 @@ Here the space will place after the last item.
```
Here the space will place before the first item.
-**space-between**
+**```space-between```**
```css
.container{
justify-content: space-between;
@@ -169,7 +169,7 @@ Here the space will place before the first item.
```
Items display with equal spacing between them.
-**space-around**
+**```space-around```**
```css
.container{
justify-content: space-around;
@@ -194,7 +194,7 @@ This image, taken from an CSS-Tricks article on justify-content, does a good job
### align-items
-**stretch** (default):
+**```stretch```** (default):
```css
.container{
@@ -203,7 +203,7 @@ This image, taken from an CSS-Tricks article on justify-content, does a good job
```
stretch to fill the container.
-**flex-start**
+**```flex-start```**
```css
.container{
align-items: flex-start;
@@ -213,7 +213,7 @@ Here the extra space (of the cross axis) will be bellow flex-elements.
> when i mean after all elements I mean the elements will start to place into the container from where the flex-start in the cross axis.
-**flex-end**
+**```flex-end```**
```css
.container{
align-items: flex-end;
@@ -222,7 +222,7 @@ Here the extra space (of the cross axis) will be bellow flex-elements.
Here the extra space (of the cross axis) will be above flex-elements.
-**center**
+**```center```**
```css
.container{
align-items: center;
@@ -234,7 +234,7 @@ Here the extra space (of the cross axis) will be distributed equally above and b
### align-content
-**flex-start**
+**```flex-start```**
```css
.container{
align-content: flex-start;
@@ -242,7 +242,7 @@ Here the extra space (of the cross axis) will be distributed equally above and b
```
Here items packed to the start of the container.
-**flex-end**
+**```flex-end```**
```css
.container{
align-content: flex-end;
@@ -250,7 +250,7 @@ Here items packed to the start of the container.
```
Here items packed to the end of the container.
-**center**
+**```center```**
```css
.container{
align-content: center;
@@ -258,7 +258,7 @@ Here items packed to the end of the container.
```
Here items centered in the container.
-**space-between**
+**```space-between```**
```css
.container{
align-content: space-between;
@@ -266,7 +266,7 @@ Here items centered in the container.
```
Here items evenly distributed, the first line is at the start of the container while the last one is at the end.
-**space-around**
+**```space-around```**
```css
.container{
align-content: space-around;
From 1874f9a9f00d8a47500bcc3fa85af7e0e625d493 Mon Sep 17 00:00:00 2001
From: Rehab Ali <49806841+rehabas@users.noreply.github.com>
Date: Tue, 27 Oct 2020 00:42:53 +0300
Subject: [PATCH 4/5] Create Morning Challenge - CSS.md
---
.../Week 03/session-06/Morning Challenge - CSS.md | 11 +++++++++++
1 file changed, 11 insertions(+)
create mode 100644 coursebook/Week 03/session-06/Morning Challenge - CSS.md
diff --git a/coursebook/Week 03/session-06/Morning Challenge - CSS.md b/coursebook/Week 03/session-06/Morning Challenge - CSS.md
new file mode 100644
index 00000000..df1f7e77
--- /dev/null
+++ b/coursebook/Week 03/session-06/Morning Challenge - CSS.md
@@ -0,0 +1,11 @@
+# CSS animation challenge
+## Slider with radio buttons
+
+
+
+### Hints:
+
+[CSS :checked Selector](https://www.w3schools.com/cssref/sel_checked.asp)
+
+[How to affect other elements when one element is hovered or chicked](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered)
+
From c3a1d31d5fc74c1848eef0c7b8475160f7b87748 Mon Sep 17 00:00:00 2001
From: Rehab Ali <49806841+rehabas@users.noreply.github.com>
Date: Tue, 27 Oct 2020 00:46:49 +0300
Subject: [PATCH 5/5] Delete Morning Challenge - CSS.md
---
.../Week 03/session-06/Morning Challenge - CSS.md | 11 -----------
1 file changed, 11 deletions(-)
delete mode 100644 coursebook/Week 03/session-06/Morning Challenge - CSS.md
diff --git a/coursebook/Week 03/session-06/Morning Challenge - CSS.md b/coursebook/Week 03/session-06/Morning Challenge - CSS.md
deleted file mode 100644
index df1f7e77..00000000
--- a/coursebook/Week 03/session-06/Morning Challenge - CSS.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# CSS animation challenge
-## Slider with radio buttons
-
-
-
-### Hints:
-
-[CSS :checked Selector](https://www.w3schools.com/cssref/sel_checked.asp)
-
-[How to affect other elements when one element is hovered or chicked](https://stackoverflow.com/questions/4502633/how-to-affect-other-elements-when-one-element-is-hovered)
-