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響應式佈局

回答

相關問題