css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

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.

            
              <!DOCTYPE html>

<head>
</head>

<body>
  <header>
    <div class="navbar">
      <h2 style="color: white;">codeFreeCamp</h2>
    </div>
  </header>
  <main>

    <section class="nav" id="nav">
      <!-- Big nav bar for bigger screens -->
      <ul class="mainUL">
        <div class="rowArrow navMargin">
          <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
          <li><a href="#">Home</a></li>
        </div>
        <hr/>
        <div class="rowArrow">
          <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
          <li><a href="#">HTML</a></li>
        </div>
        <div class="rowArrow navMargin">
          <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
          <li><a href="#">CSS</a></li>
        </div>
        <ul>
          <div class="rowArrow navMargin">
            <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
            <li><a href="#">Basics</a></li>
          </div>
          <div class="rowArrow navMargin">
            <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
            <li><a href="#">Animations</a></li>
          </div>
          <div class="rowArrow navMargin">
            <img style="width: 20px; height: 20px;" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
            <li><a href="#">Flex Box</a></li>
          </div>
          <ul>
            <li class="noArrow navMargin"><a href="#introduction">Introduction</a></li>
            <div class="rowArrow">
              <img id="parentArrow" style="width: 20px; height: 20px;" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
              <li><a href="#" id="parentOpen">Parent</a></li>
            </div>
            <div id="parent">
              <ul>
                <li class="noArrow navMargin"><a href="#display">display</a></li>
                <li class="noArrow navMargin"><a href="#flex-direction">flex-direction</a></li>
                <li class="noArrow navMargin"><a href="#flex-wrap">flex-wrap</a></li>
                <li class="noArrow navMargin"><a href="#justify-content">justify-content</a></li>
                <li class="noArrow navMargin"><a href="#align-items">align-items</a></li>
                <li class="noArrow navMargin"><a href="#align-content">align-content</a></li>
              </ul>
            </div>
            <!-- container -->
            <div class="rowArrow navMargin"><img id="childrenArrow" style="width: 20px; height: 20px;" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
              <li><a href="#" id="childrenOpen">Children</a></li>
            </div>
            <div id="children">
              <ul>
                <li class="noArrow navMargin"><a href="#order">order</a</li><li class="noArrow navMargin"><a href="#flex-grow">flex-grow</a></li>
                <li class="noArrow navMargin"><a href="#flex-shrink">flex-shrink</a></li>
                <li class="noArrow navMargin"><a href="#align-self">align-self</a></li>
              </ul>
            </div>
            <!-- items -->
          </ul>
          <div class="rowArrow navMargin">
            <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
            <li><a href="#" target="_blank">CSS Grid</a></li>
          </div>
          <!-- flex-box sub content  -->

        </ul>
        <!--       flex-box itself-->
        <div class="rowArrow navMargin">
          <img style="width: 20px; height: 20px;  transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
          <li><a href="#" target="_blank">JavaScript</a></li>
        </div>
        <div class="rowArrow navMargin">
          <img style="width: 20px; height: 20px; transform: rotate(270deg)" src="https://s19.postimg.cc/5hfp7c54z/down_arrow_solid_small_510702.png" />
          <li><a href="#" target="_blank">Tips & Tricks</a></li>
        </div>
    </section>

    <section class="gui">
      <div class="newNav">
        <!-- NAv bar for smaller screens -->
        <div class="navMiniBar" id="layer1">
          <button class="navMiniBarItem">HTML</button>
          <button class="navMiniBarItem selected">CSS</button>
          <button class="navMiniBarItem">JavaScript</button>
          <button class="navMiniBarItem">Tips & Tricks</button>
        </div>
        <div class="navMiniBar" id="layer2">
          <button class="navMiniBarItem">Basics</button>
          <button class="navMiniBarItem">Animations</button>
          <button class="navMiniBarItem selected" id="flexboxMiniBar">Flex Box</button>
          <button class="navMiniBarItem">Grid</button>
        </div>
        <div id="replaceContainer">
          <div class="navMiniBar" id="layer3">
            <button class="navMiniBarItem selected noHover">Container</button>
            <button class="navMiniBarItem">Children</button>
          </div>
          <div class="navBigBar">
            <div class="backDiv">
              <button class="backButton">Back</button>
            </div>
            <div class="bigBarBtnsWrapper">
              <a class="navBigBarItem" href="#display">display</a>
              <a class="navBigBarItem" href="#flex-direction">flex-direction</a>
              <a class="navBigBarItem" href="#flex-wrap">flex-wrap</a>
              <a class="navBigBarItem" href="#justify-content">justify-content</a>
              <a class="navBigBarItem" href="#align-items">align-items</a>
              <a class="navBigBarItem" href="#align-content">align-content</a>
            </div>
          </div>
        </div>
        <!--- replace -->
        <div id="replaceChildren">
          <div class="navMiniBar" id="layer3">
            <button class="navMiniBarItem" id="container">Container</button>
            <button class="navMiniBarItem selected" id="children">Children</button>
          </div>
          <div class="navBigBar">
            <div class="backDiv">
              <button class="backButton">Back</button>
            </div>
            <div class="bigBarBtnsWrapper">
              <a class="navBigBarItem" href="#order">order</a>
              <a class="navBigBarItem" href="#flex-grow">flex-grow</a>
              <a class="navBigBarItem" href="#flex-shrink">flex-shrink</a>
              <a class="navBigBarItem" href="#align-self">align-self</a>
            </div>
          </div>
        </div>
        <!--- replace -->
        <div id="replaceBoth">
          <div class="navBigBar">
            <div class="backDiv">
              <button class="backButton">Back</button>
            </div>
            <div class="bigBarBtnsWrapper">
              <a class="bigFlexTopicBtn container" href="#">Container</a>
              <a class="bigFlexTopicBtn children" href="#">Children</a>
            </div>
          </div>
          <div class="navMiniBar" id="layer3" style="border-top: 1px solid black;"></div>
        </div>
      </div>

      <div class="guiHeader">
        <h1>Learn Flexbox</h1>
        <h3>CSS > Flex Box</h3>
      </div>
      <div class="guiHeader">
        <h4>Written by Michael Nicol: 10/5/18</h4>
      </div>
      <div class="guiBody">
        <div class="guiSwitch">
          <!-- hide on smaller screens in repalace of new Nav, then gets ininstated on smallest screen size.-->
          <button class="guiSwitchItem" id="containerBtn">Flex Container</button>
          <button class="guiSwitchItem" id="itemsBtn">Flex Items</button>
        </div>
        <div id="guiContent">
          <h2 class="title" id="introduction">Introduction</h2>
          <hr/>
          <p>
            The one-dimensional layout model, known as Flex Box, is a powerful tool when it comes to responsive web development. It is easy, simple, and expanable. With this documenation, you will learn the different properties for both Parent and Children.

          </p>
          <h2 class="title">Parent (container)</h2>
          <hr/>
          <h3 class="subTitle" id="display">Display</h3>
          <p>To initialize a flex container, you will use <code>display: flex;</code>. This allows the Parent container and the Children items to be affected by the flex propteries.</p>

          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode">
              <br>
              <span style="color: #DDC981">.container</span> {
              <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
              <br> }
              <br> &nbsp;
            </div>
          </div>
          <h3 class="subTitle" id="flex-direction">Flex Direction</h3>
          <p>For arranging Children in the Parent in a controlable manner, you can use <code class="language-css">flex-direction</code>. With this comes four options which are:</p>
          <ul class="guiList">
            <li class="guiListElement"><code>row</code>: left to right arrgament.</li>
            <li class="guiListElement"><code>row-reverse</code>: right to left.</li>
            <li class="guiListElement"><code>column</code>: up and down, main axis and lines are flipped on side.</li>
            <li class="guiListElement"><code>column-reverse</code> bottom to top.
            </li>
          </ul>

          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode">
              <br>
              <span style="color: #DDC981">.container</span> {
              <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;
              <br> }
              <br> &nbsp;
            </div>
          </div>
          <h3 class="subTitle" id="flex-wrap">Flex Wrap</h3>
          <p>When it comes to responsiveness in CSS, Flex box has something called <code>flex-wrap</code>. This allows you to specify how items will wrap around or move on different sized viewports. Without this feature, items would all compress on the same
            line. The three options include:</p>
          <ul class="guiList">
            <li class="guiListElement"><code>nowrap</code>: keeps all the items on one line, this is the default.</li>
            <li class="guiListElement"><code>wrap</code>: wrap onto the row below.</li>
            <li class="guiListElement"><code>wrap-reverse</code>: wrap onto the row above.</li>
            </li>
          </ul>
          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode">
              <br>
              <span style="color: #DDC981">.container</span> {
              <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-reverse</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;
              <br> }
              <br> &nbsp;
            </div>
          </div>
          <img class="axisImage" src="https://user-images.githubusercontent.com/7157346/31702339-fdc9afe6-b39b-11e7-9145-6a6160f99fa3.png"></img>
          <h3 class="subTitle" id="justify-content">Justify Content</h3>
          <p><code>justify-content</code> is responable for arranging the children along the main axis (right and left/ side to side). The set property does carry onto other lines when items wrap. This is a powerful tool for utilizing space on flexiable
            and inflexable lines.</p>
          <ul class="guiList">
            <li class="guiListElement"><code>nowrap</code>: keeps all the items on one line, this is the default.</li>
            <li class="guiListElement"><code>wrap</code>: wrap onto the row below.</li>
            <li class="guiListElement"><code>wrap-reverse</code>: wrap onto the row above.</li>
            </li>
          </ul>
          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode">
              <br>
              <span style="color: #DDC981">.container</span> {
              <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;
              <br> }
              <br> &nbsp;
            </div>

          </div>
          <img class="baselineImg" src="https://i.stack.imgur.com/vxEeG.png" />

          <h3 class="subTitle" id="align-items">Align Items</h3>
          <p>For aligning Children on the cross axis however (top to bottom) you will use <code>align-items</code>. This is like the opposite version of <code>justify-content</code>. Please do not use with more then one line of content, instead use <code>align-content</code>            which is explained below.</p>
          <ul class="guiList">
            <li class="guiListElement"><code>flex-start</code>: Items are placed from top facing downwards of set line.</li>
            <li class="guiListElement"><code>flex-end</code>: Items are placed from bottom facin upwards of set line.</li>
            <li class="guiListElement"><code>baseline</code>: Aligns items based on content.</li>
            <li class="guiListElement"><code>stretch</code>: Respective of min/max-width, will equally stretch items from top to bottom of container/ line.</li>
            </li>
          </ul>
          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode">
              <br>
              <span style="color: #DDC981">.container</span> {
              <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;
              <br> &nbsp;&nbsp;<span style="color: #958195">align-items</span>: <span style="color: #CE6953">flex-start | flex-end | center | baseline | stretch</span>;
              <br> }
              <br> &nbsp;
            </div>
          </div>
          <h3 class="subTitle" id="align-content">Align Content</h3>
          <p>Instead of targeting the individual elements, <code>align-content</code> targets the lines themselves. This allows for more control with more content. Note that this does not work on a single line of content.</p>
          <ul class="guiList">
            <li class="guiListElement"><code>flex-start</code>: All lines in the container are moved to the start.</li>
            <li class="guiListElement"><code>flex-end</code>: All lines are moved to the end of container.</li>
            <li class="guiListElement"><code>stretch</code>: All children are strecthed in respect of their lines to fill up the container. Still honors min/max-width.</li>
            <li class="guiListElement"><code>space-between</code>: The lines are equally spaced amoung the container from start to end.</li>
            <li class="guiListElement"><code>space-around</code>: The lines are equally spaced but includes the inner edges of the container. This is useful because <code>space-between</code> only focuses on the start and end of the line (top and bottom), not the spacing on the
              sides.
            </li>
            </li>
          </ul>
          <div class="codeDisplay">
            <div class="codeHeader">
              <h4>Example code</h4>
            </div>
            <div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;<br>              &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">align-items</span>: <span style="color: #CE6953">flex-start | flex-end | baseline | stretch</span>;<br>              &nbsp;&nbsp;<span style="color: #958195">align-content</span><span style="color: #CE6953">flex-start | flex-end | center | space-between | space-around | stretch</span>;<br> }<br> &nbsp;</div>
          </div>
          <h6 style="text-align: center">This was all done based off of <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> by CSS Tricks.</h3>
        </div>
   <a href="https://codepen.io/Mike-was-here123/full/BOBmzY/" target='_blank'>
  <div class="ad adBox">
  </div>
  </a>
    </section>
    <section id="source">
      <h2 class="relatedLinksTitle">Related Links (sources)</h2>
      <ul class="mainUL">
        <li class="relatedLink"><a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">Complete Guide to Flex box</a></li>
        <li class="relatedLink"><a href="https://stackoverflow.com/a/34611670" target="_blank">What is Baseline?</a></li>
        <li class="relatedLink"><a href="https://learn.freecodecamp.org/responsive-web-design/css-flexbox" target="_blank">Learn Flex Box on freecodecamp.org</a></li>
        <li class="relatedLink"><a href="https://www.canva.com/" target="_blank">Canva - Free online graphic design</a></li>
        <li class="relatedLink"><a href="http://quirktools.com/screenfly/" target="_blank">Screeenfly - Test responsiveness</a></li>
        <li class="relatedLink"><a href="https://www.freecodecamp.org/" target="_blank">freeCodeCamp - 1000+ challenges to learn Front End</a></li>
        <li class="relatedLink"><a href="https://www.freecodecamp.org/forum/" target="_blank">freeCodeCamp Fourm - Great commuinity</a></li>
        <li class="relatedLink"><a href="https://codepen.io/Mike-was-here123/post/check-out-these-sites" target="_blank">An Codepen post i made on useful Front End tools</a></li>
      </ul>
      <a href="https://codepen.io/Mike-was-here123/full/BOBmzY/" target='_blank'>
        <div class="ad adVertical">
        </div>
      </a>
  </main>
  <!-- For some reason i could not get this footer to work. -->
  <!--   <footer>
 </footer> -->
</body>
            
          
!
            
              /*  body/ general stuff  */
body {
  min-width: 270px;
  max-width: 1920px;
}
::-webkit-scrollbar {
  display: none;
}
main {
  display: flex;
  flex-direction: row;
}
.hide {
  display: none;
}

header {
  width: 100%;
  height: 62px;
  background-color: #78a7e8;
  box-shadow: 2px 2px 5px;
}

.logo {
  padding-top: 10px;
  border: 1px solid black;
}

/* navbar */
.sticky {
  position: sticky;
  top: 0;
}
.sticky + .content {
  padding-top: 60px;
}
.newNav {
  display: none;
  position: sticky;
  width: 100%;
  border: 1px solid black;
  height: relative;
  margin-bottom: 20px;
  margin-top: 20px;
  box-shadow: 2px 2px 5px;
}
.navMiniBar,
.navBigBar {
  height: relative;
  width: 100%;
  display: flex;
  flex-direction: row;
}
.navMiniBar {
  height: 24px;
  background-color: #ededed;
}
.navBigBar {
  display: flex;
  flex-direction: row;
  height: 140px;
}
.navBigBarItem,
.bigFlexTopicBtn {
  border: 1px solid black;
  height: 40px;
  padding: 7px;
  width: relative;
  margin: 2% 3% 10px 3%;
  font-size: 22px;
  text-align: center;
  background-color: #ededed;
  border-radius: 5px;
  color: black;
}
.bigBarBtnsWrapper {
  padding: 5px;
  background-color: white;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  overflow-y: scroll;
  text-align: center;
  color: black;
}
.bigFlexTopicBtn {
  margin-left: 20px;
  height: relative;
  font-size: 30px;
  text-align: center;
  color: black;
  max-width: 40%;
  width: 40%;
}
.noHover {
  cursor: default;
}
.bigFlexTopicBtn:hover,
.navBigBarItem:hover {
  color: black;
  transform: scale(1.1);
}
.backDiv {
  width: relative;
  border-right: 1px solid black;
}
.backButton {
  width: auto;
  height: 100%;
  font-size: 22px;
}
.navMiniBarItem {
   cursor: default;
  text-align: center;
  border-right: 1px solid black;
  font-size: 20px;
  height: 24px;
  padding: 5px;
  color: black;
  border: none;
  background-color: #ededed;
  padding: 2px;
  border-right: 1px solid black;
  border-bottom: 1px solid black;
}
#layer1 > button,
#layer2 > button {
  width: 25%;
}
#layer3 > button {
  width: 50%;
}
#backButton {
  height: 40px;
  color: white;
  border: none;
}
.selected {
  background-color: #78a7e8;
  color: white;
  border-bottom: 0px solid black;
}
/* Regular bar */

.nav {
  position: sticky;
  top: 0;
  padding: 5px;
  /*   position: fixed; */
  background-color: #ededed;
  height: 100vh;
  overflow-y: scroll;
  width: 350px;
  min-width: 350px;
  box-shadow: 2px 2px 5px;
  margin: 20px 20px 0px 0px;
}
.relatedLinksTitle {
  text-align: left;
  font-size: 22px;
  text-decoration: underline;
}
.relatedLink {
  font-size: 17px;
  margin-top: 20px;
  list-style-type: circle;
}
.relatedLink > a {
  color: blue;
}
.mainUL {
  font-size: 20px;
  border: 0px solid white !important;
}
.mainUL > hr {
  border: 0.5px solid black;
  width: 100%;
}
ul {
  list-style-type: none;
  border-left: 1px solid gray;
}
.rowArrow {
  display: flex;
  flex-direction: row;
  /*  margin: 12px 0px 12px 0px; */
}
.navMargin {
  margin: 12px 0px 12px 0px;
}
.noArrow {
  margin: 12px 0px 12px 15px;
}
li > a,
li > a:hover {
  color: black;
}
/* gui */
.guiSwitchItem {
  width: 50%;
  font-size: 30px;
}
.guiSwitch {
  width: 100%;
  height: 70px;
  border-bottom: 1px solid black;
  display: flex;
  flex-direction: row;
}
#containerBtn {
  background-color: #78a7e8;
  color: white;
}
.gui {
  height: relative;
  width: 800px;
  margin: 20px 20px 0px 10px;
}

.title {
  text-align: center;
  font-size: 30px;
}
h1 {
  text-align: left;
  font-size: 50px;
}
.guiHeader {
  height: relative;
}

.guiHeader > h3 {
  font-size: 26px;
}

.guiBody {
  background-color: #ededed;
  box-shadow: 2px 2px 5px;
  margin-bottom: 20px;
  border: 1px solid black;
  height: 100%;
  width: relative;
}

#guiContent > hr {
  width: 85%;
  border: 1px solid black;
  box-shadow: 2px 2px 5px;
  margin: 0 auto;
  margin-bottom: 10px;
}
.guiListElement {
  list-style-type: circle;
  font-size: 17px;
  padding: 5px 20px 0px 5px;
}
.guiList {
  margin-left: 100px;
  border-left: 0px;
}
p {
  text-align: left;
  padding-left: 20px;
  padding-right: 20px;
  font-size: 17px;
}
.subTitle {
  font-size: 26px;
  padding-left: 20px;
}

.axisImage {
  width: 100%;
  height: auto;
  box-shadow: 2px 2px 5px;
}

.baselineImg {
  margin-left: 2.5%;
  width: 95%;
  height: auto;
  box-shadow: 2px 2px 5px;
}

h6 {
  font-size: 17px;
}
/* GUI --> code */

.codeDisplay {
  overflow-x: scroll;
  width: relative;
  min-width: 600px;
  max-width: 600px;
  height: relative;
  border: 1px solid black;
  margin: 0 auto;
  margin-bottom: 20px;
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  wrap: nowrap;
  background-color: #1d1e22;
}
.codeHeader {
  width: 100%;
  height: 30px;
  background-color: #78a7e8;
}
.codeHeader > h4 {
  font-size: 17px;
  color: white;
  margin: 5px 0px 0px 8px;
}
.fakeCode {
  font-family: Monaco, monospace;
  color: white;
  width: 100%;
  font-size: 15px;
  margin: -4px 0px 0px 10px;
}
code {
  font-size: 16px;
  padding: 0px;
}
/* sources */

#source {
  background-color: #ededed;
  box-shadow: 2px 2px 5px;
  height: relative;
  padding: 20px;
  margin-top: 20px;
  max-width: 400px;
  margin-bottom: 5%;
}

/* sources > ad */

.ad {
  border: 1px solid black;
  top: 0;
  position: sticky;
}
.adVertical {
  background: url("https://i.postimg.cc/XYR10y8T/Tele_X_Teleportation.jpg")
    no-repeat center;
  height: 775px;
  width: 250px;
  margin: 20% auto 10% auto;
}
.adBox {
    background: url("https://i.postimg.cc/s2WvZNb0/Shop_Tele_X_Teleportation_for_our.._1.jpg")
    no-repeat center;
    height: 400px;
  width: 500px;
   margin: 4% auto -1% auto;
}
/* footer*/
.footer {
  height: 50px;
  background-color: #78a7e8;
  width: 100%;
}

@media screen and (max-width: 1300px) {
  .nav {
    display: none;
  }
  .guiSwitch {
    display: none;
  }
  main {
    flex-direction: column;
    align-items: center;
  }
}
@media screen and (max-width: 1301px) {
  .nav {
    display: none;
  }
  .newNav {
    display: block;
  }
  .ad {
    margin-top: 0;
    display: none;
  }
  #source {
    max-width: 100%;
   width: 65%;
  }
}
@media screen and (max-width: 812px) {
  .gui {
    width: 100%;
    margin: 0px;
  }
  body {
    padding: 0;
  }
  .codeDisplay {
    width: 100%;
    min-width: 0px;
  }
  .guiList {
    margin-left: 5px;
  }
  p {
    padding: 0px;
    margin-left: 5px;
  }
  #source {
    margin-top: 0;
    width: 95%;
  }
}

@media screen and (max-width: 500px) {
  .ad {
    display: none;
  }
  .newNav {
    display: none;
  }
  .guiSwitch {
    display: block;
    flex-direction: column;
  }
  .guiSwitchItem {
    width: 100%;
    padding: 10px;
  }
  .guiSwitch {
    height: 100%;
  }
  .guiHeader,
  h1 {
    text-align: center;
  }
  .subTitle {
    text-align: center;
  }
  .title {
    tetx-align: center;
  }
  hr {
    width: 100%;
  }
  .logo {
    text-align: center;
  }
  #source {
    margin-top: 0;
    width: 100%;
  }
}

            
          
!
            
              $(function() {
  $("#children").addClass("hide");
  $("#parentArrow").css("transform", "rotate(360deg)");
  $("#childrenArrow").css("transform", "rotate(270deg)");
});
$("#containerBtn, .container, #parentOpen").click(function() {
  $("#children").addClass("hide");
  $("#parent").removeClass("hide");
  $("#childrenArrow").css("transform", "rotate(270deg)");
  $("#parentArrow").css("transform", "rotate(360deg)");
  $("#containerBtn").css({ "background-color": "#78a7e8", color: "white" });
  $("#itemsBtn").css({ "background-color": "#ededed", color: "black" });
  // acts like database
  $("#guiContent").html("");
  $("#guiContent").html(
    `<h2 class="title" id="introduction">Introduction</h2><hr/><p>The one-dimensional layout model, known as Flex Box, is a powerful tool when it comes to responsive web development. It is easy, simple, and expanable. With this documenation, you will learn the different properties for both Parent/ container and Children/ item(s).</p><h2 class="title">Parent (container)</h2><hr/><h3 class="subTitle" id="display">Display</h3><p>To initialize a flex container, you will use <code>display: flex;</code>. This allows the Parent container and the Children items to be affected by the flex propteries.</p><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> }<br> &nbsp;</div></div><h3 class="subTitle" id="flex-direction">Flex Direction</h3><p>For arranging Children in the Parent in a controlable manner, you can use <code class="language-css">flex-direction</code>. With this comes four options which are:</p><ul class="guiList"><li class="guiListElement"><code>row</code>: left to right arrgament</li><li class="guiListElement"><code>row-reverse</code>: right to left.</li><li class="guiListElement"><code>column</code>: up and down, main axis and lines are flipped on side.</li><li class="guiListElement"><code>column-reverse</code> bottom to top</li></ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> { <br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;<br> }<br> &nbsp;</div></div><h3 class="subTitle" id="flex-wrap">Flex Wrap</h3><p>When it comes to responsiveness in CSS, Flex box has something called <code>flex-wrap</code>. This allows you to specify how items will wrap around or move on different sized viewports. Without this feature, items would all compress on the same line. The three options include:</p><ul class="guiList"><li class="guiListElement"><code>nowrap</code>: keeps all the items on one line, this is the default.</li><li class="guiListElement"><code>wrap</code>: wrap onto the row below</li><li class="guiListElement"><code>wrap-reverse</code>: wrap onto the row above.</li></li></ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-reverse</span>; <br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>; <br>}<br> &nbsp;</div></div><img class="axisImage" src="https://user-images.githubusercontent.com/7157346/31702339-fdc9afe6-b39b-11e7-9145-6a6160f99fa3.png"></img><h3 class="subTitle" id="justify-content">Justify Content</h3><p><code>justify-content</code> is responable for arranging the children along the main axis (right and left/ side to side). The set property does carry onto other lines when items wrap. This is a powerful tool for utilizing space on flexiable and inflexable lines.</p><ul class="guiList"><li class="guiListElement"><code>nowrap</code>: keeps all the items on one line, this is the default.</li><li class="guiListElement"><code>wrap</code>: wrap onto the row below.</li><li class="guiListElement"><code>wrap-reverse</code>: wrap onto the row above.</li></li> </ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;<br> }<br> &nbsp;</div></div><img class="baselineImg" src="https://i.stack.imgur.com/vxEeG.png" /><h3 class="subTitle" id="align-items">Align Items</h3><p>For aligning Children on the cross axis however (top to bottom) you will use <code>align-items</code>. This is like the opposite version of <code>justify-content</code>. Please do not use with more then one line of content, instead use <code>align-content</code>which is explained below.</p><ul class="guiList"><li class="guiListElement"><code>flex-start</code>: Items are placed from top facing downwards of set line.</li><li class="guiListElement"><code>flex-end</code>: Items are placed from bottom facin upwards of set line.</li><li class="guiListElement"><code>baseline</code>: Aligns items based on content.</li><li class="guiListElement"><code>stretch</code>: Respective of min/max-width, will equally stretch items from top to bottom of container/ line.</li></li></ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">align-items</span>: <span style="color: #CE6953">flex-start | flex-end | center | baseline | stretch</span>;<br> }<br> &nbsp;</div></div><h3 class="subTitle">Align Content</h3><p>Instead of targeting the individual elements, <code>align-content</code> targets the lines themselves. This allows for more control with more content. Note that this does not work on a single line of content.</p><ul class="guiList"><li class="guiListElement"><code>flex-start</code>: All lines in the container are moved to the start.</li><li class="guiListElement"><code>flex-end</code>: All lines are moved to the end of container.</li><li class="guiListElement"><code>stretch</code>: All children are strecthed in respect of their lines to fill up the container. Still honors min/max-width.</li><li class="guiListElement"><code>space-between</code>: The lines are equally spaced amoung the container from start to end.</li><li class="guiListElement"><code>space-around</code>: The lines are equally spaced but includes the inner edges of the container. This is useful because <code>space-between</code> only focuses on the start and end of the line (top and bottom), not the spacing on thesides.</li></li></ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.container</span> {<br> &nbsp;&nbsp;<span style="color: #958195">display</span>: <span style="color: #CE6953">flex</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-direction</span>: <span style="color: #CE6953">row | row-reverse | column  | column-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-wrap</span>: <span style="color: #CE6953">nowrap | wrap | wrap-revserse</span>;<br> &nbsp;&nbsp;<span style="color: #958195">align-items</span>: <span style="color: #CE6953">flex-start | flex-end | baseline | stretch</span>;<br> &nbsp;&nbsp;<span style="color: #958195">align-content</span><span style="color: #CE6953">flex-start | flex-end | center | space-between | space-around | stretch</span>;<br> }<br> &nbsp;</div></div><h6 style="text-align: center">This was all done based off of <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> by CSS Tricks.</h3>`
  );
});
$("#itemsBtn, .children, #childrenOpen").click(function() {
  $("#parentArrow").css("transform", "rotate(270deg)");
  // made by MICHAEL NICOL
  $("#childrenArrow").css("transform", "rotate(360deg)");
  $("#parent").addClass("hide");
  $("#children").removeClass("hide");
  $("#itemsBtn").css({ "background-color": "#78a7e8", color: "white" });
  $("#containerBtn").css({ "background-color": "#ededed", color: "black" });
  $("#guiContent").html("");
  $("#guiContent").html(
    '<h2 class="title" id="introduction">Introduction</h2><hr/><p>The one-dimensional layout model, known as Flex Box, is a powerful tool when it comes to responsive web development. It is easy, simple, and expanable. With this documenation, you will learn the different properties for both Parent/ container and Children/ item(s).</p><h2 class="title">Children (items)</h2><hr/><h3 class="subTitle" id="order">Order</h3><p>To place content in a flex container in a paricular order, you can use <code>order</code>. It works by allowing you to assign each item a number, and and the lowest numbe would be displayed first. This works with negitive numbers, in both row and column.</p><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.item1</span> {<br> &nbsp;&nbsp;<span style="color: #958195">order</span>: <span style="color: #CE6953">1</span>; &nbsp;&nbsp;<span style="color: #666666">/* This will come first */</span><br> }<br> &nbsp;<br><span style="color: #DDC981">.item2</span> {<br> &nbsp;&nbsp;<span style="color: #958195">order</span>: <span style="color: #CE6953">2</span>;&nbsp;&nbsp;<span style="color: #666666">/* This will come second */</span><br> }<br> &nbsp;</div></div><h3 class="subTitle" id="flex-grow">Flex Grow</h3><p>In order to proportinaility take up space amoung the items in the HTML, you can use <code>flex-grow</code>. Each item can be given a number in which 1 acts as defualt and 2 is twice as much space. No negaitive numbers.</p><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.item1</span> {<br> &nbsp;&nbsp;<span style="color: #958195">flex-grow</span>: <span style="color: #CE6953">1</span>; &nbsp;&nbsp;<span style="color: #666666">/* This will take up default amount of space */</span><br> }<br> &nbsp;<br><span style="color: #DDC981">.item2</span> {<br> &nbsp;&nbsp;<span style="color: #958195">flex-grow</span>: <span style="color: #CE6953">2</span>;&nbsp;&nbsp;<span style="color: #666666">/* Twice amount of available space as .item1 */</span><br> }<br> &nbsp;</div></div><h3 class="subTitle" id="flex-shrink">Flex Shrink</h3><p>Instead of growing a item like in <code>flex-grow</code>, you can do the opposite with <code>flex-shrink</code>. Works the same way, 1 being default.</p><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.item</span> {<br> &nbsp;&nbsp;<span style="color: #958195">order</span>: <span style="color: #CE6953">1</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-grow | flex-shrink</span>: <span style="color: #CE6953">number</span>;<br> }<br> &nbsp;</div></div><h3 class="subTitle" id="align-self">Align Self</h3><p>In order to overwite <code>align-items</code> for individual placement, you can use <code>align-self</code>. The same options apply.</p><ul class="guiList"><li class="guiListElement"><code>auto</code>: The defualt setting, properties are inhertited.</li><li class="guiListElement"><code>flex-start</code>: Flex to the start of the line/ container.</li><li class="guiListElement"><code>flex-end</code>: Flex to the bottom of the line/ container.</li><li class="guiListElement"><code>center</code>: Item will align into the center of the container</li><li class="guiListElement"><code>baseline</code>: Item will align itself based on its content, see Flex Container.</li><li class="guiListElement"><code>stretch</code>: The item will stretch amoung its line.</li></ul><div class="codeDisplay"><div class="codeHeader"><h4>Example code</h4></div><div class="fakeCode"><br><span style="color: #DDC981">.item</span> {<br> &nbsp;&nbsp;<span style="color: #958195">order</span>: <span style="color: #CE6953">1</span>;<br> &nbsp;&nbsp;<span style="color: #958195">flex-grow | flex-shrink</span>: <span style="color: #CE6953">number</span>;<br> &nbsp;&nbsp;<span style="color: #958195">align-self</span>: <span style="color: #CE6953">flex-start | flex-end | center | baseline | stretch</span>;<br> }<br> &nbsp;</div></div><h6 style="text-align: center">This was all done based off of <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/" target="_blank">A Complete Guide to Flexbox</a> by CSS Tricks.</h3>'
  );
});

// New Nav navigation bar
$("#replaceChildren").addClass("hide");
$("#replaceBoth").addClass("hide");
// preload contianer flexbox nav only
$(".backButton, #flexboxMiniBar").click(function() {
  $("#replaceChildren").addClass("hide");
  $("#replaceContainer").addClass("hide");
  $("#replaceBoth").removeClass("hide");
  // loads the container and children selection layer
});
$(".children").click(function() {
  $("#replaceChildren").removeClass("hide");
  $("#replaceBoth").addClass("hide");
  // loads the children navigation layer
});
$(".container").click(function() {
  $("#replaceContainer").removeClass("hide");
  $("#replaceBoth").addClass("hide");
  // loads the contianer selection sceen,
});

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console