フロントエンドスクール-6日目

7527 ワード
テキストリンク

今日習った内容


Flex


CSSプロパティのセットで、コンテンツを並べ替えたり、スペースを区切ったりできます.

flex-direction


整列方向の決定
.container {
  display: flex;
	flex-direction : row;
}
.container {
	display : flex;
	flex-direction : row-reverse;
}
.container{
	display : flex;
	flex-direction : column;	
}
.container{
	display : flex;
	flex-direction : column-reverse;	
}

デフォルトではflex-itemはAxisでソートされます



justify-content


軸に対する配列の位置を制御するか、項目間の間隔を設定します.

html

<article>
  <div class="left_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
  <div class="center">
    <div class="blue"></div>
    <div class="yellow"></div>
  </div>
  <div class="right_side">
    <div class="blue"></div>
    <div class="green"></div>
    <div class="yellow"></div>
  </div>
</article>

css

div{
  width:50px;height:50px
}

.blue{background:blue}
.green{background:green}
.yellow{background:yellow}


article{  
  background:black;
  width:350px;
  height:300px;
}


.right_side, .center, .left_side{
  height:300px;
}
ブログのバックグラウンドはmdeditorに適して、フロントエンドの表示を修復します
docker-compose upエラー解決ERROR:Couldn't connect to Docker daemon at http+docker://localunixsocket - is