MENU

【CSS】Flexの小技いろいろまとめ。(都度更新)

いつも忘れるのでメモ。

Flex1つだけ右寄せにする

Code

.box { 
  display: flex; 
  background: #eee;
}
.box-item{
	background: red;
	height: 50px;
	width: 50px;
	margin:10px; 
}
._right { 
  margin-left: auto; /* ←これ */ 
}

Sample

Flex1つだけ固定幅にしてもう1つは可変幅にする

Code

.box { 
  display: flex; 
  background: #eee;
}
.box-item{
  background: red;
  height: 50px;
  margin:10px;
}
._main{
  width: 100%;
  flex:1;/*←これ 伸縮率指定しないとIE11でwidth:100%が効かない*/
}
._side{
  min-width: 50px;/*←これ*/
  width: 50px;/*←これ*/
}

Sample