Question

我有一个Flex容器，里面有3个div，宽度相等，我试图让div在页面中心对齐，它们之间的距离相等，并且与页面边缘的距离相等。

＆＃13;

.container {
    display : flex;
    width : 60%;
}

.para {
    width : 33%;
    padding : 1em;
    border:.5px solid black;
    margin :1em;
}

＆＃13;

<div class = "container">
<div class ="para one">para one para one para one para one para one para one 
para one para one para one para one para one</div>

<div class ="para two">para two para two para two para two para two para two 
para two para two para two para two para two para two </div>

<div class ="para three">para three  para three para three para three para 
three para three para three para three para three para three</div>
</div>

＆＃13;

Answer 1

使用justify-content: space-between;在项目之间添加相等的空格

.container {
  display: flex;
  justify-content: space-between;
  margin: 0 auto;
}

.para {
  width: 33%;
  padding: 1em;
  border: .5px solid black;
  margin: 1em;
}

<div class="container">
  <div class="para one">
    para one para one para one para one para one para one para one para one para one para one para one</div>

  <div class="para two">
    para two para two para two para two para two para two para two para two para two para two para two para two </div>

  <div class="para three">
    para three para three para three para three para three para three para three para three para three para three</div>


</div>

Answer 2

.container {
    display: flex;
    width: 60%;
    height: 100%;  /* takes full height so that it can align vertically  */
    justify-content: center; /* horizontal center */
    align-items: center;  /* vertical center */
    margin: 0 auto;   /* makes container in center  */

}

Answer 3

弹性项目的父级和空间的自动边距。

＆＃13;

.container {
  display: flex;
  width: 60%;
  justify-content: space-around;
  margin: 0 auto;
}

.para {
  width: 33%;
  padding: 1em;
  border: .5px solid black;
  margin: 1em;
}

＆＃13;

<div class="container">
  <div class="para one">para one para one para one para one para one para one para one para one para one para one para one</div>
  <div class="para two">para two para two para two para two para two para two para two para two para two para two para two para two </div>
  <div class="para three">para three para three para three para three para three para three para three para three para three para three</div>
</div>

＆＃13;

我需要将页面中心的3个div与flexbox

3 个答案: