2016-08-21 1 views
1

私がしようとしているのは、 '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>

私はフレキシボックスを使用せずに(画像を参照)、以下のことを実現してきましたが、私は実際にそれがフレキシボックスで動作するようにしたいと思います。

Without flexbox

+0

'width:100%;'を 'aside div'セレクタのCSSに追加しようとしましたか? – Xetnus

答えて

0

あなたが"align-items:center;"を削除する場合は、列内の全スペースを取るためにdivを強制します。

スペースを必要とする場合、またはスペースを揃える必要がある場合は、justify-content:center;を使用してください。この場合でもdiv全体が占有されます。

+0

返事をいただきありがとうございます。私はパディングを使用してテキストを内側に配置するだけではないでしょうか? –

+0

text-align:center;を使用できます。テキストを中央に配置します。それをフレックスコンテナに追加してください(脇に) –

+1

素晴らしい。ありがとうございました。 –

関連する問題