CodeLeom/flex-box.html

## flex-box.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flexbox Layout</title>
    <style>
        body {
            max-width: 50rem;
            min-height: unset;
            padding: 1rem;
            border-color: grey;
            margin: 1rem auto;
        }
        .container {
            display: flex;
            flex-wrap: wrap;
            background: coral;
            border: 1px solid #eee;
        }
        /* flex-flow: column wrap */
        .container > * {
            padding: 2px;
        }

        .sidebar {
            background: lightblue;
            outline: 1px solid red;
            flex-grow: 1;
            flex-basis: 7px;
        }
        .content {
            flex-basis: 0;
            flex-grow: 2;
            min-width: 70%;
        }

        .oreoluwa {
            display: flex;
            flex-wrap: wrap;
            gap: 1rem;
            background-color: #ccc;
            color: white;
            height: 200px;
            align-items: center;
            justify-content: center;
        }
        .oreoluwa div {
            border: 1px solid black;
        }

        /* .oreoluwa :nth-child(5) {
            margin-inline-start: auto;
        } */
    </style>
</head>
<body>
    <h1>FlexBox Layout Style</h1>

    <div class="container">
        <main class="content">
            <section>
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum est suscipit cupiditate quibusdam earum molestiae itaque cumque sapiente magni corrupti amet eos debitis perferendis saepe vitae ipsum deleniti, dolores animi!

                </p>
            </section>
        </main>
            <aside class="sidebar">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, beatae.
                </p>
            </aside>

    </div>

    <h1>Creating a Flex Container</h1>
    <div class="oreoluwa">
        <div class="box">
            Home
        </div>

        <div class="box">
            About
        </div>

        <div class="box">
            Projects
        </div>

        <div class="box item1">
            Contact
        </div>

        <div class="box">
            Login
        </div>

    </div>

    <!--
        flex is the shorthand for flex-grow, flex-shrink and flex-basis
        flex: 1 1 auto;
     -->
     <!--
        justify-content => space distribution on the main axis
        align-content => space distribution on the cross axis
        place-content => shorthand for the two above
        align-self => aligns a single item on the cross axis
        align-items => aligns a all the item on the cross axis
      -->
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Layout</title>
	<style>
	body {
	max-width: 50rem;
	min-height: unset;
	padding: 1rem;
	border-color: grey;
	margin: 1rem auto;
	}
	.container {
	display: flex;
	flex-wrap: wrap;
	background: coral;
	border: 1px solid #eee;
	}
	/* flex-flow: column wrap */
	.container > * {
	padding: 2px;
	}

	.sidebar {
	background: lightblue;
	outline: 1px solid red;
	flex-grow: 1;
	flex-basis: 7px;
	}
	.content {
	flex-basis: 0;
	flex-grow: 2;
	min-width: 70%;
	}

	.oreoluwa {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	background-color: #ccc;
	color: white;
	height: 200px;
	align-items: center;
	justify-content: center;
	}
	.oreoluwa div {
	border: 1px solid black;
	}

	/* .oreoluwa :nth-child(5) {
	margin-inline-start: auto;
	} */
	</style>
	</head>
	<body>
	<h1>FlexBox Layout Style</h1>

	<div class="container">
	<main class="content">
	<section>
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum est suscipit cupiditate quibusdam earum molestiae itaque cumque sapiente magni corrupti amet eos debitis perferendis saepe vitae ipsum deleniti, dolores animi!

	</p>
	</section>
	</main>
	<aside class="sidebar">
	<p>
	Lorem ipsum dolor sit amet consectetur adipisicing elit. Modi, beatae.
	</p>
	</aside>

	</div>

	<h1>Creating a Flex Container</h1>
	<div class="oreoluwa">
	<div class="box">
	Home
	</div>

	<div class="box">
	About
	</div>

	<div class="box">
	Projects
	</div>

	<div class="box item1">
	Contact
	</div>

	<div class="box">
	Login
	</div>

	</div>

	<!--
	flex is the shorthand for flex-grow, flex-shrink and flex-basis
	flex: 1 1 auto;
	-->
	<!--
	justify-content => space distribution on the main axis
	align-content => space distribution on the cross axis
	place-content => shorthand for the two above
	align-self => aligns a single item on the cross axis
	align-items => aligns a all the item on the cross axis
	-->
	</body>
	</html>