使用flexbox，如何更改断点的顺序和方向？

Question

我试图将output元素放置在滑块上方以用于较小的屏幕，并放置在＆＃34; +＆＃34;的右侧。剩下的按钮。如何在不重复标记的情况下使用flexbox执行此操作？当我有一个包装器div时，用CSS更改顺序似乎没有想要的效果，如果没有包装器div，我就无法将滑块上方的output元素对齐。

有什么想法吗？

＆＃13;

＆＃13;

$("#minus").click(function(event) {
  zoom("out");
});

$("#plus").click(function(event) {
  zoom("in");
});

$("#range").on('input change', function(event) {
  $('#output').text($(event.currentTarget).val());
});

function zoom(direction) {
  var slider = $("#range");
  var step = parseInt(slider.attr('step'), 10);
  var currentSliderValue = parseInt(slider.val(), 10);
  var newStepValue = currentSliderValue + step;

  if (direction === "out") {
    newStepValue = currentSliderValue - step;
  } else {
    newStepValue = currentSliderValue + step;
  }

  slider.val(newStepValue).change();
};

＆＃13;

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

.inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#minus {
  order: 1;
}

#range {
  order: 1;
}

#output {
  order: 1;
  @media screen and (min-width: 320px) {
    order: 5;
  }
}

#plus {
  order: 4;
}

.inner-wrap {
  order: 2;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="minus">-</button>
  <div class="inner-wrap">
    <output for="range" id="output">50</output>
    <input id="range" type="range" step="10" value="50">
  </div>
  <button id="plus">+</button>
</div>

＆＃13;

＆＃13;

＆＃13;

• 演示：http://jsfiddle.net/remisture/8u6wetdy/

＆＃13;

＆＃13;

$("#minus").click(function(event) {
  zoom("out");
});

$("#plus").click(function(event) {
  zoom("in");
});

$("#range").on('input change', function(event) {
  $('#output').text($(event.currentTarget).val());
});

function zoom(direction) {
  var slider = $("#range");
  var step = parseInt(slider.attr('step'), 10);
  var currentSliderValue = parseInt(slider.val(), 10);
  var newStepValue = currentSliderValue + step;

  if (direction === "out") {
    newStepValue = currentSliderValue - step;
  } else {
    newStepValue = currentSliderValue + step;
  }

  slider.val(newStepValue).change();
};

＆＃13;

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <button id="minus">-</button>
  <input id="range" type="range" step="10" value="50">
  <button id="plus">+</button>
  <output for="range" id="output">50</output>
</div>

＆＃13;

＆＃13;

＆＃13;

• 演示：https://jsfiddle.net/remisture/4usbmf14/

Answer 1

使用绝对定位，而不是使用order属性和嵌套容器。这是代码的简化版本。媒体查询使用绝对定位将output元素置于较小的屏幕中。

revised demo

＆＃13;

＆＃13;

.container {
  display: flex;
  align-items: center;
  margin: 50px auto;
  position: relative;
}

input[type=range] {
  flex: 1;
  min-width: 0;
}

button {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  margin: 0 10px;
}

@media (max-width: 320px) {
  #output {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
  }
}

＆＃13;

<div class="container">
  <button id="minus">-</button>
  <input id="range" type="range" step="10" value="50">
  <button id="plus">+</button>
  <output for="range" id="output">50</output>
</div>

＆＃13;

＆＃13;

＆＃13;

对于可能感兴趣的其他人，可以选择以下方法：将output元素放在两个位置。

在媒体查询中使用display: none控制其外观。

这样的事情：

@media screen and (min-width: 320px) {
    #output-small-screen { display: none }
}
@media screen and (max-width: 320px) {
    #output-wide-screen { display: none }
}

revised demo

＆＃13;

＆＃13;

.container {
  width: 100%;
  margin: 50px auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

input[type=range] {
  width: 100%;
}

button {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  background: white;
  font-size: 24px;
  border: 1px solid lightgrey;
  cursor: pointer;
  -webkit-appearance: none;
  margin: 0 10px;
}

.inner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

#minus {
  order: 1;
}

#range {
  order: 1;
}

#output-wide-screen {
  order: 5;
}

@media screen and (min-width: 320px) {
  #output-small-screen {
    display: none
  }
}

@media screen and (max-width: 320px) {
  #output-wide-screen {
    display: none
  }
}

#plus {
  order: 4;
}

.inner-wrap {
  order: 2;
}

＆＃13;

<div class="container">
  <button id="minus">-</button>
  <div class="inner-wrap">
    <output for="range" class="output" id="output-small-screen">50</output>
    <input id="range" type="range" step="10" value="50">
  </div>
  <button id="plus">+</button>
  <output for="range" class="output" id="output-wide-screen">50</output>
</div>

＆＃13;

＆＃13;

＆＃13;