在视频上方设置过滤器

Question

我正在研究宽度为1130px的过滤器。但是你需要点击那个黑色按钮过滤来查看过滤器。我的问题是点击后发生的事情。我希望在视频上方放置这些过滤器。但我无法弄清楚如何做到这一点。我很确定这很简单，但我不知道是什么。

/* VIDEOS */


.videoblock {
    width: 100%;
    height: 230px;
    display:flex;
}

.videoblock a {
    margin-right: 10px;
}

.nodec {
    text-decoration: none;
}

.insideblock {
   width: 240px;

}
.insideblock p {


}
.videoheading {
    display: block;
    font-weight: bold;
    margin: 7px 0 10px 0;
   
    font-size: 14px;
    color: black;
}

.videotext {
    color: grey;
    font-size: 13px;
    margin: 0px;
}

.blockwrapper {
    width: 100%;
}

.blockblockwrapper{
   width: 1000px;
    margin: auto;
}

/* Filters */

.filterssize {
    display: inline-block;
    padding-right: 40px;
    border-right: 3px solid grey;
    
}

.filters {
    margin-left: 50px;
    
}


.if1 h3 {
margin-top: 0%;

}

.filtrbtndiv {
    width: 100%;
    display: flex;
}
.filtrbtn {
    text-decoration: none;
    color: black;
    text-align: center;
    padding: 10px;
    border: 1px solid black;
    width: 60%;
    margin-top: 20px;
}

.filtrbtn:hover {
  background-color: black;
transition: 0.3s;
    color: white;
    
}

.border {
    position: relative;
    width: 100%;;
    height: 100%;
    border-right: 3px solid grey;
    font-size: 18px;
    color: rgb(80, 80, 80);
    
}


.miracle {
}


.icontext {
    margin:0 20px 0 20px;
}

.fandv {
    display:flex;
    width:100%;
    margin-top: 50px;
}
@media only screen and (max-width: 1130px) {

.filters {
display:none;
}

 .showfilters {
        cursor: pointer;
        border-radius: 3px;
        font-size: 1.2em;
        display: flex;
        justify-content: space-around;
        margin: 2% 0% 0% 5%;
        background-color: black;
        color: white;
        padding: 15px;
        width: 150px;
        text-align: center;
        margin: 20px 0 20px 20px
        
    }
    
   }

<!-- BEGIN - FILTERS -->
<div class="showfilters" id="showfilters"><a>FILTRE</a><i class="fas fa-angle-down"></i></div>
    <div class="fandv">
    
<div class="filters" id="panelf">
<div class="filterssize">
   <div class="if">
    <div class="if1">
        <h3 style="color: black;">Kategórie</h3>
   <div class="md-checkbox">
  <input id="i2" type="checkbox">
  <label for="i2">Výroba potravín</label>
</div>
<div class="md-checkbox">
  <input id="i1" type="checkbox">
  <label for="i1">Potravinové podvody</label>
</div>
<div class="md-checkbox">
  <input id="i3" type="checkbox">
  <label for="i3">Výsledky testov potravín</label>
</div>
<div class="md-checkbox">
  <input id="i5" type="checkbox">
  <label for="i5">Testy</label>
</div>
</div>
<div class="if1">
<h3 style="color: black;">Série</h3>
<div class="md-checkbox">
  <input id="i4" type="checkbox">
  <label for="i4">Séria 1</label>
    </div>
</div>
</div>

</div>
</div>
    
     <div class="blockblockwrapper">
    <div class="blockwrapper">
    <div class="videoblock">
    <a href="#" class="nodec">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
     <a href="#" class="nodec thirdvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec secvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec lastvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    </div>
    </div>
    
    <!-- 2 -->
        
    <div class="blockwrapper">
    <div class="videoblock">
    <a href="#" class="nodec">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec thirdvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec secvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec lastvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    
    </div>
    </div>
    
    <!-- 3 -->
   
    <div class="blockwrapper">
    <div class="videoblock">
    <a href="#" class="nodec">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec thirdvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec secvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
        
    <a href="#" class="nodec lastvideo">
    <div class="insideblock">
    <img src="https://i.vimeocdn.com/video/678490751_240x135.jpg" width="240" height="135">
    <p class="videoheading">Vegán bez čapice - 1</p>
    <p class="videotext">Séria:2</p> 
    <p class="videotext">630 000 000 videní</p>
    <p class="videotext">Pred 3 dňami</p>
    </div>
    </a>
    
    </div>
    </div>
    <!-- BEGIN - PAGINATION -->
        <div class="pagination">
  <a href="#"><i class="fas fa-angle-double-left pgn"></i></a>
   <a href="#"><i class="fas fa-angle-left pgn"></i></a>
  <a class="active" href="#">1</a>
  <a href="#">2</a>
  <a href="#">3</a>
  <a href="#">4</a>
  <a href="#"><i class="fas fa-angle-right pgn"></i></a>
   <a href="#"><i class="fas fa-angle-double-right pgn"></i></a>
</div>
        </div>    
    
</div>

<!-- BEGIN - JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script  src='js/slider.js'></script>
    <!-- END - JS-->
    
            <script>
  // Get the modal
  var modal = document.getElementById('id01');

  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    console.log(event.target)
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
</script>

<script> 
$(document).ready(function(){
    $("#flip").click(function(){
        $("#panel").slideToggle("slow");
    });
});
</script>

<script> 
$(document).ready(function(){
    $("#showfilters").click(function(){
        $("#panelf").slideToggle("slow");
    });
});
</script>
    



    
</body>

</html>

Answer 1

没有指定方向的Flexbox默认为行（从左到右）。改为将其更改为列：

.fandv {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 50px;
}

MDN details on flex-direction.