flexbox 中的中心兄弟姐妹
巫师
这是我当前的 html
<body>
<div class="header"></div>
<div class="side"></div>
<div class="stuff"></div>
<div class="footer"></div>
</body>
无论如何我可以将兄弟 div 对齐到中心，就好像它们在包装 div 中一样？这样无论发生什么事，他们都会并排在中间。不幸的是，我遇到了困难，因为我在父 div 中有其他东西。
有什么办法可以使用 flexbox 做到这一点吗？而不添加HTML？
迈克尔·本杰明
body {
display: flex;
flex-wrap: wrap;
justify-content: center; /* 1 */
align-content: space-between; /* 2 */
height: 100vh;
margin: 0;
}
div {
flex: 0 0 90%; /* 3 */
height: 100px;
border: 2px dashed red;
}
.side, .stuff {
flex-basis: 25%; /* 4 */
margin: 5px;
}<div class="header">header</div>
<div class="side">stuff</div>
<div class="stuff">side</div>
<div class="footer">footer</div>笔记：
- 每行的 Flex 项目水平居中。
- 第一行销到顶部。底线固定到底部。中线垂直居中。
- 强制每行一行。
- 覆盖 (3)，因此可以在第二行显示两个项目。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
全宽flexbox列为什么挤压其兄弟姐妹？
- 2
在 XPath 中查找兄弟姐妹
- 3
从 href 中删除兄弟姐妹类
- 4
序幕与兄弟姐妹的关系？
- 5
获取兄弟姐妹的PID
- 6
创建sqlarchicalid兄弟姐妹
- 7
兄弟姐妹体内的硒
- 8
遍历兄弟姐妹的子类
- 9
使用jQuery从兄弟姐妹中累加值
- 10
从其他兄弟姐妹中删除课程
- 11
XPath：查找孩子和兄弟姐妹中的首次出现
- 12
在React中的兄弟姐妹之间进行交流
- 13
如何获得不同DIV或SPAN中的兄弟姐妹？
- 14
如何获取数组中的兄弟姐妹ID？
- 15
通过javascript中的兄弟姐妹链接对象
- 16
“ NAV”中的按钮未与兄弟姐妹内联显示
- 17
XPath：查找孩子和兄弟姐妹中的首次出现
- 18
XCTest（UI测试）中查询的父母和兄弟姐妹
- 19
无法在ReactJS中相互更改兄弟姐妹的值
- 20
Python 将 XML 兄弟姐妹放入字典中
- 21
通过 Rails 中的连接表查找兄弟姐妹
- 22
防止在javascript中触发父母的兄弟姐妹的事件
- 23
跟随兄弟姐妹不在 selenium python 中工作
- 24
查找最接近的相似兄弟姐妹
- 25
AngularJS事件传播-兄弟姐妹？
- 26
如何匹配以下兄弟姐妹
- 27
xpath：先前的兄弟姐妹或自己
- 28
如何检测严格相邻的兄弟姐妹
- 29
scss @each相邻兄弟姐妹
我来说两句