stretch child

​/*
Theme Name:     Twenty Seventeen Child
Theme URI:      https://wordpress.org/themes/twentyseventeen-child/
Description:    Tema Child per il tema Twenty Thirteen
Author:         Bruna Carolina Santos
Author URI:     
Template:       twentyseventeen
Version:        2.8-wpcom
*/

.parent {
  display: flex; /* Enables Flexbox */
  height: 300px; /* Set a specific height for the parent div */
  border: 1px solid #000;
}

.child {
  background-color: lightblue;
  flex: 1; /* Optional: Makes the child take up remaining space */
}

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

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

.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;

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

// 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{