scss Flexbox的

Posted 2021-05-17

/********************
! FLEX BOX - horizontal 横並び
********************/

.flex-container {

	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;         /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;     /* NEW - Chrome */
	display: flex;             /* NEW, Spec - Opera 12.1, Firefox 20+ */

	-webkit-box-flex-flow: row wrap;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex-flow: row wrap;         /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex-flow: row wrap;      /* TWEENER - IE 10 */
	-webkit-flex-flow: row wrap; /* NEW - Chrome */
	flex-flow: row wrap;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

.flex-item {

	// In IE 10, setting -ms-flex-flow: row wrap will not wrap unless display: inline-block is set on child elements.
	display: inline-block;

	-webkit-box-flex: 1 0 auto;      /* OLD - iOS 6-, Safari 3.1-6 */
	-moz-box-flex: 1 0 auto;      /* OLD - Firefox 19- (buggy but mostly works) */
	-ms-flex: 1 0 auto;      /* TWEENER - IE 10 */
	-webkit-flex: 1 0 auto; /* NEW - Chrome */
	flex: 1 0 auto;         /* NEW, Spec - Opera 12.1, Firefox 20+ */
}

// end Flexbox

/*
IE は version 10 以降からしか対応していない。2014-08-07 現在のところ、少なくとも IE9 には対応したいので、Fallback 対応すること。
*/

/* 
ネストしている方（親）: フレックスボックスコンテナー
ネスとされている方（子）: フレックスボックスアイテム
*/

/* 念のため、通常は各指定のプパティーに以下の Browser Prefix をつけたものを追加すること。*/
-webkit-box-;      /* OLD - iOS 6-, Safari 3.1-6 */
-moz-box-;          /* OLD - Firefox 19- (buggy but mostly works) */
-ms-;      /* TWEENER - IE 10 */
-webkit-;      /* NEW - Chrome */


/********************************************
親 - フレックスボックスコンテナーのプロパティ 
********************************************/

.flex-container {
	display: -webkit-box;      /* OLD - iOS 6-, Safari 3.1-6 */
	display: -moz-box;          /* OLD - Firefox 19- (buggy but mostly works) */
	display: -ms-flexbox;      /* TWEENER - IE 10 */
	display: -webkit-flex;      /* NEW - Chrome */
	display: flex; 
	/* フレックスボックスコンテナーの定義。これによって子要素がフレックスボックスアイテムになる。 */
	
	/* 子要素の配置方向 */
	flex-derection: row;　			/* 横並び（初期値）*/
	flex-derection: column; 		/* 縦並び */
	flex-derection: row-reverse;	/* 横逆並び */
	flex-derection: column-reverse;	/* 縦逆並び */

	/* 子要素の折り返し */
	flex-wrap: nowrap;　			/* 折り返しなし（配置換えないヨ～）*/
	flex-wrap: wrap;			/* 折り返しあり */
	flex-wrap: wrap-reverse;	/* 逆折り返し */

	flex-flow: column wrap;
	/* 上の二つ（子要素の配置方向と折り返し）をまとめて記述することもできる */
	/* In IE 10, setting -ms-flex-flow: row wrap will not wrap unless display: inline-block is set on child elements. */

	/* 水平の揃え方 */
	justify-content: flex-start;	       /* 横並びの場合は左揃え、縦並びの場合は上揃え */
	justify-content: flex-end;		/* 横並びの場合は右揃え、縦並びの場合は下揃え */
	justify-content: center;　		/* 中央揃え */
	justify-content: space-between;	/* 均等に間隔をあける */
	justify-content: space-around;	/* 均等に間隔をあけて左右にも半分ずつ間隔をあける */

	/* 垂直の揃え方 */
	align-items: flex-start;	/* 横並びの場合は上揃え、縦並びの場合は左揃え */
	align-items: flex-end;		/* 横並びの場合は下揃え、縦並びの場合は右揃え */
	align-items: center;		/* 中央揃え */
	align-items: baseline;		/* ベースライン揃え */
	align-items: strech;		/* 高さが高いヤツに合わせる（コレイイネ！）*/

	/* 折り返した時の行の揃え方（折り返し有りの場合) */
	align-content: flex-start;		/* 横並びの場合は上揃え、縦並びの場合は左揃え */
	align-content: flex-end;		/* 横並びの場合は下揃え、縦並びの場合は右揃え */
	align-content: center;			/* 中央揃え */
	align-content: space-between;	/* 均等に間隔をあける */
	align-content: space-around;	/* 均等に間隔をあけて左右にも半分ずつ間隔をあける */

}

/********************************************
子 - フレックスボックスアイテムのプロパティ
********************************************/

.flex-item {

	flex-grow : 数字 ;		/* フレックスボックスアイテムの伸び～る倍率 */
	flex-shrink : 数字 ;　	/* フレックスボックスアイテムの縮～む倍率 */
	flex-basis : 数字 ;		/* ベースとなる長さ（width的な感じ）*/

	flex : 数字 , 数字 , 数字 ;
	/* 上三つをまとめて記述した場合（flex : flex-grow , flex-shrink , flex-basis ;）*/

	/* align-itemsを個別に設定できる */
	align-self: flex-start;		/* 横並びの場合は上揃え、縦並びの場合は左揃え */
	align-self: flex-end;		/* 横並びの場合は下揃え、縦並びの場合は右揃え */
	align-self: center;			/* 中央揃え */
	align-self: baseline;		/* ベースライン揃え */
	align-self: strech;			/* 高さが高いヤツに合わせる */

	order : 数字 ;	/* 配置順を変える（1スタート）*/
}

/*
Flexbox - 枠内のコンテンツを天地の中央に
*/

.vertical-container {
  height: 300px;
  display: -webkit-flex;
  display:         flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
}

// 枠内のコンテンツを天地の中央に
.vertical-container {
  height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  display: -webkit-flex;
  -webkit-align-items: center;
  -webkit-justify-content: center;
}

.flexbox {
	display: -webkit-flex;
	display: flex;
	
	/*
	FLEXBOX option 1
	Items in the flex container will be aligned center with space between.
	*/
	-webkit-justify-content: space-between;
	justify-content: space-between;
	
	/*
	FLEXBOX option 2
	Items in the flex container flows starting from top-left.
	*/
	-webkit-justify-content: flex-start;
	        justify-content: flex-start;
}


.flexitem {
	
	/*  Stretch contents to fill the height */
	-webkit-align-self: stretch;
	        align-self: stretch;
	
	/*
	FLEXBOX option 1
	Width of items in the flex container will be flexible to fill the entire container width no matter how many items in the conteiner.
	- flex : flex-grow , flex-shrink , flex-basis ; - 
	*/
	-webkit-flex: 1 0 47.5%;
	    -ms-flex: 1 0 47.5%;
	        flex: 1 0 47.5%;
	
	/*
	FLEXBOX option 2
	Width of items in the flex container will be defined by the same % for all items. Depending on the number of items, the last conteiner row may have empty space.
	- flex : flex-grow , flex-shrink , flex-basis ; - 
	*/
	-webkit-flex: 0 0 47.5%;
	    -ms-flex: 0 0 47.5%;
	        flex: 0 0 47.5%;

}