undefinedfix
Sign in

How to write such a flex layout?

Charles edited in Thu, 04 Aug 2022
4 Replies
ePumps
commented on Thu, 04 Aug 2022

If you continue to use flex, you can create more data. The component corresponding to the data can be directly visible: hidden

Karotte
commented on Thu, 04 Aug 2022

If the parent element is set to flex and the child elements each account for 1 / 3 of the total, it's OK

.parent {
    display: flex
    .child {
        flex: calc(1 / 3)
    }
}
rumag
commented on Thu, 04 Aug 2022

Just make an empty box .

<div class="container">
  <div class="box">
    <div class="content">内容区域</div>
  </div>
  <div class="box">
    <div class="content">内容区域</div>
  </div>
  <div class="box"></div>
</div>

Box is set to flex auto. In order not to let the box content open the box (the size of the box will be different if the content is inconsistent), you can put the real content in the content, and then absolutely position and stick it to the parent element

.box
  flex auto
  position relative
.content
  position absolute
  left 0
  right 0
  top 0
  bottom 0
tormes
commented on Thu, 04 Aug 2022
// html
<div class="parent">
  <div class="child">111</div>
  <div class="child">222</div>
  <div class="child">333</div>
  <div class="child">444</div>
  <div class="child">555</div>
</div>

// style
.parent {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.child {
  flex-basis: 33.3%;
}
lock This question has been locked and the reply function has been disabled.