CSS flex 盒 : Aligning Children of Flex Items

Question

我将 Flexbox 与 flex-wrap 结合使用，这样当 flex-items 宽度相等时，元素将被包裹起来，从而使布局具有响应性。

我想实现姓名、电子邮件和电话水平对齐。

注意:虽然我可能会将 phone 变成另一个 div 并应用 justify between，但是这不会使电子邮件对齐(以防名称太长)。我们是否有办法在保留环绕的同时保留网格？

#container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.employee {
  flex: 1;
  width: 20em;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
}

http://jsfiddle.net/9g41t4g8/

$( () => {
	fetch("https://randomuser.me/api/?results=10&nat=us&inc=name,picture,email,phone&seed=abc")
  	.then( r => r.json() )
    .then(
    	j => {
      	j.results.map( (e, i) => {
        	$("#employee").clone(true)
        		.appendTo($("#container"))
            .attr( 'id', "employee_"+i )
            .find("img").attr( "src", e.picture.thumbnail ).end()
            .find(".name").text( e.name.first + " " + e.name.last ).end()
            .find(".email").text( e.email.repeat(i) ).end()
            .find(".phone").text( e.phone ).end()
            .show()
        })
      	
      }
    )
})

#container {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.employee {
  flex: 1;
  width: 20em;
  flex-direction: column;
  align-items: center;
  word-wrap: break-word;
}

#employee {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="container">
  <div class="employee" id="employee">
    <img/>
    <div class="name">
      Name
    </div>
    <div class="email">
      Email
    </div>
    <div class="phone">
      Phone
    </div>
  </div>

</div>

Answer 1

稍微清理一下您的代码。将 flex-basis 和 min-width 引入到 .employee 以保留员工大小以匹配不同的屏幕大小。 .employee 变成

.employee {
  min-width: 0%;
  flex-basis:30%;
  height:auto;
  border:1px solid;
  flex-direction: column;
  word-wrap: break-word;
}

首先，员工之间的数据不一样。有些员工没有电话数据，但有几封电子邮件。清理数据将具有跨屏幕尺寸的预期输出。

如果您不得不忍受未清理的数据并希望在同一行中维护详细信息？将 flex: 1 引入更新后的 .employee 类。但是员工盒子看起来会变形

.employee {
  flex: 1;
  min-width: 0%;
  flex-basis:30%;
  height:auto;
  border:1px solid;
  flex-direction: column;
  word-wrap: break-word;
}

fiddle :http://jsfiddle.net/7qgnjj00/5/