css - Flexbox header : Align box right with two elements in rows

Question

刚开始使用 Flexbox。通过尝试创建一个非常简单的简历网站来练习。

Codepen 在这里: http://codepen.io/koentj/pen/jyLxGX

我正在尝试将 social-container 放在 picture-container 的左侧。这两个都在 profile-container 中，同时给 name-container 大部分空间(又名 profile-container 将使用它需要的空间, name-container 负责剩下的部分)。

无论我做什么(我已经尝试了很多)，social-container 最终都在 picture-container 之上，我觉得我错过了什么非常简陋。

Answer 1

我不完全确定您的 HTML 是否反射(reflect)了您正在尝试做的事情。目前是这样的:

- header
-- .name-container  
-- .profile-container
--- .social-container
---- .picture-container

如果 .picture-container 是 .social-container 的兄弟元素而不是子元素会更容易。

这样你就可以为 .profile-container 使用 display:flex 并且可以并排显示这两个元素。

body {
  display: flex;
  flex-direction: column;
  font-family: "Helvetica Neue, Helvetica, Liberation Sans, Arial, sans-serif";
}

header {
  background: #42A8C0;
  width: 100%;
  color: white;
  text-align: center;
}

img {
  max-width: 100%;
}

.profile-container {
  display: flex;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

<header>
  <div class="name-container">
    <h1>My Name</h1>
    <h4>Small summary of current position</h4>
  </div>
  
  <div class="profile-container">
    <div class="social-container">
      <a href="http://www.google.com" target="_blank"><i class="fa fa-linkedin-square" aria-hidden="true"></i></a>
      <a href="http://www.google.com" target="_blank"><i class="fa fa-github-square" aria-hidden="true"></i></a>
    </div>

    <div class="picture-container">
      <img src="https://cdn.pixabay.com/photo/2016/02/22/18/57/puppy-1216269_960_720.jpg" class="portrait-pic">
    </div>
  </div>
</header>