TIL

Today I Learned. 知ったこと、学んだことを書いていく

１つだけ右寄せでそれ以外は左寄せ flex - CSS

CSS

flexでタイトルの通りのことをしたい

こんな感じ

f:id:tmg1998:20180423231503p:plain:w600


右寄せしたい要素にmargin-left; auto;とする！！！
左のmarginが自動になって、右寄せになる感じ！

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child f-right"></div>
</div>

.parent {
  display: flex;
  background-color: rgba(200, 200, 200, 0.8);
}

.child {
  background-color: rgba(255, 0, 0, 0.8);
  width: 150px;
  height: 50px;
  margin: 5px;
}

.f-right {
  margin-left: auto;    /* これ！！！ */
}

See the Pen 一つだけ右寄せ、それ以外は左寄せ by tamago (@tamago324) on CodePen.

参考文献