ermogenes/FlexLayout101.html

## FlexLayout101.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Layout Flex 101</title>
    <style>
        * {
            margin: 0; padding: 0; box-sizing: border-box;
        }
        #root {
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background: linear-gradient(#6272a4 0%, #44475a 50%, #282a36 50%, #44475a 100%);
        }
        .container-center {
            border: 5px solid #50fa7b;
            flex-grow: 1;
            max-width: 400px;
            min-height: 400px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
        }
        .container-default {
            border: 5px solid #ff5555;
            flex-grow: 1;
            max-width: 800px;
            min-height: 100vh;
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .container-full {
            border: 5px solid #6272a4;
            flex-grow: 1;
            min-height: 100vh;
            align-self: flex-start;
            display: flex;
            flex-direction: column;
            justify-content: flex-start;
        }
        .box {
            background-color: #282a36;
            color: #44475a;
            font-size: 1.5em;
        }
        .container-center .box {
            flex-grow: 1;
        }
        .container-default .box:nth-child(3),
        .container-full .box:nth-child(3) {
            flex-grow: 1;
        }
    </style>
</head>
<body>
    <div id=root>
        <div class=container-default>
            <div class=box>1</div>
            <div class=box>2</div>
            <div class=box>3</div>
            <!-- <div class=box>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident dolorem, rerum maiores non modi, inventore sapiente, ipsam impedit necessitatibus asperiores possimus nostrum! Ea recusandae est, cum beatae dignissimos magni, reprehenderit voluptates aperiam ipsum et officia id tempora veniam officiis laboriosam? Aperiam, consequuntur? Ex magni illo dolorum illum exercitationem laboriosam amet reprehenderit, officia cumque quae. Dolores nisi maxime, non ea similique doloremque rerum praesentium expedita asperiores dolore cum. Autem, tempore. Ratione molestias corrupti accusantium eos dicta labore cupiditate animi odio, dolorem autem harum sit sequi voluptate. Ullam praesentium nostrum nobis, quis illo adipisci voluptatibus alias distinctio consequuntur, quidem earum nulla commodi est asperiores, accusamus magni nemo perferendis dolor id! Animi at, fuga aut quos dolore porro minus voluptatibus dolor, voluptatum delectus rem, vel omnis nobis! Dolorum dolore magni modi! Quo obcaecati quod necessitatibus rerum voluptatem ullam ducimus eveniet, maiores veritatis illo ipsa neque voluptatibus laudantium dolore, velit numquam modi ad itaque iusto. Ad nobis voluptas similique iure, aut aliquam error voluptatem obcaecati quibusdam exercitationem. Enim excepturi magnam odit nobis, voluptate, culpa officiis voluptatum debitis nesciunt doloremque molestias corrupti consequuntur nostrum, assumenda ad similique autem ipsa? Assumenda eius, praesentium laborum itaque repellendus modi odit natus officiis aliquid adipisci. Tenetur beatae nisi nesciunt libero quod aperiam laboriosam tempore consequuntur et non iure, aliquid ullam enim error nulla architecto vel! Rem soluta, possimus magnam animi vel, sed eveniet voluptatem inventore suscipit praesentium temporibus? Esse totam exercitationem pariatur ipsam natus, aspernatur nisi officiis vitae minima blanditiis sunt deserunt sequi? Libero molestias omnis tenetur a, facere est nisi aliquid accusantium ducimus cum necessitatibus nostrum, nihil eligendi quos ad eos dolorum vitae. Non explicabo saepe, fugit est deserunt modi aliquid consequatur! Nesciunt architecto officiis quod at aliquam, doloremque, eveniet voluptatum eaque totam recusandae quidem cumque labore nulla neque cupiditate nam vero est, obcaecati enim eum ipsam ratione laboriosam! In quibusdam corporis sit tempora cumque? Doloribus, cum distinctio! Voluptatibus quisquam, deleniti dolorem magnam ad, tempore in architecto totam veniam, tempora enim explicabo eaque ut quas. Sit esse tempore, repellendus recusandae quae enim quisquam consectetur nostrum iusto, cum dolorum alias expedita sunt voluptates voluptate temporibus minima tenetur, veritatis delectus nobis saepe sint atque quas! Aliquid illo voluptates enim quis! Assumenda repellendus illum earum quibusdam, id accusamus repellat at laborum sint hic eum, vitae dicta voluptas molestias quam odit explicabo quos doloribus tempore commodi temporibus minima excepturi quasi. Debitis vero ab commodi quo nam itaque alias laudantium! Nemo, quibusdam nam fugiat dolore repellendus nisi ab ut molestias ipsa ex asperiores deserunt, ipsam maxime vitae, est voluptate perspiciatis cum amet cupiditate sapiente accusantium! Eligendi ratione facere excepturi ut nihil asperiores pariatur, accusamus placeat, suscipit sunt atque earum porro magni aut provident vitae nulla labore impedit ipsa quae optio error necessitatibus. Maiores, ullam, omnis itaque dicta ea nesciunt dolores inventore molestias quod nam sint sapiente soluta qui quo vitae perferendis non corporis? Mollitia aut temporibus consequatur minima ut aspernatur ex, dolor reprehenderit deserunt. Nisi, optio quam ipsam quo quibusdam laborum reiciendis repellat modi quos pariatur quod cum ratione excepturi ea nam aspernatur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel natus iste ut dolorum minus quae nostrum incidunt at, odio neque asperiores sint. Aliquam beatae, libero blanditiis numquam deserunt accusantium, non esse illum explicabo repellendus, in sunt? Fuga ipsam explicabo voluptate et? Temporibus doloremque quibusdam neque at, a cum eius nostrum dolore ullam dignissimos sunt incidunt aspernatur, illo officiis deserunt deleniti? Eos amet illum necessitatibus, praesentium error quidem velit laborum libero magni ullam nemo voluptate ad assumenda itaque nulla ratione modi maxime similique unde sapiente eius quaerat dolorum molestiae qui? Iusto tempora iure nostrum fuga nulla, quidem quaerat ipsum, ducimus aliquam voluptatum placeat deserunt est earum illum. Nobis ducimus, nesciunt eius provident libero iste quo harum distinctio doloremque dicta ea saepe. Quaerat labore temporibus minus nam, molestias libero, distinctio dolor vel repellendus ducimus autem recusandae ut nulla fuga aliquam harum iusto consequuntur. Aliquid, quisquam laborum reprehenderit delectus cumque animi id, nihil sed saepe corporis quo corrupti quas? Officia cum aliquid quibusdam! Quod, sint assumenda omnis quos quo rerum porro. Ullam tempora, tenetur ab natus delectus quam vel, vero ipsum aut pariatur odit? Nemo, qui illo. Quaerat temporibus, sunt doloremque ut nam voluptatum ipsa, quos ea nihil consectetur, incidunt maiores asperiores voluptate dignissimos accusamus repellat consequatur omnis cupiditate earum facere autem esse hic odio quae. Maxime voluptates quia, veritatis iusto ad ut ullam rem natus in ea, facilis obcaecati deleniti praesentium ab repellendus ipsum blanditiis, amet officiis itaque tempore possimus. Fugiat inventore ut eum ipsum eos quod ea ipsa optio reprehenderit temporibus. Est, numquam officiis. Reprehenderit quo eligendi accusantium facilis. Excepturi culpa ad possimus voluptas laudantium enim ipsum facere fugiat quod earum deserunt fugit omnis eveniet dolores quos, eos consectetur hic itaque, natus explicabo amet. Eveniet doloremque porro et omnis iure accusamus animi ullam libero earum laborum natus unde eum, ipsam ex itaque. Consequuntur cum unde maiores provident, quia repellat corrupti atque veniam totam, magni officiis adipisci minima est inventore perferendis quae asperiores. Quod corrupti tempore aspernatur facilis perferendis praesentium, laboriosam omnis commodi, quae autem maxime sapiente, nam maiores odio error pariatur iusto quos quidem dolorum! Quisquam explicabo quia illo tenetur voluptatibus provident neque, nihil eum dolorem libero pariatur odio quos dignissimos, sint asperiores quam consequatur voluptatem doloremque corporis quidem architecto numquam vero facere. Natus inventore distinctio corporis vero. Asperiores obcaecati, dolorem ratione sequi sit assumenda ad cupiditate corrupti autem, vitae mollitia dicta culpa. Voluptates porro, suscipit nulla nemo amet ex maxime! Vero odit odio error, quos voluptate quibusdam corrupti explicabo, saepe fugit tempore ex. Optio quibusdam, eius, officiis modi expedita deserunt reprehenderit vel qui accusamus distinctio eum voluptates a recusandae laboriosam accusantium! Quo animi consequuntur voluptatum quas fugiat ducimus quisquam a assumenda nostrum natus sed reprehenderit doloremque ad quia possimus, impedit amet neque repellat, adipisci minima incidunt dolorum harum accusamus doloribus. Autem quae suscipit totam recusandae, ut aperiam eaque quibusdam. Minus, culpa alias. Mollitia recusandae autem corporis at? Deserunt, nemo dignissimos. Iure, animi asperiores, saepe, temporibus laboriosam veritatis mollitia dignissimos amet hic quis iste tempore nam ipsum velit tempora quas quia!</div> -->
            <div class=box>4</div>
        </div>
    </div>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Layout Flex 101</title>
	<style>
	* {
	margin: 0; padding: 0; box-sizing: border-box;
	}
	#root {
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(#6272a4 0%, #44475a 50%, #282a36 50%, #44475a 100%);
	}
	.container-center {
	border: 5px solid #50fa7b;
	flex-grow: 1;
	max-width: 400px;
	min-height: 400px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	}
	.container-default {
	border: 5px solid #ff5555;
	flex-grow: 1;
	max-width: 800px;
	min-height: 100vh;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	}
	.container-full {
	border: 5px solid #6272a4;
	flex-grow: 1;
	min-height: 100vh;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	}
	.box {
	background-color: #282a36;
	color: #44475a;
	font-size: 1.5em;
	}
	.container-center .box {
	flex-grow: 1;
	}
	.container-default .box:nth-child(3),
	.container-full .box:nth-child(3) {
	flex-grow: 1;
	}
	</style>
	</head>
	<body>
	<div id=root>
	<div class=container-default>
	<div class=box>1</div>
	<div class=box>2</div>
	<div class=box>3</div>
	<!-- <div class=box>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident dolorem, rerum maiores non modi, inventore sapiente, ipsam impedit necessitatibus asperiores possimus nostrum! Ea recusandae est, cum beatae dignissimos magni, reprehenderit voluptates aperiam ipsum et officia id tempora veniam officiis laboriosam? Aperiam, consequuntur? Ex magni illo dolorum illum exercitationem laboriosam amet reprehenderit, officia cumque quae. Dolores nisi maxime, non ea similique doloremque rerum praesentium expedita asperiores dolore cum. Autem, tempore. Ratione molestias corrupti accusantium eos dicta labore cupiditate animi odio, dolorem autem harum sit sequi voluptate. Ullam praesentium nostrum nobis, quis illo adipisci voluptatibus alias distinctio consequuntur, quidem earum nulla commodi est asperiores, accusamus magni nemo perferendis dolor id! Animi at, fuga aut quos dolore porro minus voluptatibus dolor, voluptatum delectus rem, vel omnis nobis! Dolorum dolore magni modi! Quo obcaecati quod necessitatibus rerum voluptatem ullam ducimus eveniet, maiores veritatis illo ipsa neque voluptatibus laudantium dolore, velit numquam modi ad itaque iusto. Ad nobis voluptas similique iure, aut aliquam error voluptatem obcaecati quibusdam exercitationem. Enim excepturi magnam odit nobis, voluptate, culpa officiis voluptatum debitis nesciunt doloremque molestias corrupti consequuntur nostrum, assumenda ad similique autem ipsa? Assumenda eius, praesentium laborum itaque repellendus modi odit natus officiis aliquid adipisci. Tenetur beatae nisi nesciunt libero quod aperiam laboriosam tempore consequuntur et non iure, aliquid ullam enim error nulla architecto vel! Rem soluta, possimus magnam animi vel, sed eveniet voluptatem inventore suscipit praesentium temporibus? Esse totam exercitationem pariatur ipsam natus, aspernatur nisi officiis vitae minima blanditiis sunt deserunt sequi? Libero molestias omnis tenetur a, facere est nisi aliquid accusantium ducimus cum necessitatibus nostrum, nihil eligendi quos ad eos dolorum vitae. Non explicabo saepe, fugit est deserunt modi aliquid consequatur! Nesciunt architecto officiis quod at aliquam, doloremque, eveniet voluptatum eaque totam recusandae quidem cumque labore nulla neque cupiditate nam vero est, obcaecati enim eum ipsam ratione laboriosam! In quibusdam corporis sit tempora cumque? Doloribus, cum distinctio! Voluptatibus quisquam, deleniti dolorem magnam ad, tempore in architecto totam veniam, tempora enim explicabo eaque ut quas. Sit esse tempore, repellendus recusandae quae enim quisquam consectetur nostrum iusto, cum dolorum alias expedita sunt voluptates voluptate temporibus minima tenetur, veritatis delectus nobis saepe sint atque quas! Aliquid illo voluptates enim quis! Assumenda repellendus illum earum quibusdam, id accusamus repellat at laborum sint hic eum, vitae dicta voluptas molestias quam odit explicabo quos doloribus tempore commodi temporibus minima excepturi quasi. Debitis vero ab commodi quo nam itaque alias laudantium! Nemo, quibusdam nam fugiat dolore repellendus nisi ab ut molestias ipsa ex asperiores deserunt, ipsam maxime vitae, est voluptate perspiciatis cum amet cupiditate sapiente accusantium! Eligendi ratione facere excepturi ut nihil asperiores pariatur, accusamus placeat, suscipit sunt atque earum porro magni aut provident vitae nulla labore impedit ipsa quae optio error necessitatibus. Maiores, ullam, omnis itaque dicta ea nesciunt dolores inventore molestias quod nam sint sapiente soluta qui quo vitae perferendis non corporis? Mollitia aut temporibus consequatur minima ut aspernatur ex, dolor reprehenderit deserunt. Nisi, optio quam ipsam quo quibusdam laborum reiciendis repellat modi quos pariatur quod cum ratione excepturi ea nam aspernatur! Lorem, ipsum dolor sit amet consectetur adipisicing elit. Vel natus iste ut dolorum minus quae nostrum incidunt at, odio neque asperiores sint. Aliquam beatae, libero blanditiis numquam deserunt accusantium, non esse illum explicabo repellendus, in sunt? Fuga ipsam explicabo voluptate et? Temporibus doloremque quibusdam neque at, a cum eius nostrum dolore ullam dignissimos sunt incidunt aspernatur, illo officiis deserunt deleniti? Eos amet illum necessitatibus, praesentium error quidem velit laborum libero magni ullam nemo voluptate ad assumenda itaque nulla ratione modi maxime similique unde sapiente eius quaerat dolorum molestiae qui? Iusto tempora iure nostrum fuga nulla, quidem quaerat ipsum, ducimus aliquam voluptatum placeat deserunt est earum illum. Nobis ducimus, nesciunt eius provident libero iste quo harum distinctio doloremque dicta ea saepe. Quaerat labore temporibus minus nam, molestias libero, distinctio dolor vel repellendus ducimus autem recusandae ut nulla fuga aliquam harum iusto consequuntur. Aliquid, quisquam laborum reprehenderit delectus cumque animi id, nihil sed saepe corporis quo corrupti quas? Officia cum aliquid quibusdam! Quod, sint assumenda omnis quos quo rerum porro. Ullam tempora, tenetur ab natus delectus quam vel, vero ipsum aut pariatur odit? Nemo, qui illo. Quaerat temporibus, sunt doloremque ut nam voluptatum ipsa, quos ea nihil consectetur, incidunt maiores asperiores voluptate dignissimos accusamus repellat consequatur omnis cupiditate earum facere autem esse hic odio quae. Maxime voluptates quia, veritatis iusto ad ut ullam rem natus in ea, facilis obcaecati deleniti praesentium ab repellendus ipsum blanditiis, amet officiis itaque tempore possimus. Fugiat inventore ut eum ipsum eos quod ea ipsa optio reprehenderit temporibus. Est, numquam officiis. Reprehenderit quo eligendi accusantium facilis. Excepturi culpa ad possimus voluptas laudantium enim ipsum facere fugiat quod earum deserunt fugit omnis eveniet dolores quos, eos consectetur hic itaque, natus explicabo amet. Eveniet doloremque porro et omnis iure accusamus animi ullam libero earum laborum natus unde eum, ipsam ex itaque. Consequuntur cum unde maiores provident, quia repellat corrupti atque veniam totam, magni officiis adipisci minima est inventore perferendis quae asperiores. Quod corrupti tempore aspernatur facilis perferendis praesentium, laboriosam omnis commodi, quae autem maxime sapiente, nam maiores odio error pariatur iusto quos quidem dolorum! Quisquam explicabo quia illo tenetur voluptatibus provident neque, nihil eum dolorem libero pariatur odio quos dignissimos, sint asperiores quam consequatur voluptatem doloremque corporis quidem architecto numquam vero facere. Natus inventore distinctio corporis vero. Asperiores obcaecati, dolorem ratione sequi sit assumenda ad cupiditate corrupti autem, vitae mollitia dicta culpa. Voluptates porro, suscipit nulla nemo amet ex maxime! Vero odit odio error, quos voluptate quibusdam corrupti explicabo, saepe fugit tempore ex. Optio quibusdam, eius, officiis modi expedita deserunt reprehenderit vel qui accusamus distinctio eum voluptates a recusandae laboriosam accusantium! Quo animi consequuntur voluptatum quas fugiat ducimus quisquam a assumenda nostrum natus sed reprehenderit doloremque ad quia possimus, impedit amet neque repellat, adipisci minima incidunt dolorum harum accusamus doloribus. Autem quae suscipit totam recusandae, ut aperiam eaque quibusdam. Minus, culpa alias. Mollitia recusandae autem corporis at? Deserunt, nemo dignissimos. Iure, animi asperiores, saepe, temporibus laboriosam veritatis mollitia dignissimos amet hic quis iste tempore nam ipsum velit tempora quas quia!</div> -->
	<div class=box>4</div>
	</div>
	</div>
	</body>
	</html>