flex-growプロパティを利用して、左右にボーダーのある横並びのリストを作ります。リスト内のテキストの文字数が異なる場合でも、簡単にレスポンシブ対応できます。
デモページはこちら

まず、flex-growプロパティを利用せずに実現できるか試してみます。flexアイテムのwidthプロパティに文字数の比率で%を指定します。この場合、flexアイテムが意図した横幅になりません。

.list01 {
	display: flex;
	margin: 0 0 1em;
}
.list01 li {
	padding: 0 10px;
	text-align: center;
}
.list01 li:nth-child(1) {
	width: calc(100% / 15 * 3);
}
.list01 li:nth-child(2) {
	width: calc(100% / 15 * 4);
}
.list01 li:nth-child(3) {
	width: calc(100% / 15 * 6);
}
.list01 li:nth-child(4) {
	width: calc(100% / 15 * 2);
}

次に、flexアイテムの横幅の合計が100%になるように、flexアイテムにpadding: 0 7.6%;を指定します。この場合、画面がせまくなった時にflexアイテムのpaddingが意図した通りに縮みません。

.list02 {
	display: flex;
	margin: 0 0 1em;
}
.list02 li {
	padding: 0 7.6%;
	text-align: center;
}

次に、flexコンテナにjustify-content: space-around;を指定します。この場合、flexアイテムの横幅は伸びないため、liタグに設定したborderが意図した位置になりません。

.list03 {
	display: flex;
	justify-content: space-around;
	margin: 0 0 1em;
}
.list03 li {
	padding: 0 10px;
	text-align: center;
}

最後に、flexアイテムにflex-grow: 1;を指定します。flex-growプロパティの初期値は0ですが1にします。flex-growプロパティはflexコンテナの横幅に対してflexアイテムの横幅の合計が短くて余白がある場合、 指定に応じた比率でflexアイテムを自動的に引き伸ばして余白を埋めます。そのためflexアイテムに横幅を指定しなくても問題ありません。全てのflexアイテムのflex-growプロパティを1に設定することで、文字数に応じた横幅いっぱいの間隔に配置できます。

.list04 {
	display: flex;
	margin: 0 0 1em;
}
.list04 li {
	flex-grow: 1;
	padding: 0 10px;
	text-align: center;
}