CSS Flexbox：对齐 Flex 项的子项

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;
}

小提琴：http://jsfiddle.net/7qgnjj00/5/