如何用flexbox实现这种设计？

Question

#timer-head .wrapper {
  display: grid;
  grid-template-columns: repeat(2, 1fr); }
  #timer-head .wrapper .title {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: 1;
    display: flex;
    align-items: center;
    justify-content: center; }
    
  #timer-head .wrapper .timer {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 2;
    grid-row-end: 2; }
    
     #timer-head .wrapper .image {
    grid-column-start: 2;
    grid-column-end: 2;
    grid-row-start: 1;
    grid-row-end: 3; }
    
     #timer-head .wrapper .image p{
     background: red;
     padding: 100px;
     }

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
        <div class="image"><p>Image</p></div>
    </div>  
</section>

我实际上是用 CSS Grid 实现的，但不知道如何用 flexbox 实现。谁能帮忙？我之所以要它在 flex 中也做，是因为 IE 11 支持。

Answer 1

我已对您的 HTML 代码进行了一些更改以使其正常工作。

#timer-head {
  display: flex;
}

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

.title, .timer {
  text-align: center;
  padding: 10px;
  margin: 5px;
  background-color: red;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: blue;
  margin: 5px;
}

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
    </div>  
        <div class="image"><p>Image</p></div>
</section>

Answer 2

基于@ThibautM 的回答，我向两个子元素添加了 flex: 1 以赋予它们相等的宽度，就像您在屏幕截图中看到的那样。

#timer-head {
  display: flex;
}

.wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.title, .timer {
  text-align: center;
  padding: 10px;
  margin: 5px;
  background-color: red;
}

.image {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
  background-color: blue;
  margin: 5px;
flex: 1;
}

<section id="timer-head">
    <div class="wrapper">
        <div class="title">Title</div>
        <div class="timer">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni quae dolor rem ipsam sint voluptate accusantium vitae dolorum, quidem eveniet.
        </div>
    </div>  
        <div class="image"><p>Image</p></div>
</section>

Answer 3

我会这样做，与其他答案的不同之处在于，在此版本中它是响应式的（如果您在 IE11 中将其拖动得更小），这两个答案都解决了您的问题，只是想为您提供替代方案。

#timer-head{
                max-width: 100vw;
                max-height: 10vh;
            }
            .wrapper{
                max-width: 100%;
                display: flex;
                flex-flow: row nowrap;
                justify-content: space-between;
            }
            .wrapper-column{
                width: 49%;
                display: flex;
                flex-flow: column nowrap;
                height: 100%;
            }
            .wrapper-column div {
                display: flex;
                background: #1E95EA;
                width: 100%;
                justify-content: center;
                align-items: center;
                margin: 1px;
                height: 50px;
            }
            .image{
                display: flex;
                width: 50%;
                background: #1E95EA;
                justify-content: center;
                align-items: center;
            }

<section id="timer-head">
    <div class="wrapper">
        <div class="wrapper-column">
            <div class="title">Title</div>
            <div class="timer">
                Timer
            </div>
        </div>
        <div class="image"><p>Image</p></div>
    </div>
</section>

如何用flexbox实现这种设计？

How to achieve this design with flexbox?

css

grid

flexbox