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

• 2019年10月21日
• コーディング

いつも忘れるのでメモ。

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

• 2019年10月21日
• コーディング