如何左右对齐flexbox列？
使用典型的CSS，我可以在两列之间向左浮动另一列，并在两者之间留出一定的间距。我该如何使用flexbox？
#container {
width: 500px;
border: solid 1px #000;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
#a {
width: 20%;
border: solid 1px #000;
}
#b {
width: 20%;
border: solid 1px #000;
height: 200px;
}
<div id="container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
问题答案：
您可以添加justify-content:space-between到父元素。这样做时，子级flexbox项将与相对侧对齐，并在它们之间留有空间。
#container {
width: 500px;
border: solid 1px #000;
display: flex;
justify-content: space-between;
}
#container {
width: 500px;
border: solid 1px #000;
display: flex;
justify-content: space-between;
}
#a {
width: 20%;
border: solid 1px #000;
}
#b {
width: 20%;
border: solid 1px #000;
height: 200px;
}
<div id="container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
您也可以添加margin-left: auto到第二个元素以使其向右对齐。
#b {
width: 20%;
border: solid 1px #000;
height: 200px;
margin-left: auto;
}
#container {
width: 500px;
border: solid 1px #000;
display: flex;
}
#a {
width: 20%;
border: solid 1px #000;
margin-right: auto;
}
#b {
width: 20%;
border: solid 1px #000;
height: 200px;
margin-left: auto;
}
<div id="container">
<div id="a">
a
</div>
<div id="b">
b
</div>
</div>
-
问题内容： 我正在使用flexbox对齐我的子元素。我想做的是将一个元素居中，而另一个保持最左对齐。通常我会使用来设置left元素。问题是将中心元素推离中心。这是可能的 ，而不 使用绝对定位？ HTML和CSS 问题答案： 编辑： 请参阅下面的[Solo答案，这是更好的解决方案。 flexbox背后的想法是提供一个框架，可以轻松地将容器中尺寸可变的元素对齐。这样，提供一个布局而完全忽略一个元素的宽
-
我想在中间对齐和。 如何使完全向右移动？ 以前： 之后： https://jsfiddle.net/z44p7bsx/
-
我有一个Flexbox。它的内容是NxN个正方形。我想要容器适合尽可能多的这些方块给定的显示宽度。我想让flexbox在页面中对齐。 然而问题是当我使用 则最后一行不向左对齐。但是，如果我更改为 则整个容器在页面上不再以中心对齐的方式显示。我能以某种方式实现两个的混合吗，所以就是这个例子，我将对齐5个项目，但最后一行将对齐前几行中的第一个项目？ 最小再现：
-
问题内容： 我想有A B和C中间对齐。 我如何才能D完全右移？ 问题答案： 以下是实现此布局的五个选项： CSS定位 带有不可见DOM元素的Flexbox 带有不可见伪元素的Flexbox Flexbox与 flex: 1 CSS网格布局 方法1：CSS定位属性 应用于容器。 应用于项目D。 现在，此项目已完全放置在flex容器中。 更具体地说，项目D从文档流中删除，但停留在最接近的祖先的范围内。
-
我正在使用scatterplot函数在垂直线上创建句柄的外观，以描绘图形的某些部分。然而，为了使它们看起来正确，我需要能够将散点图标记向左对齐（对于左线/划定线）和/或向右对齐（对于右线/划定线）。 这里有一个例子： 上面的代码几乎给出了我要找的图形，如下所示： 对如何以灵活的方式实现这一目标有任何指导或建议？ 注意：实际上，我的索引是而不是我为这个简单示例提供的整数。
-
我对flexbox布局有一个很大的问题。我用一个充满图像的盒子构建了一个容器，我决定使用flexbox布局来调整内容，使其看起来像一个网格 她是密码： 和CSS： http://jsfidle.net/puz219/7hq2e/ 如何将最后一行/行对齐到左侧？