MDNのドキュメントでCSSを学ぶ(その2)

概要

MDNのCSSドキュメントはアルファベット順に並んでいる索引があるので、そのうちの一部を書いてみる、のその2。

書いてみる

align-content

flexコンテナ内のコンテナの配置方法を指定する。

サンプル

<div id="container">
  テスト
  <div id="inner1">
    <b>align-content : flex-start;</b>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
  </div>
  <div id="inner2">
    <b>align-content : flex-end;</b>
    <div>A</div>
    <div>B</div>
    <div>C</div>
    <div>D</div>
    <div>E</div>
    <div>F</div>
    <div>G</div>
  </div>
  テスト
</div>
#container{
  background-color: #000000;
}

#container > div{
  display: -webkit-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: row wrap;
  flex-flow: row wrap;
  width: 140px;
  height: 140px;
}

#container > #inner1{
  background-color:#0000ff;
  align-content:flex-start;
}

#container > #inner2{
  background-color:#00ffff;
  align-content:flex-end;
}

f:id:wawawa12345:20180318164105p:plain