Question

我正在使用带有flex-wrap的Flexbox，这样当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/

＆＃13;

$( () => {
	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()
        })
      	
      }
    )
})

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

稍微清理一下你的代码。将int i=0; with open("index.html", "a") as file: for line in host: file.write("<tr><td>" + line + "</td><td>" + ip[i] + "</td><td>" + sshkey[0] + "</td>"); i++; file.close()和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

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

CSS Flexbox：调整Flex项目的子项

1 个答案: