使元素在flexbox

Question

问题是，如果我在文档中放置h1，它会占用页面直到页脚。没有flexbox，这不会发生。如果标题占据一列而段落另一列则如此。 h1必须在段落上方对齐。

https://jsfiddle.net/45j2yrzp/

＆＃13;

＆＃13;

html {
  display: flex;
  flex-direction: column;
}
/* IE fix */

body {
  display: flex;
  /* crée un contexte flex pour ses enfants */
  flex-direction: column;
  /* affichage vertical */
  min-height: 100vh;
  /* toute la hauteur du viewport (compatible IE9+) */
  font-family: cursive, sans-serif, serif;
}
.wrapper {
  display: block;
  /* IE fix */
  flex: 1 1 auto;
  /* occupe la hauteur restante */
  display: flex;
  /* crée un contexte flex pour ses enfants */
  flex-direction: row;
  /* affichage horizontal */
}
.content {
  display: flex;
  /* IE fix */
  flex: 1;
  /* occupe la largeur restante */
}
aside {
  position: fixed;
  border-radius: 50%;
  height: 70px;
  width: 70px;
  top: 50%;
  background-color: #fff;
  border: 2px solid #cecece;
}
.left {
  left: 10%;
}
.right {
  right: 10%;
}
.arrow_left {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-right: 25px solid #cecece;
  top: 20%;
  left: 25%;
}
.arrow_right {
  display: block;
  position: relative;
  width: 0;
  height: 0;
  border-top: 20px solid transparent;
  border-bottom: 20px solid transparent;
  border-left: 25px solid #cecece;
  top: 20%;
  left: 40%;
}
aside:hover {
  border-color: #ff5722;
  box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.80);
}
.left:hover .arrow_left {
  border-right-color: #ff5722;
}
.right:hover .arrow_right {
  border-left-color: #ff5722;
}
/* Decoration */

body {
  background: #eeeeee;
  font-size: 1.1em;
}
footer {
  height: 40px;
  width: 100%;
  text-align: center;
  background-color: #303030;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
  color: white;
}
section {
  margin: 45px 20% 0px 20%;
  background-color: #ffffff;
  box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.40);
  overflow: hidden;
}
ul.menu {
  position: fixed;
  display: flex;
  top: 0;
  font-size: 100%;
  width: 100%;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
  list-style-type: none;
  background-color: #303030;
  color: white;
}
li a {
  float: left;
  padding: 13px 16px;
  text-align: center;
}
li a:hover {
  background-color: #ff5722;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.80);
}
#home {
  position: absolute;
  top: 0;
  right: 0;
}
li.active {
  background-color: #ff5722;
  box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.99);
}
li a {
  display: block;
  color: white;
}
address {
  margin-top: 3px;
}
/*End of the structure of the page*/

a {
  color: #ff5722;
  text-decoration: none;
}
span {
  color: #ff5722;
}
p {
  word-break: break-all;
  margin: 15px 30px;
}
img {
  height: 75%;
  width: 100%;
}

＆＃13;

<header>
  <ul class="menu">
    <li><a href="">Option 1</a>
    </li>
    <li><a href="">Option 2</a>
    </li>
    <li><a href="">Option 3</a>
    </li>
    <li><a href="">Option 4</a>
    </li>
    <li><a href="">Option 5</a>
    </li>
    <li class="active"><a href="">Option 1</a>
    </li>
    <li><a href="">Option 1</a>
    </li>
    <li id="home"><a href="index.html">Home</a>
    </li>
  </ul>
</header>

<div class="wrapper">
  <section class="content">
    <h1>HELLO THIS IS THE TITLE</h1>
    <br>
    <br>
    <br>
    <br>
    <p>hello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is
      the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the
      paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello
      this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this is the paragraphhello this
      is the paragraphhello this is the paragraph</p>
  </section>
  <aside class="left">
    <div class="arrow_left"></div>
  </aside>
  <aside class="right">
    <div class="arrow_right"></div>
  </aside>
</div>
<!-- /wrapper -->

<footer>
  <address>Name Surname<br><a href="mailto:email@gmail.com">email@gmail.com</a></address>
</footer>

＆＃13;

＆＃13;

＆＃13;

Answer 1

弹性容器的初始设置为flex-direction: row。

这会水平对齐子元素（flex项）。

这就是为什么你的h1和段落排成一排的原因。

要实现所需的布局，请将其添加到您的代码中：

.content { flex-direction: column; }

您已在祖先元素（flex-direction: column）上拥有body。

但是，flex formatting context的范围仅限于父/子关系。孩子们以后的后代不会接受祖先的弹性属性。

您始终需要将display: flex或display: inline-flex应用于父元素，以便灵活属性适用于子元素。