（CSS）よくある画像付きブロックメニューの作り方

<div class="flexbox">
  <div class="block"><a href="#">
    <img src="画像リンク">
    <p>ツルのブロック1</p>
</a>
  </div>
<div class="block"><a href="#">
    <img src="画像リンク">
    <p>ツルのブロック2</p>
</a>
  </div>
<div class="block"><a href="#">
    <img src="画像リンク">
    <p>ツルのブロック3</p>
</a>
  </div>
<div class="block"><a href="#">
    <img src="画像リンク">
    <p>ツルのブロック4</p>
</a>
  </div>
</div>

.block {
  border-radius: 0px;
  background: #f9d2de;
  padding: 20px;
  margin: 10px;
  text-align: center;
  width:250px !important;
	color:#fff;
	cursor: pointer;
  transition: all 0.3s ease 0s;
}

.block a{
  color:#a90837;
}

.block a:hover{
  color:#fff;
  opacity:0.5;
}

.flexbox{
	justify-content: center;
	
}

.flexbox a:link{
	display:initial;
}

@media ( min-width : 600px ){
    .flexbox {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    }
.block {
    width: 25%;
  }
}