如何使用flexbox实现此设计？

问题描述

#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支持。

解决方法

以@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>

,

我已经对您的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,quidem eveniet.
        </div>
    </div>  
        <div class="image"><p>Image</p></div>
</section>

,

我会这样，与其他答案不同的是，在此版本中，它是响应式的（如果在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>