如何使flexbox divs全宽
[英]How to make flexbox divs full width
问题描述
What I'm trying to do is make each one of those 'divs' in the 'aside' tag to be full-width using flexbox. 
我想要做的是使用flexbox使'aside'标签中的每个'div'成为全宽。
The width of the sidebar is 25% however the divs don't fill in the space on the left & right side. 侧边栏的宽度为25％，但div不会填充左侧和右侧的空间。 I can add padding to each side but it get's a bit messy and ruins the align-items: center 我可以在每一侧添加填充但是它有点乱，并且会破坏align-items: center
If you run the below at full screen, you'll see what I mean. 如果您全屏运行以下内容，您将看到我的意思。
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>
I've achieved it below (see image) without using flexbox but I'd really like to make it work with flexbox. 我已经在不使用flexbox的情况下实现了它（见图），但我真的很想让它与flexbox一起使用。
1 个解决方案
解决方案1
0 已采纳 2016-08-21 14:15:51
If you remove "align-items:center;" 如果删除"align-items:center;" it will force the divs to take up the whole space within the column. 它会强制div占据列内的整个空间。
If you decide you want space in between or whatever, or you need to have them aligned, use can use justify-content:center; 如果你决定在中间或其他任何地方想要空间，或者你需要让它们对齐，可以使用justify-content:center; which will still have them take up the whole div. 这仍将让他们占据整个div。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.