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

              
                mixin container(id, headline, n)
  //.label= id
  .parent
    h2= headline
    .example(class='v_'+id )
      -n = n || 3
      -for(i=1;i<=n;i++)
        .item #{i}

+container('1', 'display: flex')
+container('2', 'flex-direction: row-reverse')
+container('3', 'flex-direction: column')
+container('4', 'flex-direction: column-reverse')
+container('5', 'flex-wrap: wrap', 5)
+container('6', 'justify-content: flex-end')
+container('7', 'justify-content: center')
+container('8', 'justify-content: space-between')
+container('9', 'justify-content: space-around')
+container('10', 'align-items: flex-end')
+container('11', 'align-items: center')
+container('12', 'align-items: stretch')
+container('13', 'align-items: baseline')
+container('14', 'align-content: center',4)
+container('15', 'align-content: flex-start',4)
+container('16', 'align-content: flex-end',4)
+container('17', 'align-content: space-around',4)
+container('18', 'align-content: space-between',4)
+container('19', 'align-content: center and flex-direction: column',4)
+container('20', 'align-content: flex-start and flex-direction: column',4)
+container('21', 'align-content: flex-end and flex-direction: column',4)
+container('22', 'align-content: space-around and flex-direction: column',4)
+container('23', 'align-content: space-between and flex-direction: column',4)
+container('24', 'order',4)
+container('25', 'flex-grow',4)
+container('26', 'flex-shrink',4)
+container('27', 'flex-basis',4)
+container('28', 'align-self: center',4)
+container('29', 'align-self: flex-end',4)
+container('30', 'align-self: stretch',4)


              
            
!

CSS

              
                
//$bgItem = #f05f5c //salmon
$fill = #f1f1f1 //#5DA449 skyblue
$border = 2px solid #777


*
  margin 0
  padding 0
  box-sizing border-box

body
  font-family: monospace

.example
  display flex
  
.parent
  border: 5px solid $fill
  max-width: 700px
  margin: 2em auto 0

.parent 
  h2
    margin 0
    font-family: monospace
    text-align: center
    background: $fill
    color: #444
    padding-bottom 5px
    
  .item
    height: 50px
    width: 50px
    margin: 10px
    background: #CCC //salmon
    color: white
    text-align: center
    line-height: 50px
    font-weight: 600  
 
  
  
// .v_1
//   display: flex
.v_2
  flex-direction: row-reverse
.v_3
  flex-direction: column
.v_4
  flex-direction: column-reverse
.v_5
  flex-wrap: wrap
  .item
    width 23%
.v_6
  justify-content: flex-end
.v_7
  justify-content: center
.v_8
  justify-content: space-between
.v_9
  justify-content: space-around
 
.v_10
.v_11
.v_12
.v_13
.v_14
.v_15
.v_16
.v_17
.v_18
.v_19
.v_20
.v_21
.v_22
.v_23
//.v_24
//.v_25
//.v_26
//.v_27
.v_28
.v_29
.v_30
  flex-wrap: wrap
  height 200px

//.v_11
//.v_12
//.v_13
.v_14
.v_15
.v_16
.v_17
.v_18
.v_19
.v_20
.v_21
.v_22
.v_23
.v_24
.v_25
.v_26
.v_27
.v_28
.v_29
.v_30
  .item
    width 35%
    


.v_10
  align-items: flex-end
.v_11
  align-items: center
.v_12
  align-items: stretch
  .item
    height: auto
.v_13
  align-items: baseline 
  .item
    &:nth-child(2)
      font-size 4em
.v_14
  flex-wrap: wrap
  align-content: center
  // .item
  //   width: 42%
.v_15
  align-content: flex-start
.v_16
  align-content: flex-end
.v_17
  align-content: space-around
.v_18
  align-content: space-between

.v_19
.v_20
.v_21
.v_22
.v_23
  flex-direction: column
.v_19
  align-content: center
.v_20
  align-content: flex-start
.v_21
  align-content: flex-end
.v_22
  align-content space-around
.v_23
  align-content space-between
.v_24
  .item
    width 20%
    &:nth-child(2)
      order 3
      font-size 2em
      border $border
.v_25
  .item
    width 20%
    &:nth-child(2)
      flex-grow: 3
      font-size 2em
      border $border
          
.v_26
  .item
    //width 20%
    &:nth-child(2)
      flex-shrink: 2
      font-size 2em
      border $border

      
.v_27
  .item
    width 20%
    &:nth-child(2)
      flex-basis: 50px
      font-size 2em
      border $border

.v_28
  .item
    width 20%
    &:nth-child(2)
      align-self: center;
      font-size 2em
      border $border
.v_29
  .item
    width 20%
    &:nth-child(2)
      align-self: flex-end;
      font-size 2em
      border $border
.v_30
  .item
    width 20%
    &:nth-child(2)
      align-self: stretch
      height: auto
      font-size 2em
      border $border
              
            
!

JS

              
                /*

  
 */
              
            
!
999px

Console