如何将元素移动到新行？ html/css [重复]

Question

我希望我想添加的元素之一从新行开始。具体来说，我正在尝试添加一个新的项目卡，但是每当我添加它时，该元素不会从新行开始，而是会缩小其他项目卡，并且它们都在同一行。

例如，这是项目的原始代码：

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  justify-content: center;
  color: white;
}
figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
}
figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}
figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}

<section id="project">
                  <div class="container" data-aos="fade-up">
        <link rel="stylesheet" href="assets/css/projects.css">
                <link rel="stylesheet" href="assets/css/text.css">
      <div class="section-title">
        <h2>My Projects</h2>
        <h23>More Coming Soon!</h23>
        </div>
            <div class="project-container">
   <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
  <figcaption>
      <h3>Earth Print</h3>
      <p>Do you want to know how COVID-19 has impacted your carbon footprint? Do you want an app that can keep track of your carbon footprint?</p>
      <div class="read-more">Read More</div>
      <p class="hidden">Earth Print lets you actively gauge your impact on the environment and pushes you to do better. Putting a check on your vehicular emissions and your electricity usage, Earth Print helps you track your carbon footprint and provides a platform for friendly competition to better ourselves as a community. The code uses a simple Express REST API to collect info about the user and Carbon Interface's api to perform calculations and estimate a score of a user's impact on the climate</p>

    </figcaption>
</figure>

<figure class="snip1311"><img src="https://i.pinimg.com/474x/0c/b9/b1/0cb9b14c4a5eb45cb54e9089ee066aba.jpg" alt="sample98"/>
  <figcaption>
    <h3>Classroom Seating Plan</h3>
    <p>Do you want a program that automatically sets the seats location for your students, based on alphabetical order? Do you want to save the seatlocation of the students into a different file so that you can refer back to it when needed?</p>
    <div class="read-more">Read More</div>
    <p class="hidden">A classroom seating plan that allows the user to select the size of their classroom (6x5 or 3x10) and outputs a visual representation of what their classrrom looks like.
The user can then type the number of students in their class, and the names of the students along with their seat location gets saved into a new TextFile
This makes it easier for the user to refer back to the names and seat location, as there is a whole new file with the information.
The user then has a choice to sort the names into alphabetical order and assign seats like that. If the user wants it that way, then the names are sorted into alphabetical order with seat location.
Seat location changes depending on the classroom size the user selects, and the rows and columns reset, accordingly
The user then has the choice to exit the program. If they choose to do so, the program is ended. If they do not want to exit the program, then the program restarts. Created using Java.</p>
  </figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
  <figcaption>
    <h3>Cash Register</h3>
    <p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
    <div class="read-more">Read More</div>
    <p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays. 
One of them is for HST values only, and the other one is for non-HST values only. 
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
  </figcaption>
</figure>
</div>

</section>

所以我想添加另一个项目卡，但这次它应该从新行开始或从第一张卡的正下方开始

我尝试了什么：

@import url(https://fonts.googleapis.com/css?family=Raleway:400,500,800);
.project-container {
  display: flex;
  justify-content: center;
  color: white;
}
figure.snip1311 {
  font-family: 'Raleway', Arial, sans-serif;
  position: relative;
  float: left;
  overflow-y: auto;
  overflow-x: hidden;
  margin: 10px 1%;
  min-width: 230px;
  max-width: 360px;
  max-height: 256px;
  width: 500rem;
  color: #ffffff;
  text-align: left;
  background-color: #07090c;
  font-size: 16px;
  -webkit-perspective: 50em;
  perspective: 50em;
}
figure.snip1311 * {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
}
figure.snip1311 img {
  max-width: 110%;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
  backface-visibility: hidden;
}
figure.snip1311 figcaption {
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  -webkit-transform: rotateX(90deg) translate(0%, -50%);
  transform: rotateX(90deg) translate(0%, -50%);
  -webkit-transform-origin: 0% 0%;
  -ms-transform-origin: 0% 0%;
  transform-origin: 0% 0%;
  z-index: 1;
  opacity: 0;
  padding: 0 30px;
}
figure.snip1311 h3,
figure.snip1311 p {
  line-height: 1.5em;
}
figure.snip1311 h3 {
  margin: 0;
  font-weight: 800;
  text-transform: uppercase;
}
figure.snip1311 p {
  font-size: 0.8em;
  font-weight: 500;
  margin: 0 0 15px;
}
figure.snip1311 .read-more {
  border: 2px solid #ffffff;
  padding: 0.5em 1em;
  font-size: 0.8em;
  text-decoration: none;
  color: #ffffff;
  display: inline-block;
}
figure.snip1311 .read-more:hover {
  background-color: #ffffff;
  color: #000000;
}
figure.snip1311:hover img,
figure.snip1311.hover img {
  -webkit-transform: rotateX(-180deg);
  transform: rotateX(-180deg);
  opacity: 0;
  -webkit-transition-delay: 0;
  transition-delay: 0;
}
figure.snip1311:hover figcaption,
figure.snip1311.hover figcaption {
  -webkit-transform: rotateX(0deg) translate(0, -50%);
  transform: rotateX(0deg) translate(0, -50%);
  opacity: 1;
  -webkit-transition-delay: 0.35s;
  transition-delay: 0.35s;
}
.hidden{
display:none;
}
.read-more{
cursor:pointer;
}

<section id="project">
                  <div class="container" data-aos="fade-up">
        <link rel="stylesheet" href="assets/css/projects.css">
                <link rel="stylesheet" href="assets/css/text.css">
      <div class="section-title">
        <h2>My Projects</h2>
        <h23>More Coming Soon!</h23>
        </div>
            <div class="project-container">
   <figure class="snip1311"><img src="https://static.wixstatic.com/media/d6f6df_dd155c086895409ab4f61f494fa3108b~mv2.png/v1/fill/w_440,h_320,al_c,q_85,usm_0.66_1.00_0.01/footprint.webp" alt="sample94"/>
  <figcaption>
      <h3>Earth Print</h3>
      <p>Do you want to know how COVID-19 has impacted your carbon footprint? Do you want an app that can keep track of your carbon footprint?</p>
      <div class="read-more">Read More</div>
      <p class="hidden">Earth Print lets you actively gauge your impact on the environment and pushes you to do better. Putting a check on your vehicular emissions and your electricity usage, Earth Print helps you track your carbon footprint and provides a platform for friendly competition to better ourselves as a community. The code uses a simple Express REST API to collect info about the user and Carbon Interface's api to perform calculations and estimate a score of a user's impact on the climate</p>

    </figcaption>
</figure>

<figure class="snip1311"><img src="https://i.pinimg.com/474x/0c/b9/b1/0cb9b14c4a5eb45cb54e9089ee066aba.jpg" alt="sample98"/>
  <figcaption>
    <h3>Classroom Seating Plan</h3>
    <p>Do you want a program that automatically sets the seats location for your students, based on alphabetical order? Do you want to save the seatlocation of the students into a different file so that you can refer back to it when needed?</p>
    <div class="read-more">Read More</div>
    <p class="hidden">A classroom seating plan that allows the user to select the size of their classroom (6x5 or 3x10) and outputs a visual representation of what their classrrom looks like.
The user can then type the number of students in their class, and the names of the students along with their seat location gets saved into a new TextFile
This makes it easier for the user to refer back to the names and seat location, as there is a whole new file with the information.
The user then has a choice to sort the names into alphabetical order and assign seats like that. If the user wants it that way, then the names are sorted into alphabetical order with seat location.
Seat location changes depending on the classroom size the user selects, and the rows and columns reset, accordingly
The user then has the choice to exit the program. If they choose to do so, the program is ended. If they do not want to exit the program, then the program restarts. Created using Java.</p>
  </figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
  <figcaption>
    <h3>Cash Register</h3>
    <p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
    <div class="read-more">Read More</div>
    <p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays. 
One of them is for HST values only, and the other one is for non-HST values only. 
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
  </figcaption>
</figure>
<figure class="snip1311"><img src="https://l450v.alamy.com/450v/m67xmp/holiday-sale-online-shopping-concept-woman-holding-credit-card-and-m67xmp.jpg" alt="sample98"/>
  <figcaption>
    <h3>TEST</h3>
    <p>Wouldn't you want a program that can deal with both pricing the items as well as applying taxes whenever necessary. Some items do not require taxes, and so my program knows how to exactly deal with that kind of situation.</p>
    <div class="read-more">Read More</div>
    <p class="hidden">A Cash Register that accepts 5 values, and prompts the user to type out uppercase or lowercase h before or after the value to include the item value in HST tax. The max amount that a user can enter is below $1000 and a positive number, otherwise it would not be included in the totals. After the user types 5 values, the item values are stored in different arrays. 
One of them is for HST values only, and the other one is for non-HST values only. 
15% tax is then applied to HST values only, and then accordingly, a new item total is provided. A summary total, HST total, and Amount Due are also provided in the end. Created using Java.</p>
  </figcaption>
</figure>
</div>

</section>

所以我希望我添加的最后一张卡片从新行开始，或者从第一张卡片的正下方开始。添加display: block; 不起作用，因为它会将两张卡片移动到一行，然后再移动另外两张。

但我希望模式是这样的：一行 3 张牌，下一行 3 张牌，依此类推。 所以一条线上的最大卡片数只能是 3 个 有什么建议吗？

Answer 1

看来您是 CSS 新手。虽然，您利用了 Flex，但很高兴看到。

现在，在 Flex 内部，有一个 flexbox 集合。为了使您的案例更好，您可以使用 flex-wrap 属性进行换行。它会根据可用的屏幕宽度自动计算显示项目的空间和数量；

.project-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    color: white;
    }

这里是JSFiddle Link，如果你想玩更多的话。