25
4
给定以下 HTML:
Trung tâm cá nhân
Điều phát hành
từ bỏ
A
B
和以下 CSS(无前缀):
.outer {
display: box;
box-orient: vertical;
chiều cao: 100px;
chiều rộng: 100px;
background: red;
margin: 10px;
}
.inner {
height: 50px;
margin-top: 10px;
background: green;
}
đây là mộtCodePen .
MỘT包裹在 中所以它的边距被忽略了。
问:如何实现B MỘT 的行为(边距)与 flex 盒模型？
注意:div 包装器可以深入多层
定位:最新的 Chrome/Safari/iOS
非常感谢您的帮助!
编辑:感谢@JoséCabo，我想到了这个:
.outer {
hiển thị: flex;
flex-direction: cột;
chiều cao: 100px;
chiều rộng: 100px;
background: red;
margin: 10px;
}
.inner {
height: 50px;
margin-top: 10px;
background: green;
}
Chrome : 
Safari : 
不幸的是，正如@cimmanon 所提到的，它在 Safari 中不起作用，所以我仍然需要一些帮助。
câu trả lời hay nhất
你看到的其实和Flexbox无关，而是所谓的margin collapse
.outer div {
border: 1px solid;
}
边框的添加防止边距塌陷。与其依赖边距，我建议在父容器上放置一个填充:
.outer {
padding-top: 10px;
}
ví dụ:
.wrapper {
background: #eef;
border: 1px solid darkgray;
}
.container {
hiển thị: flex;
flex-wrap: wrap;
margin: -1em;
}
.item {
flex-grow: 1;
margin: 1em;
viền: 1px màu đen đặc;
padding: 1em;
min-width: 6em;
}
<đầu>
JS Bin
item
item
item
item
item
item
现在，要覆盖所有前缀，您需要这样的东西:
.outer {
display: -moz-box;
display: -webkit-flexbox;
display: -ms-flexbox;
display: -webkit-flex;
hiển thị: flex;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: cột;
chiều cao: 100px;
chiều rộng: 100px;
background: red;
margin: 10px;
}
关于css - Flex-box 忽略包裹的 child 的边距(边距折叠)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/15057411/
25
4
0
我的收藏具有以下结构 { _id:1, parent_id:0 } { _id:2, parent_id:1 } { _id:3, parent_id:1 } { _id:4, par
到目前为止，我已经尝试过获取该对象的所有子对象，但它只带来了两个子对象。不都是 child 的 child 。我如何获取所有内容并循环获取特定名称对象 Transform[] objChild = g
Câu hỏi này dường như không hữu ích cho bất kỳ khách truy cập nào trong tương lai; nó chỉ liên quan đến một khu vực địa lý nhỏ, một thời điểm cụ thể hoặc một tình huống rất hẹp và thường không áp dụng cho khán giả Internet trên toàn thế giới. Để được trợ giúp làm cho câu hỏi này có thể áp dụng rộng rãi hơn, hãy truy cập
我有一个如下表 好吧，在这个表中每个用户都有一个父用户，那么如果我们选择一个用户，那么它的 id 、子代 id 和子代子代 id 应该作为数组返回。我需要一个查询来获取 Rails 中的这些值，而不使
我需要以下代码的帮助: HTML: process process 在点击 td[class=process] 时，我需要 input[name=dat
好的，所以我从中获得了一个 PHP，该 PHP 由依赖于手头动态情况的切换循环传播(我认为)。现在，当我添加一个复选框时，我希望能够使 div 中的第一个复选框具有顶部边框和侧面，没有底部。下面的只有
我正在使用 Swift 和 Sprite Kit。我有一个名为 MrNode 的 SKNode，它有多个 SKSpriteNodes 和 SKNode 子节点。一些SKNode有子节点，而这些子节点也
对不起，这个标题太俗了，但我真的不确定如何解释这个，我是新一代的 SQL 技能由于事件记录模式而退化的人之一! 基本上我在 PostgreSQL 中有三个表 客户端(一个客户端有很多 map ) -
我有这样的简单表格: 编号 parent_id 创建于 具有父/子关系...如果一行是子行，则它有一个 parent_id，否则它的 parent_id 为 0。 现在我想选择所有没有子项(因此本身)
所以我有这样的结构: 我的问题是:如何从每个主题中删除 ID 为 3Q41X2tKUMUmiDjXL1BJon70l8n2 的每个字段。我正在考虑这样的事情: admin.database().ref
这个问题在这里已经有了答案: Change opacity on all elements except hovered one (1 个回答) 关闭 5 个月前。 因此，当鼠标悬停在 child
我需要在 Delphi 5 中创建一个 QuickReport，其布局如下: +================ | Report Header +================ +========
假设我有这样的 html: Some more detailed code.... 我想知道如何在CSS中使用“A
我有一个使用 flexbox 的类似表格的布局: +--------------+---------------+-----------------+---------------+ | 1
我有一个关联，其中 user has_many user_items 和 user_items has_many user_item_images。与一个已经退出的用户。我可以创建一个新的 user_
我想选择无序列表中的前两个列表项。我可以这样选择第一项: ul li:nth-child(1) a { background: none repeat scroll 0 0 beige; }
ul li:first-child a { border-radius: 5px 5px 0 0; } ul li:last-child a { border-radius: 0 0 5p
我有一个这样的表:
或者这些术语用于指代同一事物？ 我正在尝试在我的 Win32 应用程序中实现一些显示位图图像的自定义按钮。一个教程指出我应该使用 CreateWindow() 创建子窗口。 但是，我已经从另一个关于创
我想在 jquery 中获取我的 svg 的 id，我尝试了这个 jquery，但它是未定义的。 $(event.target).children('svg').attr("id") Target.e
Tôi là một lập trình viên xuất sắc, rất giỏi!