Chidera Paul Ugwuanyi dexiouz

## .css
.box{
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  padding: 10px;
}

.box1 {background: #1abc9c}
.box2 {background: #3498db}

## flex-direction-row.css
.box{
color: white;
font-size: 100px;
text-align: center;
text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
padding: 10px;
}
.box1 {background: #1abc9c}
.box2 {background: #3498db}
.box3 {background: purple}

## flex-direction-column.css

.container {
  /* display: flex; or inline-flex */
  display: flex;
  border: 10px solid goldenrod;
  min-height: 100vh;

  /* flex-direction: row or colum or row-reverse or column-reverse */
  flex-direction: column ;
}

## row and column reverse.css
.container {
  /* display: flex; or inline-flex */
  display: flex;
  border: 10px solid goldenrod;
  min-height: 100vh;

  /* flex-direction: row or colum or row-reverse or column-reverse */
  flex-direction: row-reverse ;
}

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="./flexbox.css">
  <title>flexbox</title>
</head>
<body>

## flex-wrap.css
.container {
  display: flex;
  border: 10px solid goldenrod;
  min-height: 100vh;
  flex-wrap: wrap
}

## width.css
.box{
  color: white;
  font-size: 100px;
  text-align: center;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
  padding: 10px;
  width: 300px
}

## wrap-reverse.css
.container {
  display: flex;
  border: 10px solid goldenrod;
  height: 100vh;
  flex-wrap: wrap-reverse;
}

## flex-box-ordering.css
.container {
  display: flex
}

.box {
 flex: 1;
 order: 1;
 color: white;
  font-size: 100px;
  text-align: center;

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./flexboxNetNinjaCourse.css">
    <title>Flexbox Netninja course</title>
</head>
<body>
	.box{
	color: white;
	font-size: 100px;
	text-align: center;
	text-shadow: 4px 4px 0 rgba(0,0,0,0.1);
	padding: 10px;
	}

	.box1 {background: #1abc9c}
	.box2 {background: #3498db}

	.container {
	/* display: flex; or inline-flex */
	display: flex;
	border: 10px solid goldenrod;
	min-height: 100vh;

	/* flex-direction: row or colum or row-reverse or column-reverse */
	flex-direction: column ;
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<link rel="stylesheet" href="./flexbox.css">
	<title>flexbox</title>
	</head>
	<body>
	.container {
	display: flex
	}

	.box {
	flex: 1;
	order: 1;
	color: white;
	font-size: 100px;
	text-align: center;