Flexbox列不保持相等的宽度

时间：2017-02-26 08:45:54

标签： html css css3 flexbox

我想以下列方式定位5个块：我想水平设置2个块，底部设置1个块，垂直设置3个块附近的2个块。

问题是第一个单元格的宽度不等于第三个单元格的宽度。我该如何解决？

请参阅jsfiddle上的代码。 

.Group1,
.Group2 {
  display: flex;
}

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

.div1,
.div2,
.div3 {
  margin: 10px;
  padding: 20px;
}

.div1 {
  background: #ABC;
  display: flex;
}

.div2 {
  background: #DEF;
}

.div3 {
  background: #CAD;
}
<body>
  <div class="BiggestContainer">
    <div class="Group1">
      <div class="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.</div>


      <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>


    </div>
    <div class="Group2">
      <div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>

      <div class="miniGroup">
        <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
        <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
      </div>

    </div>

  </div>

</body>

3 个答案:

答案 0 :(得分：1)

＆＃13;
＆＃13; 
.Group1,
.Group2 {
  display: flex;
}

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

.div1,
.div2,
.div3 {
  margin: 10px;
  padding: 20px;
  max-width: calc(50vw - 80px);
}

.div1 {
  background: #ABC;
  display: flex;
}

.div2 {
  background: #DEF;
}

.div3 {
  background: #CAD;
}
＆＃13; 
<body>
  <div class="BiggestContainer">
    <div class="Group1">
      <div class="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.</div>


      <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>


    </div>
    <div class="Group2">
      <div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>

      <div class="miniGroup">
        <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
        <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
          consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing
          elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
      </div>

    </div>

  </div>

</body>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

这里有一些想法：

  • 使用box-sizing: border-box，因此所有填充都包含在宽度计算中。
  • 将miniGroup视为其兄弟弹性项目。换句话说，为div1和div2提供类似的边距和填充。然后调整孩子的填充/边距。
  • 提醒miniGroup它需要宽度为50％。

revised fiddle 

* {
  box-sizing: border-box;
}
.Group1, .Group2 {
  display: flex;
}
.miniGroup {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
  flex: 0 0 50%;
}
.miniGroup > .div2, .div3 {
  margin: 10px 0;
  padding: 20px;
}
.div1, .div2 {
  margin: 10px;
  padding: 20px;
}
.div1 { background: #ABC; }
.div2 { background: #DEF; }
.div3 { background: #CAD; }
<div class="BiggestContainer">
  <div class="Group1">
    <div class="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.</div>
    <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
  </div>
  <div class="Group2">
    <div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
      consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
      Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
    <div class="miniGroup">
      <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
      <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet,
        consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit.
        Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
    </div>
  </div>
</div>

答案 2 :(得分：0)

<强> CSS： 

.Group1, .Group2 {
    display: flex;
}
.miniGroup {
  display: flex;
    flex-direction: column;
}
.div1, .div2, .div3{
  border-style: solid;
}
.div1 {
  background: #ABC;
  display: flex;

}
.div2 {
  background: #DEF;
}
.div3 {
  background: #CAD;
}

<强> HTML： 

<body>
<div class="BiggestContainer">
    <div class="Group1">
        <div class="div1"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.</div>


            <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>        


  </div>
  <div class="Group2">
        <div class="div1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>

        <div class="miniGroup">
            <div class="div2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
            <div class="div3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab.Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam magnam provident deserunt, deleniti neque vitae soluta id eveniet inventore animi laudantium iste vero, cupiditate doloremque et sint, dolor unde ab. </div>
        </div>

  </div>

  </div>

</body>

JSFliddle Result

相关问题
最新问题