边距影响中心对齐flexbox行中的项目

Question

对于flexbox来说，我是新手，但似乎很多属性的工作方式都相同。

然而，当谈到对齐项目中心时，我习惯于内联块处理边距的方式，即使它在特定元素上，它也会在整行中创建一个空格。

使用flexbox时，它似乎只能将该元素移出轴。附上小提琴，让我知道我在这里做错了什么。使用只有少数其他样式的bootstrap css来显示正在发生的事情。

https://jsfiddle.net/fv1gm67f/3/

# man command workaround: alias can't pass flags, but can't name function man
m() {
    "$1" --help | less
}
alias man="m"

Answer 1

如果我理解正确的话。您希望自动垂直对齐2列。我认为您可以使用属性align-self:baseline来实现此目的。请将以下css类添加到您的小提琴中，您将看到是否为图标col指定了底部或顶部，右侧列将根据该边距对齐并保持一致。

.col-auto{
    align-self:baseline;
 }

希望这能回答你的问题。

[编辑更多解释]

根据您的评论，您认为align-self适用于flexbox中的项目。如果您注意到，那么.flex-wrap类将display:flex放在主容器上，其中包含2列子项作为弹性项目。然后你有显示：内部导航ul上的flex也是嵌套的。您需要将align-self设置为父Flexbox的基线，以使2个col项彼此对齐。

这是一篇非常好的文章，附有flexbox的完整指南。

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

希望这个解释能够为其他人提供更多信息。 快乐编码：）

Answer 2

将您的社交媒体图标设为0。

 .social-media-icons li {
   margin-bottom:0px;
 }

Answer 3

正如拉塞尔·艾伦所提到的，这是一个盒子模型问题。 padding-top元素上的padding-bottom和ul.social-media-icons会关闭y轴。 li元素还有一个margin-bottom，可以解决问题。以下CSS应解决此问题：

  

<强> CSS

/*This is so you can get a visual on exactly what the boxes are doing*/
.col-auto {
    background-color: #CCC;
    border: solid 1px #000;
}

ul.social-media-icons {
    padding-top: 0;
    padding-bottom: 0;
}

.social-media-icons li {
    margin-bottom: 0;
}

jsFiddle

但最终，我认为最好在min-height孩子上设置.row.flex-wrap。

Answer 4

display: inline-block; margin-bottom: Npx不会影响公共父元素中其他display: inline-block元素的居中。

https://jsfiddle.net/dkoadaya/

我修改了上面的小提琴，使一些内联块元素居中并显示行为是相同的。