Question

我必须在特定布局的flexbox中订购flex项目。 .main是一个flexbox，项目分别是div。在单独的一行上是.portfolio，之后，我应该每3个flex项目有2行。 1行= .marketing-page，.search-page，.travel-app 2行= .map，.photo-galery，.calculator。我非常感谢所有指导。

.main image {
  padding: 10%;
}
.main {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 border: 1px solid red;
  }
.main > * {
  flex: 10%;
  padding: 5%;
}

.main > .portfolio * {
  order: -1;
}
.portfolio {
  flex: 100%;
  order: -1;
}
.main > .marketing-page, .search-page, .travel-app * {
    order: 2, 3, 4;

  }
.main > .map, .photo-galery, .calculator * {
  order: 5, 6, 7;

}

.marketing-page {
  flex: 33%;
}

.search-page {
  flex: 33%;

}
.travel-app {
  flex: 33%;

}

.map {
  flex: 33%;

}
.photo-galery {
  flex: 33%;

}
.calculator {
  flex: 33%;

}


    <!– Main content/ Flexbox doesn´t work with figure and figcaption. –>

    <main class="main" "clearfix:after">
         <div class="portfolio">
            <h1>Portfolio</h1>
         </div>
          <div class="main-1">
              <div class="marketing-page" "clearfix:after">
                  <h2 id="m2">Marketing Page</h2>
                  <span id="m3">Project shows a front page of marketing website meant for a specific business i´m interested in.</span>
                  <img id="m1" src="images/portfolio-1.png" alt="Marketing Page" </img>
              </div>
              <div class="search-page" "clearfix:after">
                  <h2 id="s2">Search Page</h2>
                  <span id="s3">This project searches through a specific database to find information the user trying to look up.</span>
                  <img id="s1" src="images/portfolio-2.png" alt="Search Page" </img>
              </div>
          </div>
          <div class="main-2" "clearfix:after">
              <div class="travel-app" "clearfix:after">
                  <h2 id="t2">Travel App</h2>
                  <span id="t3">This project compares travel times based on different transport methods and tells you the best one.</span>
                  <img id="t1" src="images/portfolio-3.png" alt="Travel App" </img>
              </div>
              <div class="map" "clearfix:after">
                  <h2 id="map2">Map of Favorite Spots</h2>
                  <span id="map3">This project uses mapping apis to plot points for my favorite spots in city for a do it your self walking tour.</span>
                  <img id="map1" src="images/portfolio-4.png" alt="Map of Favorite Spots" </img>
              </div>
          </div>
          <div class="main-3">
              <div class="photo-galery" "clearfix:after">
                  <h2 id="p2">Photo Galery</h2>
                  <span id="p3">This project shows pictures from a recent t rip to the viewer and al lows them to easily navigate through photos.</span>
                  <img id="p1" src="images/portfolio-5.png" alt="Photo Galery" </img>
              </div>
           <div class="calculator" "clearfix:after">
                  <h2 id="c2">Calculator</h2>
                  <span ="c3">Someone can enter in the numbersthey want, and press the big blue button and get the result.</span>
                  <img id="c1" src="images\portfolio-6.png" alt="Calculator" </img>
           </div>
          </div>

  </main>
<!–///Main content –>

Answer 1

main-1，main-2，main-3 div真的有用吗？
我想它们是您代码中的问题。弹性项目必须保留在这些div中。

这是一个有效的示例（我在html中交换了travel-app和map，以显示现在的排序是正确的）：

<!DOCTYPE html>
<html>
<head>
<style>
.main image {
  padding: 10%;
}
.main {
 display: flex;
 flex-wrap: wrap;
 align-items: baseline;
 border: 1px solid red;
  }
.main > * {
  flex: 10%;
  padding: 5%;
}

.portfolio {
  flex: 100%;
  order: 0;
}

.marketing-page {
  flex: 0 0 22%;
  order: 1;
}

.search-page {
  flex: 0 0 22%;
  order: 2;
}
.travel-app {
  flex: 0 0 22%;
  order: 3;
}

.map {
  flex: 0 0 22%;
  order: 4;
}
.photo-galery {
  flex: 0 0 22%;
  order: 5;
}
.calculator {
  flex: 0 0 22%;
  order: 6;
}
</style>
<title> STACK 1 </title>
</head>
<body>
    <!-- Main content/ Flexbox doesn´t work with figure and figcaption. -->

    <main class="main" "clearfix:after">
         <div class="portfolio">
            <h1>Portfolio</h1>
         </div>
          <!--<div class="main-1">-->
              <div class="marketing-page" "clearfix:after">
                  <h2 id="m2">Marketing Page</h2>
                  <span id="m3">Project shows a front page of marketing website meant for a specific business i´m interested in.</span>
                  <img id="m1" src="images/portfolio-1.png" alt="Marketing Page" </img>
              </div>
              <div class="search-page" "clearfix:after">
                  <h2 id="s2">Search Page</h2>
                  <span id="s3">This project searches through a specific database to find information the user trying to look up.</span>
                  <img id="s1" src="images/portfolio-2.png" alt="Search Page" </img>
              </div>
          <!--</div>
          <div class="main-2" "clearfix:after">-->
              <div class="map" "clearfix:after">
                  <h2 id="map2">Map of Favorite Spots</h2>
                  <span id="map3">This project uses mapping apis to plot points for my favorite spots in city for a do it your self walking tour.</span>
                  <img id="map1" src="images/portfolio-4.png" alt="Map of Favorite Spots" </img>
              </div>
              <div class="travel-app" "clearfix:after">
                  <h2 id="t2">Travel App</h2>
                  <span id="t3">This project compares travel times based on different transport methods and tells you the best one.</span>
                  <img id="t1" src="images/portfolio-3.png" alt="Travel App" </img>
              </div>
          <!--</div>
          <div class="main-3">-->
              <div class="photo-galery" "clearfix:after">
                  <h2 id="p2">Photo Galery</h2>
                  <span id="p3">This project shows pictures from a recent t rip to the viewer and al lows them to easily navigate through photos.</span>
                  <img id="p1" src="images/portfolio-5.png" alt="Photo Galery" </img>
              </div>
           <div class="calculator" "clearfix:after">
                  <h2 id="c2">Calculator</h2>
                  <span ="c3">Someone can enter in the numbersthey want, and press the big blue button and get the result.</span>
                  <img id="c1" src="images\portfolio-6.png" alt="Calculator" </img>
           </div>
          <!--</div>-->

  </main>
</body>
</html>

每行Flexbox包装订购项目

1 个答案: