如何在顶部较大区域正确布局flexbox

Posted 2021-04-27

我确定已经问过这个问题，但是我一直在拼命搜寻，似乎找不到我要尝试做的事情。

我有一个要使用的容器，我知道以后需要弄清楚一些媒体查询，但是我什至无法使原始布局正常工作。这个想法是在所有内容的顶部都用包装纸将其保留在容器中，然后将“ #about”弯曲到左侧，然后在右侧使用“ .container2”，均匀地将其分开2垂直放置更多部分（#map和#info）。稍后，我将处理媒体查询，但附上一张我或多或少试图解决的图片。这是我的代码笔，也显示了到目前为止我能弄清楚的内容。

Codepen

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

我预先道歉，因为我认为这可能是一个非常简单的主题，但是我似乎无法使其正常工作，而且我所观看的所有flexbox视频都无济于事，因为它们没有显示此内容弹性类型。

.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 [phone] <br>
                        </p>
                      </div>
                    </div>
            </div>
    </div>

答案

我认为您正在寻找的是弹性基准和弹性方向。

您应在框旁边的第一段容器中添加一个container1类。

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

.wrapper{
  display: flex;
}

.container1{
    flex-basis: 100%;
}

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

希望这是您想要的