Question

我正在尝试通过响应式Slack克隆，对于下一个屏幕尺寸，我遇到了一个障碍：它变得“无响应”。标头原样是一幅图像，后跟文本，在我希望以此方式进行的第一次运行中，效果还不错。但是，在接下来的几次迭代中，我想反转顺序图像和文本。我已经尝试过使用命令，行反向和同时使用这两个命令都无济于事。在此先感谢您的帮助。

  body {
  font-family: 'Lato', sans-serif;
  font-size: 17px;
  display: flex;
  flex-direction: column;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 auto;
}

header div {
  margin: auto 4vw;
}

header img {
  max-width: 100%;
  max-height: 100%;
}

header p {
  text-align: justify;
  text-justify: distribute;
}

@media only screen and (min-width: 767px) and (max-width: 961px) and (orientation: portrait) {
  body {
    max-width: 100%;
    font-size: 2em;
  }
  header {
    flex-flow: column-reverse nowrap;
    margin: 0 auto;
  }
  /* 	
    
    header :nth-child(1) {
    		order: 2;
    	}
    	header :nth-child(2) {
    		order: 1;
        } */

<header>
  <div class="landing-img">
    <img src="./images/home_talking.png" alt="home_work_happening">
  </div>
  <div>
    <h1>Where Work Happens</h1>
    <p>When your team needs to kick off a project, hire a new employee, deploy some code, review a sales contract, finalize next year's budget, measure an A/B test, plan your next office opening, and more, Slack has you covered.</p>
    <form>
      <input type="text" id="user-add" name="e-mail" placeholder="E-Mail Address">
    </form>
    <button type="button" name="button">GET STARTED</button>
    <p id="headerSignin">Already using Slack? <a href="#">Sign in</a></p>
  </div>
</header>

可以在here中找到JSFiddle链接。

Flexbox无响应：无法对元素进行重新排序

0 个答案: