html - 如何在顶部更大面积的情况下正确布局 flexbox

Question

我有一个容器，我正在努力让它工作，我知道有一些媒体查询我必须稍后弄清楚，但我什至无法让原始布局工作。这个想法是在所有东西的顶部都有一个包装器以将其保持在容器内，然后将“#about” flex 到左侧，然后在右侧使用“.container2”，均匀地分开 2更多垂直部分(#map 和#info)。稍后我将处理媒体查询，但我附上了一张我或多或少试图解决的问题的图片。这是我的 codepen，也显示了我到目前为止已经弄清楚的内容。

Codepen

Picture of what I'm trying to accomplish (sketch)

我提前道歉，因为我觉得这可能是一个非常简单的主题，但我似乎无法让它发挥作用，而且我看过的所有 flexbox 视频都让我无处可去，因为它们没有显示这种 flex 。

.container {
    width: 80%; 
    margin: auto;
    overflow: hidden;
}
.wrapper {
    width: 100%;
    display: flex;
    flex-flow: wrap;
}
.box {
    text-align: left;
    padding: 20px;
  }
    #map {
        margin: auto;
        background-color: yellow;
        border-radius: 5px;
    }

    #info {
      margin: auto;
      background-color: green;
    }

    #about {
        width: 100%;
    }
 #about {
      order: -1;
      width: 48%;
    }
.container2 {
  width: 48%;
}     

    <div class="container">
            <div class="wrapper">
                    <div class="box" id="about">
                    <h3>Company Main</h3>                    
                      <p> 
                          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magnam id tempore accusamus eaque quidem quo dicta. Quo totam dolor eius dolorem hic a fugit eligendi. <br><br>      Asperiores, iure repellendus facilis cum sapiente unde repudiandae perferendis excepturi ipsam tenetur magnam ex tempore rem fugiat, doloribus beatae consectetur impedit atque voluptates vel. <br><br> Repudiandae perspiciatis quo consectetur deserunt iusto voluptatum, cumque fugiat rem recusandae totam et cum sunt saepe neque ab delectus, modi dicta accusamus voluptatibus culpa corporis nobis. Harum cum quas eum architecto distinctio quia dolorum, ducimus optio libero suscipit hic officiis explicabo beatae ullam, molestiae repudiandae non minus consequuntur facilis quibusdam ipsa quam. <br><br> Quas assumenda tempora excepturi rerum in deleniti labore laboriosam saepe voluptates nulla quidem placeat asperiores alias fugiat numquam corrupti impedit minima, reprehenderit molestias, repellat nemo pariatur animi adipisci aspernatur. Facilis aut ipsum, atque vero voluptatum in rerum ab eum rem eos unde adipisci? <br><br> Beatae modi veritatis officia minus vero cumque a pariatur quod libero quas expedita inventore eligendi, laboriosam, id voluptatibus! Dolor nam incidunt exercitationem molestiae ea porro ipsam explicabo reiciendis necessitatibus voluptates et quidem ipsa aspernatur suscipit eos quaerat magni culpa debitis perspiciatis esse, dicta vero doloribus iste? <br><br> Consectetur culpa assumenda dolore provident voluptatem dolor eum repellat harum.
                        </p>
                    </div>
                    <div class="wrapper container2">
                      <div class="box" id="map">
                        <p>      
                            hello Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        </p>
                      </div>
                      <div class="box" id="info">
                        <p>  Corporate Headquarters <br>
                            XXXX Main Street <br>
                           Capital City, ST 80004 <br><br>
    
                            P.O. Box 101 <br>
                            Capital, ST 11011 <br><br>
                            
                            888.888.8888 <br>
                            Fax 888.888.8881 <br>
                        </p>
                      </div>
                    </div>
            </div>
    </div>

Answer 1

我认为您正在寻找的是 flex 基础和 flex 方向。

您应该将 container1 类添加到框旁边的第一个段落容器中。

然后更新您的代码以反射(reflect)这些更改，我删除了您所有的 CSS，下面的行是实现您提供的草图所需的全部

.wrapper{
  display: flex;
}

.container1{
    flex-basis: 100%;
}

.container2{
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
}

希望这就是你要找的