github.com/replicatedhq/ship@v0.55.0/web/init/src/scss/utilities/flexbox.scss (about)

     1  /*// --------------------------------------------------
     2  // Flexbox stuff
     3  // The spec: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
     4  // --------------------------------------------------
     5  */
     6  
     7  .inline-flex {
     8  	display: inline-flex;
     9  }
    10  .flex {
    11  	display: flex;
    12  	flex-direction: row;
    13  }
    14  .flex-column {
    15  	display: flex;
    16    flex-direction: column;
    17  }
    18  .flex-auto {
    19    flex: 0 0 auto;
    20  }
    21  .flex-0-auto {
    22  	flex: 0 1 auto;
    23  }
    24  .flex-1-auto {
    25  	flex: 1 1 auto;
    26  }
    27  .flex0 {
    28  	flex: 0;
    29  }
    30  .flex1 {
    31  	flex: 1;
    32  }
    33  .flex1-0 {
    34  	flex: 1 1 0;
    35  }
    36  .flex2 {
    37  	flex: 2;
    38  }
    39  .flex3 {
    40  	flex: 3;
    41  }
    42  .flex4 {
    43  	flex: 4;
    44  }
    45  .flex5 {
    46  	flex: 5;
    47  }
    48  
    49  .flexWrap--wrap {
    50  	flex-wrap: wrap;
    51  }
    52  
    53  /* use .flex-verticalCenter on the element you want to center */
    54  .flex-verticalCenter::before,
    55  .flex-verticalCenter::after {
    56  	content: '';
    57  	display: block;
    58  	flex: 1;
    59  }
    60  .flex-pseudo-before::before {
    61  	content: '';
    62  	display: block;
    63  	flex: 1;
    64  }
    65  .flex-pseudo-after::after {
    66  	content: '';
    67  	display: block;
    68  	flex: 1;
    69  }
    70  
    71  .justifyContent--flexEnd {
    72  	justify-content: flex-end;
    73  }
    74  .justifyContent--flexStart {
    75  	justify-content: flex-start;
    76  }
    77  .justifyContent--center {
    78  	justify-content: center;
    79  }
    80  .justifyContent--spaceBetween {
    81  	justify-content: space-between;
    82  }
    83  .alignContent--center {
    84  	align-content: center;
    85  }
    86  
    87  .alignItems--center {
    88  	align-items: center;
    89  }
    90  .alignItems--flexEnd {
    91  	align-items: flex-end;
    92  }
    93  .alignItems--flexStart {
    94  	align-items: flex-start;
    95  }
    96  .alignSelf--center {
    97  	align-self: center;
    98  }
    99  .alignSelf--flexEnd {
   100  	align-self: flex-end;
   101  }
   102  .alignSelf--flexStart {
   103  	align-self: flex-start;
   104  }
   105  
   106  .u-flexMobileReflow,
   107  .u-flexTabletReflow,
   108  .u-flexDesktopReflow {
   109  	display: flex;
   110  	flex-direction: column;
   111  }
   112  
   113  
   114  @media screen and (min-width: 35.5em) {
   115  	.u-flexMobileReflow {
   116  		flex-direction: row;
   117  	}
   118  }
   119  
   120  /* ≥ 768px */
   121  @media screen and (min-width: 48em) {
   122  	.u-flexTabletReflow {
   123  		flex-direction: row;
   124  	}
   125  }
   126  
   127  /* ≥ 1024px */
   128  @media screen and (min-width: 64em) {
   129    	.u-flexDesktopReflow {
   130  		flex-direction: row;
   131  	}
   132  }