【HTML CSS】画像を横並びに表示する（flexプロパティを使用）

画像の高さを一定にし、flexプロパティを使用して横並びに画像を表示させる

.side-by-side {
    display: -webkit-flex;
    display: flex;
    justify-content: space-around;
}

.side-by-side img {
    width: auto;
    max-height: 150px;
}

例１．　テーマ Simplicity2 にて、インデックスリストトップに画像を横並びに表示する場合

.widget-index-top {
    margin-top: -30px;
	border-bottom: 1px solid #DDD;
	
	display: -webkit-flex;
    display: flex;
    justify-content: space-around;
}

.widget-index-top img {
    max-width: 105px;
    height: auto;
}