在某個斷點處的柔性盒'浮狀'堆棧

我將從我正在努力的方向開始。這是一個非常普遍的resignsive佈局'網格'產品 - 卡片或其他 - 與instagram或運球或任何銷售東西的網站不同。在某個斷點處的柔性盒'浮狀'堆棧

經典難題在於，你很可能必須使用一些絕對高度來獲得一致的東西 - 絕對高度意味着你必須有一些邏輯來確保任何東西都不會脫離這個絕對世界。 Flexbox有很多很棒的選擇來幫助像'拉伸/增長'這樣的東西來保持頁腳底部/但是每個選擇都傾向於某種標記，這不可避免地會在佈局中刪除另一個選項。我過去通常使用JS。

我可以隱藏和顯示「海報」類型的圖像標記來創建一個的if else類型的查詢與不同的標記結束了 - 它會工作創造了圖中所示的佈局。我的問題是 - 這個「浮」像東西（用箭頭顯示）與柔性箱單獨完成？如果我將這兩個元素包裝在父級/我不再能夠使用使這個優雅的其他部分的flexbox的東西。

（我把我的底部代碼）

例僅Flexbox的 - 我試圖填補不同的標記 https://codepen.io/sheriffderek/pen/VWgGgv?editors=0100

示例 - 但這將不允許我使用增長，並保持按鈕視覺上休息在底部（我想我可以在這裏使用絕對定位） https://codepen.io/sheriffderek/pen/c12df0754ea9cdd40bb9425a120088d7

這裏是@ MichaelCoker的建議，將主頁和頁腳包裝在父項中的實現：https://codepen.io/sheriffderek/pen/weNNMp?editors=0100

但是對這個問題的回答很可能是：「不 - 如果不更改標記和方法，沒有辦法做到這一點。「我並不是說有一個銀色的子彈 - 並且所有的場景都可以被覆蓋，但是父母限制了在相同範圍內改變三件事情順序的能力。

標記：

<ul class='thing-list'> 

    <li class='thing'> 
     <header> 
      HEADER 
      <figure> 
       <img src="http://placehold.it/1600x900" alt=""> 
      </figure> 
     </header> 

     <main> 
      MAIN: 
      <h2>Something...</h2> 
     </main> 

     <footer> 
      FOOTER<br> 
      <button>Call to action</button> 
     </footer> 
    </li> 
    <!-- ... -->

樣式：

.thing-list 
    display: flex 
    flex-direction: column 
    .thing 
     display: flex 
     flex-direction: column 
     margin-bottom: 2rem 


@media (min-width: 450px) 
    .thing-list 
     // ? 
     .thing 
      // ? 
      border: 3px solid red 

@media (min-width: 700px) 
    .thing-list 
     flex-direction: row 
     flex-wrap: wrap 
     justify-content: space-between 
     .thing 
      flex-basis: 48% 
      border: 0 
      main 
       flex-grow: 1 

@media (min-width: 900px) 
    .thing-list 
     // 
     .thing 
      flex-basis: 32%

來源

2017-07-13 sheriffderek

你好警長，這個你要什麼？ https://codepen.io/mcoker/pen/zzeMzw –

AH @MichaelCoker - 我的英雄。把這個答案放在一個解釋中，會是嗎？ – sheriffderek

https：// stackoverflow。com/q/34480760/3597276 –

你可以用你的main和footer部分在另一個元素，並且在中@media查詢，設置.thing到Flex row所以行列包含header和新元素包裝main和footer。

.thing-list { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
} 
 
.thing-list .thing { 
 
    display: -webkit-box; 
 
    display: -ms-flexbox; 
 
    display: flex; 
 
    -webkit-box-orient: vertical; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: column; 
 
      flex-direction: column; 
 
    margin-bottom: 2rem; 
 
} 
 
@media (min-width: 450px) { 
 
    .thing-list .thing { 
 
    border: 3px solid #f00; 
 
    } 
 
} 
 
@media (min-width: 700px) { 
 
    .thing-list { 
 
    -webkit-box-orient: horizontal; 
 
    -webkit-box-direction: normal; 
 
     -ms-flex-direction: row; 
 
      flex-direction: row; 
 
    -ms-flex-wrap: wrap; 
 
     flex-wrap: wrap; 
 
    -webkit-box-pack: justify; 
 
     -ms-flex-pack: justify; 
 
      justify-content: space-between; 
 
    } 
 
    .thing-list .thing { 
 
    -ms-flex-preferred-size: 48%; 
 
     flex-basis: 48%; 
 
    border: 0; 
 
    } 
 
    .thing-list .thing main { 
 
    -webkit-box-flex: 1; 
 
     -ms-flex-positive: 1; 
 
      flex-grow: 1; 
 
    } 
 
\t .thing-list .thing { 
 
\t \t -webkit-box-orient: horizontal; 
 
\t \t -webkit-box-direction: normal; 
 
\t \t  -ms-flex-direction: row; 
 
\t \t   flex-direction: row; 
 
\t } 
 
\t .thing-list .thing header, .thing-list .thing .mainFoot { 
 
\t \t -webkit-box-flex: 1; 
 
\t \t  -ms-flex: 1 0 0; 
 
\t \t   flex: 1 0 0; 
 
\t } 
 
\t .thing-list .thing .mainFoot { 
 
\t \t display: -webkit-box; 
 
\t \t display: -ms-flexbox; 
 
\t \t display: flex; 
 
\t \t -webkit-box-orient: vertical; 
 
\t \t -webkit-box-direction: normal; 
 
\t \t  -ms-flex-direction: column; 
 
\t \t   flex-direction: column; 
 
\t } 
 
} 
 
@media (min-width: 900px) { 
 
    .thing-list .thing { 
 
    -ms-flex-preferred-size: 32%; 
 
     flex-basis: 32%; 
 
\t \t -webkit-box-orient: vertical; 
 
\t \t -webkit-box-direction: normal; 
 
\t \t  -ms-flex-direction: column; 
 
\t \t   flex-direction: column; 
 
    } 
 
\t .thing-list .thing .mainFoot { 
 
\t \t -webkit-box-flex: 1; 
 
\t \t  -ms-flex: auto; 
 
\t \t   flex: auto; 
 
\t } 
 
} 
 
body { 
 
    padding: 1rem; 
 
} 
 
.thing header, 
 
.thing main, 
 
.thing footer { 
 
    padding: 1rem; 
 
} 
 
.thing header { 
 
    background: #add8e6; 
 
} 
 
.thing main { 
 
    background: #f5deb3; 
 
} 
 
.thing footer { 
 
    background: #ffc0cb; 
 
} 
 
figure { 
 
    margin: 0; 
 
} 
 
figure img { 
 
    display: block; 
 
    width: 100%; 
 
    height: auto; 
 
}

<ul class='thing-list'> 
 
\t 
 
\t <li class='thing'> 
 
\t \t <header> 
 
\t \t \t HEADER 
 
\t \t \t <figure> 
 
\t \t \t \t <img src="http://placehold.it/1600x900" alt=""> 
 
\t \t \t </figure> 
 
\t \t </header> 
 
\t \t <div class="mainFoot"> 
 
\t \t <main> 
 
\t \t \t MAIN: 
 
\t \t \t <h2>Something...</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p> 
 
\t \t </main> 
 
\t \t 
 
\t \t <footer> 
 
\t \t \t FOOTER<br> 
 
\t \t \t <button>Call to action</button> 
 
\t \t </footer> 
 
\t \t </div> 
 
\t </li> 
 
\t 
 

 
\t <li class='thing'> 
 
\t \t <header> 
 
\t \t \t HEADER 
 
\t \t \t <figure> 
 
\t \t \t \t <img src="http://placehold.it/1600x900" alt=""> 
 
\t \t \t </figure> 
 
\t \t </header> 
 
\t \t <div class="mainFoot"> 
 
\t \t <main> 
 
\t \t \t MAIN: 
 
\t \t \t <h2>Something...</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p> 
 
\t \t </main> 
 
\t \t 
 
\t \t <footer> 
 
\t \t \t FOOTER<br> 
 
\t \t \t <button>Call to action</button> 
 
\t \t </footer> 
 
\t \t </div> 
 
\t </li> 
 
\t 
 
\t <li class='thing'> 
 
\t \t <header> 
 
\t \t \t HEADER 
 
\t \t \t <figure> 
 
\t \t \t \t <img src="http://placehold.it/1600x900" alt=""> 
 
\t \t \t </figure> 
 
\t \t </header> 
 
\t \t <div class="mainFoot"> 
 
\t \t <main> 
 
\t \t \t MAIN: 
 
\t \t \t <h2>Something...</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet consectetur.</p> 
 
\t \t </main> 
 
\t \t 
 
\t \t <footer> 
 
\t \t \t FOOTER<br> 
 
\t \t \t <button>Call to action</button> 
 
\t \t </footer> 
 
\t \t </div> 
 
\t </li> 
 
\t 
 
\t <li class='thing'> 
 
\t \t <header> 
 
\t \t \t HEADER 
 
\t \t \t <figure> 
 
\t \t \t \t <img src="http://placehold.it/1600x900" alt=""> 
 
\t \t \t </figure> 
 
\t \t </header> 
 
\t \t <div class="mainFoot"> 
 
\t \t <main> 
 
\t \t \t MAIN: 
 
\t \t \t <h2>Something...</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p> 
 
\t \t </main> 
 
\t \t 
 
\t \t <footer> 
 
\t \t \t FOOTER<br> 
 
\t \t \t <button>Call to action</button> 
 
\t \t </footer> 
 
\t \t </div> 
 
\t </li> 
 
\t 
 
\t <li class='thing'> 
 
\t \t <header> 
 
\t \t \t HEADER 
 
\t \t \t <figure> 
 
\t \t \t \t <img src="http://placehold.it/1600x900" alt=""> 
 
\t \t \t </figure> 
 
\t \t </header> 
 
\t \t <div class="mainFoot"> 
 
\t \t <main> 
 
\t \t \t MAIN: 
 
\t \t \t <h2>Something...</h2> 
 
\t \t \t <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum dolorum similique dolores ipsum, cumque aspernatur.</p> 
 
\t \t </main> 
 
\t \t 
 
\t \t <footer> 
 
\t \t \t FOOTER<br> 
 
\t \t \t <button>Call to action</button> 
 
\t \t </footer> 
 
\t \t </div> 
 
\t </li> 
 
</ul>

來源

2017-07-13 17:35:38

我必須稍微查看一下 - 並確保添加父級div不會導致另一個問題。：）謝謝 – sheriffderek

您的建議可以完成工作，但答案很可能是「不，您目前無法單獨使用Flexbox來完成這項工作 - 但這裏有一項解決方案。」 – sheriffderek

@sheriffderek好，它仍然是所有的柔性盒。我認爲答案更像是「是的，如果你添加另一個元素」 - 新元素仍然使用flex，它本身（它是一個flex列），它是父級水平行中的flex子元素。所以它仍然是一個flexbox解決方案，只需要爲媒體查詢添加一個附加元素即可創建一個將右側元素作爲Flex列的行。 –

在某個斷點處的柔性盒'浮狀'堆棧

回答

相關問題