Question

我创建了3个flexbox容器（用于控制另外两个flexbox容器的容器。在我的主要和辅助flex容器中，我插入了4个图像和一个h1，它们都被包裹在一起，但是如何将我的h1移动到flex的顶部容器（柔性容器外面）？我今天开始尝试使用flexbox，所以请考虑我的新手。

JsFiddle https://jsfiddle.net/2fw7w8qn/1/或

<!DOCTYPE html>
<html>
 <head>
     <link rel="stylesheet" href="css/framework.css">
     <link href='https://fonts.googleapis.com/css?family=Electrolize' rel='stylesheet' type='text/css'>
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
     <script src="js/custom.js"></script>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">      
  <title>NK Electrical LTD</title>
 </head>
 <body>
     <div class="container">
     <div class="primary">
         <h1>Menu</h1>
  <li class="flex-item1"><img src="img/electrical.png"></li>
  <li class="flex-item1"><img src="img/emergency.png"></li>
  <li class="flex-item1"><img src="img/homeappliances1.png"></li>
  <li class="flex-item1"><img src="img/homeappliances2.png"></li>

    </div>
             <div class="secondary">
         <h1>Our latest products</h1>
  <li class="flex-item"><img src="img/1.jpg"></li>
  <li class="flex-item"><img src="img/2.jpg"></li>
  <li class="flex-item"><img src="img/3.jpg"></li>
  <li class="flex-item"><img src="img/4.jpg"></li>
    </div>
         </div>
 </body>
</html>

Framework.css

*{
    box-sizing: border-box;
    margin:0;
    padding: 0;
}
body{font-family: 'Electrolize', sans-serif;}
ul{list-style: none;padding: 0;margin: 0;}
.container{display: flex;flex-direction: column;}
.primary{display: flex;flex-wrap: wrap;justify-content: center;background-color:#1c1c1c;margin:0% 25%;padding:1%;}
.secondary{display: flex; flex-wrap: wrap;;justify-content: center;background-color:#1c1c1c;margin:0% 25%;padding:1%;}
.flex-item {
  background-color: black;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.flex-item1{
  background-color: tomato;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}

h1{flex:1;color:white;font-size:1.5em;font-weight: 300;border-bottom: 3px solid white;margin-bottom: 5%;padding:2%;margin-top:0;}
img{width:100px; height:auto;}
div{list-style: none;}

Answer 1

我不清楚你在这里尝试的确切性质，但看起来你应该为每个菜单和标题使用行。

现在可能还有其他的容器布局，但如果没有明确的要求，很难确定。

对于每个ROW的基本布局，最初不需要flexbox。

有效的结构类似于：

<div class="row">
  <h1>Menu Heading</h1>
  <ul>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
  </ul>
</div>

现在默认情况下，该行将是100％宽（除非在flex-column中，但这是另一个问题）。

h1和ul是块级别，因此也是100％宽，但 li也需要水平。这个是我们可以使用flexbox的地方。

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.flex-item {
  background-color: pink;
  border: 1px solid grey;
  padding: 5px;
  width: 200px;
  height: 150px;
  margin-top: 10px;
  line-height: 150px;
  color: white;
  font-weight: bold;
  font-size: 3em;
  text-align: center;
}
.row {
  background: #c0ffee;
  margin-bottom:1em;
}
ul {
  display: flex;
  list-style: none;
  justify-content: space-between;
}

<div class="row">
  <h1>Menu Heading</h1>
  <ul>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
  </ul>
</div>
<div class="row">
  <h1>Second Heading</h1>
  <ul>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
  </ul>
</div>

<div class="row">
  <h1>Menu Heading</h1>
  <ul>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
    <li class="flex-item"></li>
  </ul>
</div>

如何将我的h1标题移动到我的Flexbox容器顶部？

1 个答案: