如何排列多行？

Question

我目前正在学习 HTML 和 CSS 网格。到目前为止，我已经创建了两个具有不同颜色的块和包含内容的项目。但是我还没有弄清楚如何将元素组织成两行。我计划为每个网格项目添加交互式动画。所以更好地利用屏幕会很有用space。

这是我目前使用的代码：

  <!DOCTYPE html>
    <html>
    <head>  

        <style>
            .flex-container {
              display: flex;
              background-color: darkslategrey;
              padding: 10px;
              grid-auto-columns: auto;
              grid-auto-rows: auto;
              
            }

            div  {
                display: block;
                width: 300px;
                border: 15px ;
                padding: 50px;
                margin: 20px;
                background-color: sandybrown;
                }
            
            .flex-container > div {
              background-color: #f1f1f1;
              margin: 10px;
              padding: 20px;
              font-size: 30px;
              grid-template-columns: 200px;
            }

            

            .grid-item  {
                
                border: 4px solid black;
                width: 120px;
                height: 50px;
                padding: 20px;
                font-size: 30px;
                text-align: center;

                
                        }
            </style>
            </head>
            <body>
            
            <h1>&nbsp;&nbsp; Game</h1>

            <div class="table">
                <h2>Test element</h2>
            </div>
            
            <section class="flex-container">
              <div class="grid-item">1</div>
              <div class="grid-item">2</div>
              <div class="grid-item">3</div>
              <div class="grid-item">4</div>
              <div class="grid-item">5</div>
              <div class="grid-item">6</div>
              <div class="grid-item">7</div>
              <div class="grid-item">8</div>
              <div class="grid-item">9</div>
               
            </section>
            
           </body>

提前致谢

Answer 1

您可以将单独的 flexbox 嵌套在大的 flexbox 中以组织成行。最大的一个（此处为 A）将使用 flex-display: column; 来制作行。第二大（此处为 B）将使用 flex-display: row; 来组织每一行中的网格项目。将您的 grid-item 添加到 B flexbox 并在 html 中用 div 组织它们的顺序，就像您已经做的那样。

.flexboxA{
  display: flex;
  flex-direction: column;
}

.flexboxB{
  display: flex;
  flex-direction: row;
}

.grid-item{
  border: 4px solid black;
  width: 120px;
  height: 50px;
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

Answer 2

您希望它正好排成两行吗？

否则你可以使用属性:flex-wrap: wrap。当当前行中没有更多 space 时，这会使项目转到下一行。

如何排列多行？

How to arrange multiple rows?

html

css

flexbox

css-grid