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. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

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

              
                <div class="flex-container">
  <div class="flex-items" id="number1" >1</div>
  <div class ="flex-items">2</div>
  <div class ="flex-items">3</div> 
  <div class ="flex-items">4</div> 
  <div class ="flex-items">5</div> 
</div>

<div class="flex-container1">
  <div class="flex-items1" id="firstItem"> First Item </div>
  <div class="flex-items1" id="secondItem"> Second Item </div>
  <div class="flex-items1" id="thirdItem"> Third Item </div>
</div>
  
  
              
            
!

CSS

              
                /* Flexbox

There are different ways to position elements on a page! Flexbox is an efficient way of managing webpage layout and aligning elements. 

The main idea is to give the outside container the ability to alter the width/height of its elements in order to best fill the available space (this can allow webpages to work well on different devices and screen sizes!)

Terminology:

Before we get started, its important to understand a few key terms that will be used to describe these processes.

* parent and child - you may have already heard these terms. A child is any element that belongs to another element, which would be its parent element, for example the div with the id "mySubDiv1" is a child of its parent div, "myDiv". 

* When using flexbox, there is a parent element, called the flex container, and child elements, called the flex items. 

Properties for the parent (flex container):

In HTML, we can set up the elements for the flex-container. We will use a div as our flex container, and  set the class to flex-container. Then, some child divs inside will be added, which for this example have the text 1, 2, and 3 in them. 

By adding the property display, with the value flex, in CSS, various flex properties can be used, like so:
*/

.flex-container {
  display: flex;
}

/*

Now, we can use a number of different properties to control the layout of the elements. Some flex properties an also be used on single elements with no children. 

* flex-direction 

This  defines in which direction the container wants to stack the flex items. (e.g vertial or horizontal) Common ways to set it are column or row. Column is the default, we can set it to row like this:

*/

.flex-container {
  flex-direction: row;
}

/*

flex-wrap

This property specifies whether the flex items should wrap or not. This controlls whether they will "wrap" onto multiple lines, or be forced onto one line. Some values would be : wrap and nowrap

First, we should make our text much bigger, and give them a background color, we will be able to observe this property better. 

*/

.flex-items {
  font-size: 100px;
  background-color: lightblue;
  height: 30vh;
  width: 300px;
  border: 6px solid white;
  min-height: 1em
}

.flex-container {
  flex-wrap: wrap;
}


/*

flex-flow

flex-low is a shorthand for both wrap and direction, so both could be specified, like so:

.flex-container {
  flex-flow: row wrap
}

justify-content

The justify-content property is used to align the flex items.

* The center value aligns the flex items at the center of the container.
* The flex-start value aligns the flex items at the beginning of the container (this is default).
* The flex-end value aligns the flex items at the end of the container.
* The space-around value displays the flex items with space before, between, and after the lines.
* The space-between value displays the flex items with space between the lines.

.flex-container {
  justify-content: center;
}

align-items

The align-items property is used to align the flex items.

* The center value aligns the flex items in the middle of the container.
* The flex-start value aligns the flex items at the top of the container.
* The flex-end value aligns the flex items at the bottom of the container.
* The stretch value stretches the flex items to fill the container (this is default).

Example: 
In this example, the height of the first item will be changed, to demonstrate the flex-start value. 


#number1 {
  height: 20vh;
}

.flex-container {
  align-items: flex-start; 
}

align-content

The align-content property is used to align the flex lines.

* The space-between value displays the flex lines with equal space between them.
* The space-around value displays the flex lines with space before, between, and after them.
* The stretch value stretches the flex lines to take up the remaining space (this is default).
* The center value displays display the flex lines in the middle of the container.
* The flex-start value displays the flex lines at the start of the container.
* The flex-end value displays the flex lines at the end of the container. 

Example
*/

.flex-container {
  align-content: space-around;
}


/* 

If you want something in the center of the page, set both justify-content and align-content to center!

Flex Items:

For these examples, we will use a second flex-box example: 

*/

.flex-items1 {
  font-size: 30px;
  background-color: peachpuff;
  height: 3em;
  width: 250px;
  border: 2px solid white;
}

.flex-container1 {
  display: flex;
  height: 100vh;
  width: 100vw;
  background-color: gray;
  flex-flow: column wrap;
  align-content: space-between;
}


/*

As well as flex container properties, there are a number of flex item properties that can be used to control the layout of the flex items. The properties discussed will be: 

order
flex-grow

order:

The order property specifies the order of the flex items. The default is 0, so if no order property is specifiec, each will have an order of 0. If the first div is given an order of 1 it will be last, unless anything has an order greater than 1. 

*/

#firstItem {
  order: 1
}

/*


flex-grow:

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.

The value must be a number, the default value is 0.

If we give the third item a flex-grow value of 2, it will be larger than the other two items. 

*/

#thirdItem {
  flex-grow: 2
}

/*

More properties can be read about here: https://www.w3schools.com/css/css3_flexbox_items.asp

////////////Exercises:

1. Make a flex layout in HTML. You'll need to make an outside div with a class, and then make three inside divs, with a new class (but the same for all three) and a unique id each. In each div, put the name of a book/show/movie, and provide a brief description about each one. 

2. Change the background color and font of the inside divs using their shared class.

3. Set the properties of the class for the outside div. Make sure you set the display to flex. Next, use at least 3 of the flex properties we have covered to arrange your flex items in a way that you like. 

/////////////Extra Exercises:
1. Make a flexbox layout in HTML with five items. In each of the flex items, load an image using an image tag!
//In CSS, style your flexbox using various properties to make your images look nice!



















              
            
!

JS

              
                
              
            
!
999px

Console