首頁猿問定位最后一行或特定行上的彈性項目

定位最后一行或特定行上的彈性項目

Html/CSS CSS3 Html5

慕尼黑8549860 2019-05-29 14:38:46

定位最后一行或特定行上的彈性項目我的問題是我希望flexbox具有可變范圍寬度，并且一切正常，但不是最后一行。我希望所有孩子都有相同的維度，即使行沒有孩子（最后一行）。#products-list { position:relative; display: flex; flex-flow: row wrap; width:100%;}#products-list .product { min-width:150px; max-width:250px; margin:10px 10px 20px 10px; flex:1;}我在jsFiddle中創(chuàng)建了一個動態(tài)的情境我的flex div可以縮小到150px并且長到250px，但所有都必須具有相同的大?。@然我想要一個CSS解決方案，JS我知道的方式）。

查看完整描述

3 回答

桃花長相依

TA貢獻1860條經(jīng)驗獲得超8個贊

作為快速而骯臟的解決方案，您可以使用：

.my-flex-child:last-child/*.product:last-child*/ {
  flex-grow: 100;/*Or any number big enough*/}

反對回復 2019-05-29

眼眸繁星

TA貢獻1873條經(jīng)驗獲得超9個贊

我使用了這種解決方法，即使它不是很優(yōu)雅而且它沒有使用Flexbox的強大功能。

它可以在以下條件下進行：

所有物品的寬度相同
這些物品具有固定的寬度
你使用SCSS / SASS（雖然可以避免）

如果是這種情況，您可以使用以下代碼段：

 $itemWidth: 400px;
 $itemMargin: 10px;html, body {
  margin: 0;
  padding: 0;}.flex-container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  margin: 0 auto;
  border: solid 1px blue;}@for $i from 1 through 10 {
  @media only screen and (min-width: $i * $itemWidth + 2 * $i * $itemMargin) {
    .flex-container {
      width: $i * $itemWidth + 2 * $i * $itemMargin;
    }
  }}.item {
  flex: 0 0 $itemWidth;
  height: 100px;
  margin: $itemMargin;
  background: red;}

<div class="flex-container">
  <div class="item"></div>
  <div class="item" style="flex: 500 0 200px"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div></div>

在這里，我在codepen上創(chuàng)建了一個實現(xiàn)margin 的示例。

第二個和第三個條件可以分別使用css變量（如果你決定提供支持）和編譯上面的scss片段來避免。

嗯，這是真的，我們也可以在flexbox之前做到這一點，但display: flex對于響應式設計仍然是必不可少的。

反對回復 2019-05-29

3 回答
0 關注
776 瀏覽

關注

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

定位最后一行或特定行上的彈性項目

定位最后一行或特定行上的彈性項目

3 回答

相關問題推薦

添加回答

第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

熱搜

最近搜索清空

定位最后一行或特定行上的彈性項目

定位最后一行或特定行上的彈性項目

3 回答

相關問題推薦

添加回答