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.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

    <link
      href="https://fonts.googleapis.com/css2?family=Inconsolata:wght@300;400&family=Quicksand:wght@600;700&family=Roboto&display=swap"
      rel="stylesheet"
    />

<!-- 

Hello Camper!

For now, the test suite only works in Chrome! Please read the README below in the JS Editor before beginning. Feel free to delete this message once you have read it. Good luck and Happy Coding! 

- The freeCodeCamp Team 

-->

    <main id="main-doc">
      <nav id="navbar" class="container">
        <div class="sticky">
          <header><h1>CSS Flexbox</h1></header>
          <ul>
            <li><a href="#display" class="nav-link">display</a></li>
            <li><a href="#flex-direction" class="nav-link">flex-direction</a></li>
            <li><a href="#flex-wrap" class="nav-link">flex-wrap</a></li>
            <li><a href="#flex-flow" class="nav-link">flex-flow</a></li>
            <li>
              <a href="#justify-content" class="nav-link">justify-content</a>
            </li>
            <li><a href="#align-items" class="nav-link">align-items</a></li>
            <li><a href="#align-content" class="nav-link">align-content</a></li>
            <li><a href="#order" class="nav-link">order</a></li>
            <li><a href="#flex-grow" class="nav-link">flex-grow</a></li>
            <li><a href="#flex-shrink" class="nav-link">flex-shrink</a></li>
            <li><a href="#flex-basis" class="nav-link">flex-basis</a></li>
            <li><a href="#flex" class="nav-link">flex</a></li>
            <li><a href="#align-self" class="nav-link">align-self</a></li>
          </ul>
        </div>
      </nav>
      <section id="main-content" class="container">
        <section class="main-section" id="display">
          <header>
            <h2>
              display
            </h2>
          </header>
          <article>
            <p>
              This defines a flex container; inline or block depending on the
              given value. It enables a flex context for all its direct
              children.
            </p>
            <code class="block-code">
              .container {<br />
              display: flex; /* or inline-flex */<br />
              }
            </code>
            <p>Note that CSS columns have no effect on a flex container.</p>
          </article>
        </section>
        <section class="main-section" id="flex-direction">
          <header><h2>flex-direction</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/flex-direction.svg"
              alt="flex-direction-representation"
            />
            <p>
              This establishes the main-axis, thus defining the direction flex
              items are placed in the flex container. Flexbox is (aside from
              optional wrapping) a single-direction layout concept. Think of
              flex items as primarily laying out either in horizontal rows or
              vertical columns.
            </p>
            <code class="block-code">
              .container {<br />
              flex-direction: row | row-reverse | column | column-reverse;<br />
              }
            </code>
            <ul>
              <li>
                <code>row</code> (default): left to right in <code>ltr</code>;
                right to left in <code>rtl</code>
              </li>
              <li>
                <code>row-reverse</code>: right to left in
                <code>ltr;</code> left to right in <code>rtl</code>
              </li>
              <li>
                <code>column</code>: same as <code>row</code> but top to bottom
              </li>
              <li>
                <code>column-reverse</code>: same as
                <code>row-reverse</code> but bottom to top
              </li>
            </ul>
          </article>
        </section>
        <section class="main-section" id="flex-wrap">
          <header><h2>flex-wrap</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/flex-wrap.svg"
              alt="flex-wrap-representation"
            />
            <p>
              By default, flex items will all try to fit onto one line. You can
              change that and allow the items to wrap as needed with this
              property.
            </p>
            <code class="block-code"
              >.container {<br />
              flex-wrap: nowrap | wrap | wrap-reverse;<br />
              }</code
            >
            <ul>
              <li>
                <code>nowrap</code> (default): all flex items will be on one
                line
              </li>
              <li>
                <code>wrap</code>: flex items will wrap onto multiple lines,
                from top to bottom.
              </li>
              <li>
                <code>wrap-reverse</code>: flex items will wrap onto multiple
                lines from bottom to top.
              </li>
            </ul>
            <p>
              There are some
              <a href="https://css-tricks.com/almanac/properties/f/flex-wrap/"
                >visual demos of flex-wrap here</a
              >.
            </p>
          </article>
        </section>
        <section class="main-section" id="flex-flow">
          <header><h2>flex-flow</h2></header>
          <article>
            <p>
              This is a shorthand for the <code>flex-direction</code> and
              <code>flex-wrap</code> properties, which together define the flex
              container’s main and cross axes. The default value is
              <code>row nowrap</code>.
            </p>
            <code class="block-code"
              >.container {<br />
              flex-flow: column wrap;<br />
              }</code
            >
          </article>
        </section>
        <section class="main-section" id="justify-content">
          <header><h2>justify-content</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/justify-content.svg"
              alt="justify-content"
            />
            <p>
              This defines the alignment along the main axis. It helps
              distribute extra free space leftover when either all the flex
              items on a line are inflexible, or are flexible but have reached
              their maximum size. It also exerts some control over the alignment
              of items when they overflow the line.
            </p>
            <code class="block-code"
              >.container {<br />
              justify-content: flex-start | flex-end | center | space-between |
              space-around | space-evenly | start | end | left | right ... +
              safe | unsafe;<br />
              }</code
            >
            <ul>
              <li>
                <code>flex-start</code> (default): items are packed toward the
                start of the flex-direction.
              </li>
              <li>
                <code>flex-end</code>: items are packed toward the end of the
                flex-direction.
              </li>
              <li>
                <code>start</code>: items are packed toward the start of the
                <code>writing-mode</code>
                direction.
              </li>
              <li>
                <code>end</code>: items are packed toward the end of the
                <code>writing-mode</code> direction.
              </li>
              <li>
                <code>left</code>: items are packed toward left edge of the
                container, unless that doesn’t make sense with the
                <code>flex-direction</code>, then it behaves like
                <code>start</code>.
              </li>
              <li>
                <code>right</code>: items are packed toward right edge of the
                container, unless that doesn’t make sense with the
                <code>flex-direction</code>, then it behaves like
                <code>start</code>.
              </li>
              <li><code>center</code>: items are centered along the line</li>
              <li>
                <code>space-between</code>: items are evenly distributed in the
                line; first item is on the start line, last item on the end line
              </li>
              <li>
                <code>space-around</code>: items are evenly distributed in the
                line with equal space around them. Note that visually the spaces
                aren’t equal, since all the items have equal space on both
                sides. The first item will have one unit of space against the
                container edge, but two units of space between the next item
                because that next item has its own spacing that applies.
              </li>
              <li>
                <code>space-evenly</code>: items are distributed so that the
                spacing between any two items (and the space to the edges) is
                equal.
              </li>
            </ul>
            <p>
              Note that that browser support for these values is nuanced. For
              example, <code>space-between</code> never got support from some
              versions of Edge, and start/end/left/right aren’t in Chrome yet.
              MDN
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content"
              >
                has detailed charts </a
              >. The safest values are <code>flex-start</code>,
              <code>flex-end</code>, and <code>center</code>.
            </p>
            <p>
              There are also two additional keywords you can pair with these
              values:
              <code>safe</code> and <code>unsafe</code>. Using
              <code>safe</code> ensures that however you do this type of
              positioning, you can’t push an element such that it renders
              off-screen (e.g. off the top) in such a way the content can’t be
              scrolled too (called “data loss”).
            </p>
          </article>
        </section>
        <section class="main-section" id="align-items">
          <header><h2>align-items</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/align-items.svg"
              alt="align-items-representation"
            />
            <p>
              This defines the default behavior for how flex items are laid out
              along the cross axis on the current line. Think of it as the
              <code>justify-content</code> version for the cross-axis
              (perpendicular to the main-axis).
            </p>
            <code class="block-code"
              >.container {<br />
              align-items: stretch | flex-start | flex-end | center | baseline |
              first baseline | last baseline | start | end | self-start |
              self-end + ... safe | unsafe;<br />
              }</code
            >
            <ul>
              <li>
                <code>stretch</code> (default): stretch to fill the container
                (still respect min-width/max-width)
              </li>
              <li>
                <code>flex-start</code> / <code>start</code> /
                <code>self-start</code>: items are placed at the start of the
                cross axis. The difference between these is subtle, and is about
                respecting the <code>flex-direction</code> rules or the
                writing-mode rules.
              </li>
              <li>
                <code>flex-end</code> / end / <code>self-end</code>: items are
                placed at the end of the cross axis. The difference again is
                subtle and is about respecting <code>flex-direction</code> rules
                vs. <code>writing-mode</code> rules.
              </li>
              <li><code>center</code>: items are centered in the cross-axis</li>
              <li>
                <code>baseline</code>: items are aligned such as their baselines
                align
              </li>
            </ul>
            <p>
              The <code>safe</code> and <code>unsafe</code> modifier keywords
              can be used in conjunction with all the rest of these keywords
              (although note browser support), and deal with helping you prevent
              aligning elements such that the content becomes inaccessible.
            </p>
          </article>
        </section>
        <section class="main-section" id="align-content">
          <header><h2>align-content</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/align-content.svg"
              alt="align-content-representation"
            />
            <p>
              This aligns a flex container’s lines within when there is extra
              space in the cross-axis, similar to how
              <code>justify-content</code> aligns individual items within the
              main-axis.
            </p>
            <p>
              <strong>Note</strong>: this property has no effect when there is
              only one line of flex items.
            </p>
            <code class="block-code"
              >.container {<br />
              align-content: flex-start | flex-end | center | space-between |
              space-around | space-evenly | stretch | start | end | baseline |
              first baseline | last baseline + ... safe | unsafe;<br />
              }</code
            >
            <ul>
              <li>
                <code>flex-start</code> / <code>start</code>: items packed to
                the start of the container. The (more supported)
                <code>flex-start</code> honors the
                <code>flex-direction</code> while start honors the
                <code>writing-mode</code> direction.
              </li>
              <li>
                <code>flex-end</code> / <code>end</code>: items packed to the
                end of the container. The (more support)
                <code>flex-end</code> honors the
                <code>flex-direction</code> while end honors the
                <code>writing-mode</code> direction.
              </li>
              <li><code>center</code>: items centered in the container</li>
              <li>
                <code>space-between</code>: items evenly distributed; the first
                line is at the start of the container while the last one is at
                the end
              </li>
              <li>
                <code>space-around</code>: items evenly distributed with equal
                space around each line
              </li>
              <li>
                <code>space-evenly</code>: items are evenly distributed with
                equal space around them
              </li>
              <li>
                <code>stretch</code> (default): lines stretch to take up the
                remaining space
              </li>
            </ul>
            <p>
              The <code>safe</code> and <code>unsafe</code> modifier keywords
              can be used in conjunction with all the rest of these keywords
              (although note
              <a
                href="https://developer.mozilla.org/en-US/docs/Web/CSS/align-items"
                >browser support</a
              >), and deal with helping you prevent aligning elements such that
              the content becomes inaccessible.
            </p>
          </article>
        </section>
        <section class="main-section" id="order">
          <header><h2>order</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/order.svg"
              alt="order-representation"
            />
            <p>
              By default, flex items are laid out in the source order. However,
              the
              <code>order</code> property controls the order in which they
              appear in the flex container.
            </p>
            <code class="block-code"
              >.item {<br />
              order: 5; /* default is 0 */ <br />
              }</code
            >
          </article>
        </section>
        <section class="main-section" id="flex-grow">
          <header><h2>flex-grow</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/flex-grow.svg"
              alt="flex-grow-representation"
            />
            <p>
              This defines the ability for a flex item to grow if necessary. It
              accepts a unitless value that serves as a proportion. It dictates
              what amount of the available space inside the flex container the
              item should take up.
            </p>
            <p>
              If all items have <code>flex-grow</code> set to 1, the remaining
              space in the container will be distributed equally to all
              children. If one of the children has a value of 2, the remaining
              space would take up twice as much space as the others (or it will
              try to, at least).
            </p>
            <code class="block-code"
              >.item {<br />
              flex-grow: 4; /* default 0 */ <br />
              }</code
            >
            <p>Negative numbers are invalid.</p>
          </article>
        </section>
        <section class="main-section" id="flex-shrink">
          <header><h2>flex-shrink</h2></header>
          <article>
            <p>
              This defines the ability for a flex item to shrink if necessary.
            </p>
            <code class="block-code"
              >.item {<br />
              flex-shrink: 3; /* default 1 */ <br />
              }</code
            >
            <p>Negative numbers are invalid.</p>
          </article>
        </section>
        <section class="main-section" id="flex-basis">
          <header><h2>flex-basis</h2></header>
          <article>
            <p>
              This defines the default size of an element before the remaining
              space is distributed. It can be a length (e.g. 20%, 5rem, etc.) or
              a keyword. The <code>auto</code> keyword means “look at my width
              or height property” (which was temporarily done by the
              <code>main-size</code> keyword until deprecated). The
              <code>content</code> keyword means “size it based on the item’s
              content” – this keyword isn’t well supported yet, so it’s hard to
              test and harder to know what its brethren
              <code>max-content</code>, <code>min-content</code>, and
              <code>fit-content</code> do.
            </p>
            <code class="block-code"
              >.item {<br />
              flex-basis: | auto; /* default auto */ <br />
              }</code
            >
            <p>
              If set to <code>0</code>, the extra space around content isn’t
              factored in. If set to <code>auto</code>, the extra space is
              distributed based on its <code>flex-grow</code> value.
              <a
                href="https://www.w3.org/TR/css3-flexbox/images/rel-vs-abs-flex.svg"
                >See this graphic</a
              >.
            </p>
          </article>
        </section>
        <section class="main-section" id="flex">
          <header><h2>flex</h2></header>
          <article>
            <p>
              This is the shorthand for <code>flex-grow</code>,
              <code>flex-shrink</code> and <code>flex-basis</code> combined. The
              second and third parameters (<code>flex-shrink</code> and
              <code>flex-basis</code>) are optional. The default is
              <code>0 1</code> auto, but if you set it with a single number
              value, it’s like <code>1 0</code>.
            </p>
            <code class="block-code"
              >.item {<br />
              flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
              <br />
              }</code
            >
            <p>
              <strong
                >It is recommended that you use this shorthand property</strong
              >
              rather than set the individual properties. The shorthand sets the
              other values intelligently.
            </p>
          </article>
        </section>
        <section class="main-section" id="align-self">
          <header><h2>align-self</h2></header>
          <article>
            <img
              src="https://css-tricks.com/wp-content/uploads/2018/10/align-self.svg"
              alt="align-self-representation"
            />
            <p>
              This allows the default alignment (or the one specified by
              <code>align-items</code>) to be overridden for individual flex
              items.
            </p>
            <p>
              Please see the <code>align-items</code> explanation to understand
              the available values.
            </p>
            <code class="block-code"
              >.item {<br />
              align-self: auto | flex-start | flex-end | center | baseline |
              stretch;<br />
              }</code
            >
            <p>
              Note that <code>float</code>, <code>clear</code> and
              <code>vertical-align</code> have no effect on a flex item.
            </p>
          </article>
        </section>
      </section>
    </main>
    <footer>For the original source, visit <a href="https://css-tricks.com/snippets/css/a-guide-to-flexbox/">CSS Tricks</a> website</footer>

              
            
!

CSS

              
                /* Declaration */

:root {
  --primary-text-color: #303030;
  --secondary-text-color: #2875b8;
  --hover-color: #094b85;
  --background-color: #e3e3e3;
  --background-secondary-color: #d9edff;
  --code-background: #d1d1d1;
  --code-color: #4a4a4a;
}

/* Base styles */

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  color: var(--primary-text-color);
  background-color: var(--background-color);
  line-height: 1.6;
}

h1,
h2,
h3,
h4 {
  font-family: "Quicksand", sans-serif;
  color: var(--secondary-text-color);
  line-height: 1.3;
  padding: 1rem 0;
}

a {
  color: var(--secondary-text-color);
  text-decoration: double;
}

a:hover {
  color: var(--hover-color);
}

ul {
  padding-left: 20px;
  line-height: 2;
}

img {
    display: none;
  max-width: 300px;
  max-height: 300px;
}

code {
    font-family: 'Inconsolata';
    color: var(--code-color);
    padding: 5px;
}

.container {
  max-width: 80%;
  margin: 0 auto;
  padding: 0 2rem;
}

.sticky {
  position: sticky;
  top: 0px;
  /* left: 0px; */
}

.block-code {
    display: block;
    margin: 1.2rem 2rem;
    padding: 0.5rem 1.5rem;
    background-color: var(--code-background);
}
/* General */

#main-doc {
  display: flex;
  /* background-color: aqua; */
}

h1 {
    font-size: 2rem;
}

h2 {
    font-size: 1.6rem;
}

#main-content {
    margin-bottom: 20px;
}
/* Navbar */

#navbar {
  /* background-color: red; */
}

#navbar ul {
    list-style: none;
    padding: 0;
}

/* Footer */

footer {
    padding: 20px;
    text-align: center;
    background-color: var(--code-background);
    font-family: 'Roboto';
    font-size: 1.0rem;
}

@media(max-width: 768px) {
    #main-doc {
        flex-direction: column;
    }

    #navbar {
        width: 90%;
    }
}
              
            
!

JS

              
                // !! IMPORTANT README:

// You may add additional external JS and CSS as needed to complete the project, however the current external resource MUST remain in place for the tests to work. BABEL must also be left in place. 

/***********
INSTRUCTIONS:
  - Select the project you would 
    like to complete from the dropdown 
    menu.
  - Click the "RUN TESTS" button to
    run the tests against the blank 
    pen.
  - Click the "TESTS" button to see 
    the individual test cases. 
    (should all be failing at first)
  - Start coding! As you fulfill each
    test case, you will see them go   
    from red to green.
  - As you start to build out your 
    project, when tests are failing, 
    you should get helpful errors 
    along the way!
    ************/

// PLEASE NOTE: Adding global style rules using the * selector, or by adding rules to body {..} or html {..}, or to all elements within body or html, i.e. h1 {..}, has the potential to pollute the test suite's CSS. Try adding: * { color: red }, for a quick example!

// Once you have read the above messages, you can delete all comments. 

              
            
!
999px

Console