<nav class="case case01">
<ul>
<li><a href="">ナビ</a></li>
<li><a href="">ナビ</a></li>
<li><a href="">ナビ<br>
ナビ</a></li>
<li><a href="">ナビ</a></li>
<li><a href="">ナビ</a></li>
</ul>
</nav>

<div class="case case02">
<ul>
<li><a href="">ボタン<br>
ボタン</a></li>
<li><a href="">ボタン</a></li>
</ul>
</div>

<div class="case case03">
<div class="entry-list">
<a href="" class="entry">
<p class="photo"><img src="https://placehold.jp/300x200.png" alt=""></p>
<div class="text">
<h2>リストです</h2>
<p>テキストテキストテキストテキスト</p>
</div>
</a>
	
<a href="" class="entry">
<p class="photo"><img src="https://placehold.jp/300x200.png" alt=""></p>
<div class="text">
<h2>リストです</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストタイトル</p>
</div>
</a>
</div>
</div>

<div class="case case03">
<div class="entry-list">
<a href="" class="entry">
<p class="photo"><img src="https://placehold.jp/300x200.png" alt=""></p>
<div class="text">
<h2>ボタン有りのリストです</h2>
<p>テキストテキストテキストテキスト</p>
</div>
<p class="btn">ボタン</p>
</a>
	
<a href="" class="entry">
<p class="photo"><img src="https://placehold.jp/300x200.png" alt=""></p>
<div class="text">
<h2>ボタン有りのリストです</h2>
<p>テキストテキストテキストテキストテキストテキストテキストテキストタイトル</p>
</div>
<p class="btn">ボタン</p>
</a>
</div>
</div>
ul,li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.case {
	margin-top: 20px;
	a {
		color: #333;
		text-decoration: none;
	}
}

.case01 {
	ul {
		display: flex;
		align-items: stretch;
	}
	
	li {
		display: flex;
		flex: 1;
	}
	
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 5px;
		color: #fff;
		background: green;
		transition: background .3s ease-in;
		&:hover {
			background: #333;
		}
	}
}

.case02 {
	ul {
		display: flex;
		align-items: stretch;
		margin: 0 auto;
		width: 100%;
		max-width: 420px;
	}
	
	li {
		display: flex;
		flex: 1;
		margin: 0 10px;
	}
	
	a {
		display: flex;
		align-items: center;
		justify-content: center;
		flex: 1;
		padding: 5px;
		border: 1px solid #333;
		transition: border .3s ease-in, color .3s ease-in;
		&:hover {
			color: red;
			border-color: red;
		}
	}
}

.case03 {
	.entry-list {
		display: flex;
		margin: 0 auto;
		max-width: 620px;
    width: 100%;
	}
	
	.entry {
		display: flex;
		flex-direction: column;
		flex: 1;
		margin: 0 5px;
		padding: 0 0 10px;
		width: 300px;
		background: rgba(0,255,255,0.5);
		&:hover {
			.btn {
				color: red;
				border-color: red;
			}
		}
	}
	
	.photo {
		margin: 0 0 5px;
	}
	
	h2 {
		margin: 0 0 5px;
	}
  
  .photo img {
    width: 100%;
    height: auto;
  }
	
	.text {
		flex: 1 0 auto;
	}
	
	.btn {
		padding: 5px;
		margin: 0 auto;
		width: 100px;
		text-align: center;
		border: 1px solid #333;
		transition: border .3s ease-in, color .3s ease-in;
	}
}
View Compiled
Rerun