CSSflexbox問題：兩列移動回應-有解無憂

我試圖將影像浮動到左側，并在影像的右側添加一個很棒的 UL LI 串列。這也需要具有回應性，以便在移動視圖中影像將位于頂部，而 UL LI 串列將位于下方。

我的程序是使用 flexbox 并使用兩列。這一切都很簡單，但我的問題是：

我的方法是“好方法”嗎？和
如何使左列（在 flexbox 中）具有整個寬度的 30% 或 200px 長（對于影像）？

這是 CSS

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

這是 HTML

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        IMAGE would go here...
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
      UL LI would go here
      </div>
    </div>
  </div>
</div>

感謝所有的指點和幫助...

uj5u.com熱心網友回復：

我認為你的方法非常好。
我可能錯了，但這是我的建議。我相信最好的方法是使用網格，它允許占用空間的百分比，然后使用媒體查詢以移動寬度切換到 flexbox：

.some-page-wrapper {
  margin: 15px;
  background-color: red;
}

.row {
  display: grid;
  grid-template-columns: 30% 1fr;
  /* or for your 200px approach:
  grid-template-columns: 200px 1fr; */
  width: 100%;
}

.column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
  flex: 1;
}

.blue-column {
  background-color: blue;
  height: 100px;
}

.green-column {
  background-color: green;
  height: 100px;
}

@media only screen and (max-width: 480px) {
  .row {
    display: flex;
    flex-flow: column wrap;
    width: 100%;
  }
}

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column'>
      <div class='blue-column'>
        IMAGE would go here...
      </div>
    </div>
    <div class='column'>
      <div class='green-column'>
        UL LI would go here
      </div>
    </div>
  </div>
</div>

uj5u.com熱心網友回復：

我會調整一些 HTML 和 CSS。
HTML：

<div class='some-page-wrapper'>
  <div class='row'>
    <div class='column blue'> <!-- use blue class css -->
      <div class='blue-column'> <!-- remove blue-column class css-->
        IMAGE would go here...
      </div>
    </div>
    <div class='column green'> <!-- use green class css -->
      <div class='green-column'> <!-- remove green-column class css-->
      UL LI would go here
      </div>
    </div>
  </div>
</div>

CSS：

.column {
  display: flex;
}

.blue {
  background-color: blue;
  height: 100px;
  min-width: 200px;
  flex: 0.3;
}

.green {
  background-color: green;
  height: 100px;
  flex: 1;
}

這是我的代碼筆：

轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/379897.html

標籤：html css 弹性盒

上一篇：環繞文本HTMLCSS的問題

下一篇：在D3.js矩形中有文本