Flexbox响应式布局

我正在使用flexbox并需要一些帮助。我想要一个大的方形元素在左边，并且有一个四个较小元素的网格，它们的大小等于第一个到最右边的大小。Flexbox响应式布局

到目前为止，我有这样的：

#flex { 
 
    display: flex; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    flex-direction: row; 
 
    justify-content: space-between; 
 
    align-content: stretch; 
 
    flex-wrap: wrap; 
 
    margin-left: 10px; 
 
} 
 
.flex-item { 
 
    padding: 10px; 
 
    flex-basis: auto; 
 
    flex: 0 0 47%; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>

http://codepen.io/DaveBatt83/pen/yVbGQG

我不明白为什么这四个更小的元素堆栈顶部彼此的时候，屏幕的宽度减小，我也想设置一个大的最小宽度，以便在某些断点处占据整个宽度。这是可能的

我想要第一个项目占用宽度的47％，然后通过添加一个嵌套的容器，我想在嵌套容器内创建47％的两个项目的两行。这47％是在它们之间使用空格创建一些间距。

这一切似乎工作，但如果屏幕大小减少两个两行成为4个项目的列。

来源

2016-11-23 DavidB

为了清楚起见，我更改了嵌套的flex-items的名称。很可能你有麻烦，因为你失踪了box-sizing: border-box。

#flex { 
 
    display: flex; 
 
    background-color: peachpuff; 
 
    justify-content: space-between; 
 
} 
 
.flex-item, 
 
.flex-container-inner, 
 
.flex-item-inner { 
 
    flex: 0 0 47%; 
 
    box-sizing: border-box; 
 
} 
 
.flex-item, 
 
.flex-item-inner { 
 
    padding: 10px; 
 
    min-height: 100px; 
 
    margin-bottom: 10px; 
 
    word-wrap: break-word; 
 
    background-color: red; 
 
} 
 
.flex-container-inner { 
 
    display: flex; 
 
    justify-content: space-between; 
 
    flex-wrap: wrap; 
 
}

<div style="margin-top:30px;padding-top:1px;" id="flex"> 
 
    <div class="flex-item"> 
 
    dhhrth rthrthrth rth rhrthrth 
 
    </div> 
 
    <div class="flex-container-inner"> 
 
    <div class="flex-item-inner"> 
 
     yt e ert et e 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 
 
    </div> 
 
    <div class="flex-item-inner"> 
 
     Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, 
 
    </div> 
 
    </div> 
 
</div>

来源

2016-11-23 16:23:45 Ricky

Flexbox响应式布局

回答

相关问题