💻

🛫 GIT-HUB

HTML | naver_audio_header
CSS | naver_audio_header

CSS|audioデフォルト

.audio_container{
	width: 1080px;
	margin: 0 auto;
}

.audio_flex_between {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	align-content: stretch;
}

.audio_flex_start {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
	align-content: stretch;
}

.audio_flex_center {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	align-content: stretch;
}

.audio_flex_end {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-end;
	align-items: center;
	align-content: stretch;
}

audio_header

🖤 positionの3次元特性を用いて設計の位置を直接調整した.

#audio_header .audio_nav_left li a.active span:after{
	display: block;
	position: absolute;
	content: "";
	border-bottom: solid 3px #222;
	border-radius: 1.5px;
	z-index: 1;
	left: -4.5px;
	right: -5.5px;
	bottom: -17px;
}

position 3次元を利用して、左、top、右、bottomをすべて0にすることで、空白なく空間を埋めることができます.この場合、直接値を入力して手動で移動できます.

📝 の最後の部分

💛 flexを使用してスペース配置作業を行いますが、classではなくidをflexに入力するため、適用できません.classを追加し、正しく入力します.
💛 上の間違いを除いて、あまり困難はありません.本稿の作成方法に従って新しい空間位置作業を行うことを学び,うれしく思う.