私がしようとしているのは、 'aside'タグのdivsのそれぞれをflexboxを使って全幅にすることです。flexbox divs full widthを作る方法
サイドバーの幅は25%ですが、divの部分は左側のスペースには埋め込まれません&右側。私は各側面に詰め物を加えることができますが、それはちょっと乱雑になって荒廃します。align-items: center
以下をフルスクリーンで実行すると、私の言いたいことが分かります。
aside {
display: flex;
height: 100vh;
width: 25%;
flex-direction: column;
align-items: center;
}
aside div {
padding: 89.9px;
}
.test1 {
background-color: gray;
}
.test2 {
background-color: red;
}
.test3 {
background-color: blue;
}
.test4 {
background-color: green;
}
.test5 {
background-color: orange;
}
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/custom.css">
</head>
<body>
<aside>
<div class="test1">234324</div>
<div class="test2">232</div>
<div class="test3">3234324234</div>
<div class="test4">2344</div>
<div class="test5">234234234233245</div>
</aside>
</body>
</html>
私はフレキシボックスを使用せずに(画像を参照)、以下のことを実現してきましたが、私は実際にそれがフレキシボックスで動作するようにしたいと思います。
'width:100%;'を 'aside div'セレクタのCSSに追加しようとしましたか? – Xetnus