Unit IV - Lesson 5

4.5.1. Introduction to flex

(c) main axis

4.5.2. flex-direction

/* Write your code below */
.flex-item-1{
	background-color: red;
}
.flex-item-2{
	background-color: black;
}
.flex-item-3{
	background-color: blue;
}
.container{
	display: flex;
	flex-direction: column-reverse;

4.5.3. flex-wrap

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 2px dotted red;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row-reverse;
}

4.5.4. flex-flow

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 2px dashed blue;
	flex-direction: column;
	display: flex;
	flex-wrap: wrap;
}

4.5.5. justify-content

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	border: 3px solid blue;
	padding: 5px;
}

4.5.6. align-items

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	display: flex;
	flex-direction: row-reverse;
	border: 3px solid red;
	align-items: center;
	padding: 5px;
}

4.5.7. align-content

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 5px solid blue;
	display: flex;
	flex-direction: row-reverse;
	flex-wrap: wrap;
	align-content: space-around;
	padding: 5px;
}

4.5.8. gap

/* Write your code below */
.container {
	width: 700px;
	height: 700px;
	border: 5px dotted red;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-content: center;
	row-gap: 5px;
	column-gap: 10px;
}

4.5.9. order

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 3px solid red;
	display: flex;
	flex-wrap: wrap;
}
.flex-item-1{
	order: 2;
}
.flex-item-2{
	order: 3;
}
.flex-item-3{
	order: 1;
}

4.5.10. flex-grow

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 2px dotted blue;
	display: flex;
	flex-wrap: wrap;
}
.flex-item-1{
	order: 3;
	flex-grow: 1;
}
.flex-item-2{
	order: 1;
	flex-grow: 2;
}
.flex-item-3{
	order: 2;
	flex-grow: 1;
}

4.5.11. flex-shrink

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 2px dashed red;
	display: flex;
	flex-wrap: wrap;
}
.flex-item-1{
	order: 2;
	flex-shrink: 2;
}
.flex-item-2{
	order: 3;
	flex-shrink: 1;
	flex-grow: 1;
}
.flex-item-3{
	order: 1;
	flex-shrink: 1;
	flex-grow: 1;
}

4.5.12. flex-basis

/* Write your code below */
.container{
	width: 500px;
	height: 500px;
	border: 1px solid red;
	display: flex;
}
.container div{
	flex-grow: 0;
	flex-shrink: 0;
	flex-basis: 25px;
}
.container div:nth-of-type(2){
	flex-basis: 100px;
}

4.5.13. flex

/* Write your code below */
.container {
	width:500px;
	height:500px;
	display:flex;
	flex-wrap:wrap;
	border: 3px dashed blue;
}

.flex-item-1 {
	flex: 3;
}

.flex-item-2 {
	flex: 3;
	flex: 3 2;
}

.flex-item-3 {
	flex: 3;
	flex: 3 2;
	flex-basis: 100px;
}

4.5.14. align-self

/* Write your code below */
.container {
	width: 500px;
	height: 500px;
	border: 4px dashed red;
	display: flex;
	flex-direction: column;
}

.flex-item-3 {
	align-self: flex-end;
}