thiscodeWorks - Organizing the best of code online

List view

// variables

$size-container: .333rem !default;
3
$col-padding: 0.37rem !default;

$cols:  !default;
5
$gutter-x: $col-padding;

$gutter-y: 0;
7


// mediaqueries
9


// breakpoint del sistema de columna

$mq: (
12
  xs: 0,

  sm: 576px,

  md: 768px,

  lg: 992px,

  xl: 10px,

  xxl: 1400px

)!default;


20
$sizes: 0, 576px, 768px, 992px, 1200px, 1400px;



@mixin make-container{

#css #flexbox

flexbox gap

.flexwithgap {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 12px;
}

#flexbox #css

CSS to create a Flexbox

.flex-container {

  /* We first create a flex layout context */

  display: flex;

  

  /* Then we define the flow direction 

     and if we allow the items to wrap 

   * Remember this is the same as:

   * flex-direction: row;

   * flex-wrap: wrap;

   */

  flex-flow: row wrap;

  

  /* Then we define how is distributed the remaining space */

  justify-content: space-around;

  

  padding: 0;

  margin: 0;

  list-style: none;

#css #flexbox #horizontal-center

Horizontal center

// for parent div
      style="display: flex; align-items: center; justify-content: center"

#css #flexbox

Flex box link

.container {
  display: flex; /* or inline-flex */
}

REJILLA FLEX CSS (alpha)

flexbox gap

CSS to create a Flexbox

Horizontal center

Flex box link

Save snippets that work with our extensions