flexレイアウトチュートリアル

flex レイアウトチュートリアル#

例#

#container {
display: flex;
justify-content: center;
margin: 0 auto;
flex-direction: column; /*上下に並べる*/
}

#header {
display: flex;
margin: 0 auto;
flex-direction: column; /*上下に並べる*/
border-bottom: 6px solid gainsboro;
}

#sidebar {
width: 450px;
text-align: left;
overflow: hidden;
border: 1px solid #FFFFFF;
}

#menu {
display: flex;
justify-content: end; /*右に詰める*/
}

#footer {
margin: 0 auto;
margin-top: 10px;
background-color: #0e3717;
text-align: center; /*テキストを中央に*/
line-height: 60px;
color: white;
height: 60px; /*幅と高さを指定しないと背景色の大きさが判定できない*/
width: 900px;
}

#pagebody {
display: flex;
margin: 0 auto;
margin-top: 10px;
}

#mainbody img {
width: 100%;
}

#menu {
display: flex;
flex-wrap: wrap;
margin-top: -65px;
}

#banner {
margin-top: 22px;
bottom: 5px solid #000000;
clear: both;
}

a {
text-decoration: none; /*下線を取り消す*/
color: #6f6f6f;
flex-direction: row; /*左右に並べる*/
}

a:hover {
color: #FF0000;
}

ul {
list-style-type: none; /*リストのマーカーを取り消す*/
flex-wrap: wrap;
flex: 0 0 auto;
display: flex;
height: 150%;
margin-right: 10px;
}

li {
position: relative; /*絶対位置*/
align-items: center;
font-weight: 600;
border: none;
height: 150%;
margin-right: 5px;
}

li a {
display: flex;
width: 100%;
height: 150%;
}

li a::after {
content: ""; /*疑似要素を使用するために必要*/
border-right: gray solid 1px;
margin-left: 10px;
}

li:nth-child(11) a::after {
border: none; /*li要素の11番目のa要素の線を取り消す*/
}