css：使用 display:flex 定位元素时出现问题答案

【问题标题】：css: trouble positioning elements with display:flexcss：使用 display:flex 定位元素时出现问题
【发布时间】：2015-08-01 22:21:21
【问题描述】：

我在 div 中有一个 h1 和一个 p，并带有 display:flex。两者并排放置，但必须在彼此下方。它是关于在 (div)jkpage 中具有类 jktitre 和类 jktxt 的元素。 jkpage div 与 jksidebar （并排）是 flex

我没想到文本元素会以某种方式继承 flex 属性。或者类似的东西。

<div class="container">
    <div class="jkheader"></div>
    <div class="jknavbar"></div>
    <div class="jkrow">
        <div class="jkpage">
            <h1 class="jktitre">BLABLABLA</h1>
            <p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
        </div>
        <div class="jksidebar"></div>
    </div>
    <div class="jkfooter"></div>
</div>

CSS：

  body{
    background-color: lightgrey;
}

.jktitre{
    margin-left:5%;
    float:left;
    display: block;
}

.jktxt{
    margin-left:5%;
    padding:10px;
    float:left;

}

.jkrow{
    width:100%;
    display:flex;
}

.jkheader{
    margin-top:20px;
    height:150px;
    width:100%;
    background-color: #2d18a4;
}

.jknavbar{
    height:45px;
    width:100%;
    background-color: black;
}

.jkpage{
    height:400px;
    width:75%;
    background-color: #e7e7e7;
    display:flex;
}

.jksidebar{
    height:400px;
    width:25%;
    background-color: darkslategrey;
    display:flex;
}

.jkfooter{
    height:150px;
    width:100%;
    background-color: blue;
    margin-bottom: 20px;
}

【问题讨论】：

标签： html css flexbox

【解决方案1】：

将flex-direction: column 添加到父元素以将它们显示在彼此下方。它的默认值为row，它从左到右（并排）显示子元素

body {
  background-color: lightgrey;
}
.jktitre {
  margin-left: 5%;
  float: left;
  display: block;
}
.jktxt {
  margin-left: 5%;
  padding: 10px;
  float: left;
}
.jkrow {
  width: 100%;
  display: flex;
}
.jkheader {
  margin-top: 20px;
  height: 150px;
  width: 100%;
  background-color: #2d18a4;
}
.jknavbar {
  height: 45px;
  width: 100%;
  background-color: black;
}
.jkpage {
  height: 400px;
  width: 75%;
  background-color: #e7e7e7;
  display: flex;
  flex-direction: column;
}
.jksidebar {
  height: 400px;
  width: 25%;
  background-color: darkslategrey;
  display: flex;
}
.jkfooter {
  height: 150px;
  width: 100%;
  background-color: blue;
  margin-bottom: 20px;
}

<div class="container">
  <div class="jkheader"></div>
  <div class="jknavbar"></div>
  <div class="jkrow">
    <div class="jkpage">
      <h1 class="jktitre">BLABLABLA</h1>
      <p class="jktxt">jeoipfjn ehuwfojv ebowuinlj;hnjveohjej</p>
    </div>
    <div class="jksidebar"></div>
  </div>
  <div class="jkfooter"></div>
</div>

【讨论】：

谢谢，它有效。如果不寻找很长时间，我永远不会发现。 :)
没问题，乔里斯。很高兴它有帮助！ :)