<div class="input-wrap">
	<div>
		<label for="js_wrap_width">width: </label>
		<input type="range" id="js_wrap_width" min="10" max="100" step="5">
	</div>
	<div>
		<label for="js_flex_type">justify-content: </label>
		<select name="js_flex_type" id="js_flex_type"></select>
	</div>
</div>


<div class="wrap">
	<p>Good</p>
	<ul class="flex-list custom">
		<li><a href="#">Home</a></li>
		<li><a href="#">Works</a></li>
		<li><a href="#">Profile</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
	<p>Bad</p>
	<ul class="flex-list origin">
		<li><a href="#">Home</a></li>
		<li><a href="#">Works</a></li>
		<li><a href="#">Profile</a></li>
		<li><a href="#">Links</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</div>
*, *:before, *:after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
	border: 0;
}
body {
	min-width: 600px;
	padding: .5em;
}
.wrap {
	padding: 1em;
	border: 1px solid #222;
	border-radius: 10px;
}


/* ここからflex */
.flex-list {
	position: relative;
	width: 100%;
	display: flex;
	margin-bottom: 1em;
	overflow: auto;
	align-items: center;
	flex-wrap: nowrap;
	list-style: none;
	background: #eee;
}
.flex-list li a {
	display: block;
	min-width: 100px;
	padding: .5em 1em;
	background: #333;
	color: #fff;
	text-align: center;
	text-decoration: none;
}
.flex-list li:nth-child(odd) a {
	background: #222;
}


/* ここからmarginで独自実装バージョン */
/* flex-start */
.custom.flex-start {
	justify-content: flex-start;
}

/* space-between */
.custom.space-between {
	justify-content: space-between;
}

/* space-around */
.custom.space-around li {
	margin: 0 auto;
}

/* space-evenly */
.custom.space-evenly:before,
.custom.space-evenly:after {
	content: "";
	width: 0;
	visibility: hidden;
	margin-left: auto;
}
.custom.space-evenly li {
	margin: 0 auto;
}

/* center */
.custom.center li:first-child {
	margin-left: auto;
}
.custom.center li:last-child {
	margin-right: auto;
}


/* ここからjustify-contentで指定バージョン */
.origin.flex-start {
	justify-content: flex-start;
}
.origin.space-between {
	justify-content: space-between;
}
.origin.space-around {
	justify-content: space-around;
}
.origin.space-evenly {
	justify-content: space-evenly;
}
.origin.center {
	justify-content: center;
}


/* ここからコントローラーのCSS */
.input-wrap {
	padding: 1em;
}
.input-wrap input[type=text],
.input-wrap select {
	padding: 5px;
	border: 1px solid #555;
	border-radius: 3px;
}


document.addEventListener("DOMContentLoaded", start);

var $inputWidth, $selectType;
var flexTypes = [
	"flex-start",
	"space-between",
	"space-around",
	"space-evenly",
	"center"
];
function start() {
	$inputWidth = document.querySelector("#js_wrap_width");
	$inputWidth.value = "100";
	$inputWidth.addEventListener("input", onInputWidth);
	$inputWidth.addEventListener("change", onInputWidth);
	
	$selectType = document.querySelector("#js_flex_type");
	$selectType.addEventListener("change", onChangeType);
	
	flexTypes.forEach(function (type) {
		$selectType.innerHTML += ""
			+"<option value='"+type+"'>"
			+type+"</option>";
	});
	
	onInputWidth();
	onChangeType();
}

function onInputWidth() {
	setWrapWidth($inputWidth.value + "%");
}

function onChangeType() {
	var $flexs = document.querySelectorAll(".flex-list");
	$flexs.forEach(function($flex) {
		flexTypes.forEach(function(type) {
			$flex.classList.remove(type);
		});
		$flex.classList.add($selectType.value);
	});
	
}

function setWrapWidth(width) {
	var $wrap = document.querySelector(".wrap");
	$wrap.style.width = width;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.