flexbox将列左右对齐 [英] flexbox align column left and right

问题描述

学习如何使用flexbox，通过使用典型的css，我可以将两列中的一列左移，而另一列右移另一列。我该怎么做flexbox？

http：// jsfiddle .net / 1sp9jd32 /
$ b

#container {width：500px ; border：solid 1px＃000;显示：-webkit-flex;显示：-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>一个< / div> < div id =b> b< / div>< / div>

方案

您可以将 justify-content：space-between 添加到父元素。在这样做的情况下，儿童柔性箱项目将被对齐到两侧之间的空间。

更新示例

  #container {
 width：500px; 
 border：solid 1px＃000; 
 display：flex; 
 justify-content：space-between; 
 
 
 
 $ b 
 
 
 
  #container {width： 500像素; border：solid 1px＃000;显示：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>一个< / div> < div id =b> b< / div>< / div>


$ b

您也可以将 margin-left：auto 添加到第二个元素，以便将其对齐到右侧。
$ b

更新示例



  #b {
 width：20％; 
 border：solid 1px＃000; 
 height：200px; 
 margin-left：auto; 
 
 
 
 $ b 
 
 
 
  #container {width： 500像素; 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 = 容器 > < div id =a>一个< / div> < div id =b> b< / div>< / div>

Learning how to use flexbox, with typical css I could float one of two columns left and another right with some gutter space in-between. How would I do that with flexbox?

http://jsfiddle.net/1sp9jd32/

#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>

解决方案

You could add justify-content: space-between to the parent element. In doing so, the children flexbox items will be aligned to opposite sides with space between them.

Updated Example

#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>

---

You could also add margin-left: auto to the second element in order to align it to the right.

Updated Example

#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将列左右对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！