ameeeee
10/8/2019 - 8:15 AM

c-flex フレックスボックス凡用

@charset "UTF-8";

.u-flex {
	display: flex;
	
	// justify-content
	&.--jc-center {
		justify-content: center;
	}
	&.--jc-f-end {
		justify-content: flex-end;
	}
	&.--jc-f-start {
		justify-content: flex-start;
	}
	&.--jc-s-between {
		justify-content: space-between;
	}
	&.--jc-s-around {
		justify-content: space-around;
	}
	// align-items
	&.--ai-center {
		align-items: center;
	}
	&.--ai-f-start {
		align-items: flex-start;
	}
	&.--ai-f-end {
		align-items: flex-end;
	}
	&.--ai-baseline {
		align-items: baseline;
	}
	&.--ai-stretch {
		align-items: stretch;
	}
	// flex-wrap
	&.--wrap {
		flex-wrap: wrap;
	}
	&.--nowrap {
		flex-wrap: nowrap;
	}
	&.--wrap-reverse {
		flex-wrap: wrap-reverse;
	}
	// flex-direction
	&.--fd-col {
		flex-direction: column;
	}
	&.--fd-row {
		flex-direction: row;
	}
	&.--fd-r-reverse {
		flex-direction: row-reverse;
	}
	&.--fd-c-reverse {
		flex-direction: column-reverse;
	}
  // align-content
  &.--ac-stretch {
    align-content: stretch;
  }
  &.--ac-f-start {
    align-content: flex-start;
  }
  &.--ac-f-end {
    align-content: flex-end;
  }
  &.--ac-center {
    align-content: center;
  }
  &.--ac-s-between {
    align-content: space-between;
  }
  &.--ac-s-around {
    align-content: space-around;
  }
  &.--sp-reset {
    display: block;
  }
}