时间戳

首页 > 解决方案 > 如何在顶部区域更大的情况下正确布局 flexbox

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

问题描述

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

密码笔

我正在努力完成的事情的图片（草图）

我提前道歉，因为我觉得这可能是一个非常简单的主题，但我似乎无法让它发挥作用，而且我看过的所有 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 888.888.8881 <br>
                        </p>
                      </div>
                    </div>
            </div>
    </div>

标签： htmlcssflexbox

解决方案

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

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

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

.wrapper{
  display: flex;
}

.container1{
    flex-basis: 100%;
}

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

希望这是您正在寻找的

推荐阅读