Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

            
              <!DOCTYPE html>
<html>
<head>
	<title>Flexbox Documentation</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" type="text/css" href="styles.css">
	<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
</head>
<body>
	<nav id="navbar">
		<header>
			Flexbox Documentation
		</header>	
		<a href="#Introduction" class="nav-link">Introduction</a>
		<a href="#Specifying_what_elements_to_lay_out_as_flexible_boxes" class="nav-link">Specifying what elements to lay out as flexible boxes</a>
		<a href="#Columns_or_rows?" class="nav-link">Columns or rows?</a>
		<a href="#Wrapping" class="nav-link">Wrapping</a>
		<a href="#Horizontal_and_vertical_alignment" class="nav-link">Horizontal and vertical alignment</a>
		<a href="#Nested_flex_boxes" class="nav-link">Nested flex boxes</a>
		<a href="#Summary" class="nav-link">Summary</a>
	</nav>
	<div id="wrap">
	<main id="main-doc">
		<section class="main-section" id="Introduction">
			<header><span class="fas fa-circle"></span>Introduction</header>
			<p>Flexbox is a one-dimensional layout method for laying out items in rows or columns. Items flex to fill additional space and shrink to fit into smaller spaces. This article explains all the fundamentals.</p>
			<p>For a long time, the only reliable cross browser-compatible tools available for creating CSS layouts were things like floats and positioning. These are fine and they work, but in some ways they are also rather limiting and frustrating.</p>
			<p>The following simple layout requirements are either difficult or impossible to achieve with such tools, in any kind of convenient, flexible way:</p>
			<ul>
				<li>Vertically centering a block of content inside its parent.</li>
				<li>Vertically centering a block of content inside its parent.</li>
				<li>Making all columns in a multiple column layout adopt the same height even if they contain a different amount of content.</li>
			</ul>
			<p>As you'll see in subsequent sections, flexbox makes a lot of layout tasks much easier. Let's dig in!</p>
		</section>

		<section class="main-section" id="Specifying_what_elements_to_lay_out_as_flexible_boxes">
			<header><span class="fas fa-circle"></span>Specifying what elements to lay out as flexible boxes</header>
			<p>To start with, we need to select which elements are to be laid out as flexible boxes. To do this, we set a special value of <code>display</code> on the parent element of the elements you want to affect. In this case we want to lay out the <code>&lt;article&gt;</code> elements, so we set this on the <code>&lt;section&gt;</code> (which becomes a flex container):</p>
	<p class="code"><pre><code>
	section {
	display: flex;
	}
	</code></pre></p>
			<img src="https://i.ibb.co/sH1xgzB/flexbox-example2.png">
			<p>So, this single declaration gives us everything we need — incredible, right? We have our multiple column layout with equal sized columns, and the columns are all the same height. This is because the default values given to flex items (the children of the flex container) are set up to solve common problems such as this. More on those later.</p>
		</section>

		<section class="main-section" id="Columns_or_rows?">
			<header><span class="fas fa-circle"></span>Columns or rows?</header>
			<p>Flexbox provides a property called <code>flex-direction</code> that specifies what direction the main axis runs in (what direction the flexbox children are laid out in) — by default this is set to <code>row</code>, which causes them to be laid out in a row in the direction your browser's default language works in (left to right, in the case of an English browser).</p>
			<p>Try adding the following declaration to your <code>&lt;section&gt;</code> rule:</p>
			<p class="code"><code>flex-direction: column;</code></p>
			<p>You'll see that this puts the items back in a column layout, much like they were before we added any CSS. Before you move on, delete this declaration from your example.</p>
		</section>

		<section class="main-section" id="Wrapping">
			<header><span class="fas fa-circle"></span>Wrapping</header>
			<p>One issue that arises when you have a fixed amount of width or height in your layout is that eventually your flexbox children will overflow their container, breaking the layout. Have a look at our flexbox-wrap0.html example, and try viewing it live (take a local copy of this file now if you want to follow along with this example):</p>
			<img src="https://i.ibb.co/Y8zsDTm/flexbox-example3.png">
			<p>Here we see that the children are indeed breaking out of their container. One way in which you can fix this is to add the following declaration to your <code>&lt;section&gt;</code> rule:</p>
			<p class="code"><code>flex-wrap: wrap;</code></p>
			<p>Also, add the following declaration to your <code>&lt;article&gt;</code> rule:</p>
			<p class="code"><code>flex: 200px;</code></p>
			<img src="https://i.ibb.co/VtZByJz/flexbox-example4.png">
			<p>We now have multiple rows — as many flexbox children are fitted onto each row as makes sense, and any overflow is moved down to the next line. The <code>flex: 200px</code> declaration set on the articles means that each will be at least 200px wide; we'll discuss this property in more detail later on. You might also notice that the last few children on the last row are each made wider so that the entire row is still filled.</p>
		</section>

		<section class="main-section" id="Horizontal_and_vertical_alignment">
			<header><span class="fas fa-circle"></span>Horizontal and vertical alignment</header>
			<p>You can also use flexbox features to align flex items along the main or cross axis.</p>
			<p>Add the following to the bottom of the example's CSS:</p>
	<p class="code"><pre><code>
	div {
	display: flex;
	align-items: center;
	justify-content: space-around;
	}
	</code></pre></p>
			<ul>
				<li>By default, the value is stretch, which stretches all flex items to fill the parent in the direction of the cross axis. If the parent hasn't got a fixed width in the cross axis direction, then all flex items will become as long as the longest flex items. This is how our first example got equal height columns by default.
				</li>
				<li>The center value that we used in our above code causes the items to maintain their intrinsic dimensions, but be centered along the cross axis. This is why our current example's buttons are centered vertically.</li>
				<li>You can also have values like <code>flex-start</code> and <code>flex-end</code>, which will align all items at the start and end of the cross axis respectively.</li>
			</ul>
		</section>

		<section class="main-section" id="Nested_flex_boxes">
			<header><span class="fas fa-circle"></span>Nested flex boxes</header>
			<p>It is possible to create some pretty complex layouts with flexbox. It is perfectly ok to set a flex item to also be a flex container, so that its children are also laid out like flexible boxes.</p>
			<img src="https://i.ibb.co/FhsqdgR/flexbox-example7.png">
			<p>First of all, we set the children of the <code>&lt;section&gt;</code> to be laid out as flexible boxes.</p>
	<p class="code"><pre><code>
	div {
	display: flex;
	}
	</code></pre></p>
			<p>Next, we set some flex values on the <code>&lt;article&gt;</code>s themselves. Take special note of the 2nd rule here — we are setting the third <code>&lt;article&gt;</code> to have its children laid out like flex items too, but this time we are laying them out like a column.</p>
	<p class="code"><pre><code>
	article {
	flex: 1 200px;
	}

	article:nth-of-type(3) {
	flex: 3 200px;
	display: flex;
	flex-flow: column;
	}
	</code></pre></p>
			<p>Next, we select the first <code>&lt;div&gt;</code>. We first use flex:1 100px; to effectively give it a minimum height of 100px, then we set its children (the <code>&lt;button&gt;</code> elements) to also be laid out like flex items. Here we lay them out in a wrapping row, and align them in the center of the available space like we did in the individual button example we saw earlier.</p>
	<p class="code"><pre><code>
	article:nth-of-type(3) div:first-child {
		flex:1 100px;
		display: flex;
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-around;
	}
	</code></pre></p>
			<p>Finally, we set some sizing on the button, but more interestingly we give it a flex value of 1 auto. This has a very interesting effect, which you'll see if you try resizing your browser window width. The buttons will take up as much space as they can and sit as many on the same line as they can, but when they can no longer fit comfortably on the same line, they'll drop down to create new lines.</p>
	<p class="code"><pre><code>
	button {
	flex: 1 auto;
	margin: 5px;
	font-size: 18px;
	line-height: 1.5;
	}
	</code></pre></p>
		</section>

		<section class="main-section end" id="Summary">
			<header><span class="fas fa-circle"></span>Summary</header>
			<p>That concludes our tour of the basics of flexbox. We hope you had fun, and will have a good play around with it as you travel forward with your learning.</p>
		</section>
	</main>
	<footer>
		<div class="social">
				<h4>Made with <span class="fas fa-heart red"></span> by Basith</h4>
				<p> Links to my profiles: 
				<a href="https://github.com/BasithAbdul"><span class="fab fa-github"></span></a>
				<a href="https://www.freecodecamp.org/basithabdul"><span class="fab fa-free-code-camp"></span></a>
			</div>
			<div class="reference">
				<h4>Reference</h4>
				<p>All the documentation in this page is taken from <a href="https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox">MDN</a></p>
			</div>
	</footer>
	</div>
</body>
</html>
            
          
!

CSS

            
              body{
	margin: 0px;
	padding: 0px;	
	font-family: sans-serif;
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	color: #17202A;
}

a{
	text-decoration: none;
	color: #75ddff;
}

a:hover{
	color: #c97b57;
}
img{
	margin: auto;
	width: 50%;
	margin-top: 30px;
	margin-bottom: 30px;
}
nav{
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	position: fixed;
	left: 0;
	height: 100vh;
	width: 20%;
	padding: 20px 0px;
	box-sizing: border-box;
	background-color: #F7F9F9;
	border-right: 2px solid #F0F3F4;
	overflow: auto;
}
nav header{
	font-size: 1.5em;
	padding: 20px 10px;
	text-align: center;
}
nav a.nav-link{
	display: block;
	padding: 20px 20px;
	border-bottom: 1px solid #B3B6B7;
	color: #57a5bd;
}
nav a.nav-link:hover{
	color: #c97b57;
}
#wrap{
	width: 80%;
	align-self: flex-end;
	width: 80%;	
	box-sizing: border-box;
	padding: 30px;
}
#wrap header{
	color: #57a5bd;
}
main{
	display: flex;
	flex-direction: column;
}
.main-section{
	display: flex;
	flex-direction: column;
	border-bottom: 1px solid #c97b57;
	margin-bottom: 50px;
	padding-bottom: 50px;
}
.main-section header{
	font-size: 2em;
}
header span.fas{
	color: #c97b57;
	font-size: 0.6em;
	padding: 0 10px 5px 0;
}
.main-section p{

}
.main-section ul{

}
.main-section li{

}
code{
	background-color: #ECF0F1;
	font-family: monospace;
}
.code > code{
	background-color: #ECF0F1;
	border-radius: 10px;
	padding: 10px;
	display: block;
}

pre{
	display: block;
	background-color: #ECF0F1;
	border-radius: 10px;
}

img{

}
footer{
	display: flex;
	flex-direction: column;
}
.red{
	color: red;
}
.end{
	border-bottom-width: 2px;
}
footer div{

}

@media screen and (max-width: 900px)
{
	.main-section header{
	font-size: 1.8em;
}
	nav header{
	font-size: 1.2em;
	padding: 20px 10px;
	}
	nav a.nav-link{
	display: block;
	padding: 15px 15px;
	}
	img{
		width: 60%;
	}
}

@media screen and (max-width: 700px)
{
	.main-section header{
	font-size: 1.7em;
}
	nav header{
	font-size: 1em;
	padding: 20px 5px;
	}
	nav a.nav-link{
	font-size: 0.8em;
	padding: 15px 5px;
	}
	img{
		width: 70%;
	}
}

@media screen and (max-width: 630px)
{
	.main-section header{
	font-size: 1.5em;
	}
	nav{
	position: initial;
	height: auto;
	width: auto;
	padding: 20px 0px;
	border-bottom: 2px solid #F0F3F4;
	overflow: auto;
	}
	nav header{
	font-size: 1.5em;
	padding: 20px 30px;
	text-align: center;
	}
	nav a.nav-link{
	font-size: 1em;
	padding: 15px 30px;
	border: none;
	}
	#wrap{
	align-self: stretch;	
	box-sizing: border-box;
	padding: 30px;
	width: auto;
	}
	img{
		width: 80%;
	}
}
            
          
!

JS

            
              
            
          
!
999px

Console