如何在媒体查询中更改 flex-box 元素的对齐方式？

Question

我正在做一个使用引导 flex-box 的项目。我已将链接附加到我正在使用的布局。在PC以外的不同设备上使用时，我需要将右侧的列更改为向下。

这是我想要的

<div class="d-flex flex-row">
    <div class="flex-column"></div>
    <div class="flex-column"></div>
</div>

Answer 1

我认为您的意思是...最右边的列在小于lg 的尺寸上到达底部...您可以通过相关类更改较小屏幕上的行为；

更新：添加了与 flex 相同效果的代码

检查下面的代码 sn-p：

.leftSection div {
  border: 2px solid red;
  height: 150px;
  background: #000;
  margin-top: 5px;
}

.leftSection div:nth-child(1) {
  height: 300px
}

.rightSection div {
  border: 2px dotted pink;
  height: 100px;
  background: gray;
  margin-top: 5px;
}

.flexDirection>div {
  min-height: 100px;
  min-width: 100px;
  display: flex;
  flex-direction: column;
}

.flexDirection {
  display: flex;
  flex-direction: row;
}

@media screen and (max-width:992px) {
  .flexDirection {
    flex-direction: column;
  }
}

.flexDirection>div:nth-of-type(1) {
  flex-grow: 2;
}

.flexDirection>div:nth-of-type(2) {
  flex-grow: 1;
}

.flexDirection div {
  margin-top: 5px;
}

.leftSectionFlex>div:nth-child(1) {
  border: 2px solid red;
  height: 300px;
  width: 100%;
  background: #000;
  margin-top: 5px;
}

.leftSectionFlexBottom {
  display: flex;
  flex-direction: row!important;
}

.leftSectionFlexBottom>div {
  border: 1px solid red;
  height: 150px;
  width: 100%;
  background: #000;
}

.rightSectionFlex>div {
  border: 2px dotted pink;
  height: 100px;
  width: 100%;
  background: gray;
  margin-top: 5px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<h2>Flex</h2>

<div class="d-flex flexDirection">
  <div class=" flex-column">
    <div class="leftSectionFlex flex-row">
      <div class=""></div>
      <div class="leftSectionFlexBottom">
        <div class=""></div>
        <div class=""></div>
        <div class=""></div>
      </div>
    </div>
  </div>
  <div class=" rightSectionFlex flex-column">
    <div class=""></div>
    <div class=""></div>
    <div class=""></div>
  </div>
</div>

<hr/>
<!--
        -->
<h2> Bootstrap grid</h2>
<div class="container-fluid">
  <div class="row">
    <div class="col-lg-8">
      <div class="row leftSection">
        <div class="col-md-12"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
        <div class="col-md-4"></div>
      </div>
    </div>
    <div class="col-lg-4">
      <div class="row rightSection">
        <div class="col-lg-12 col-md-12"></div>
        <div class="col-lg-12 col-md-12"></div>
        <div class="col-lg-12 col-md-12"></div>
      </div>
    </div>

  </div>
</div>

Answer 2

如果您使用的是 bootstrap-4，则可以遵循此结构。 bootstrap 4 网格结构完全依赖于 flex，您可以将以下结构用于除 PC 之外的设备，以获得您想要的结构。

.box-content{
  height: 300px;
  background-color: #000;
  border: 2px solid red;
  margin-bottom: 20px;
}
.big-box{
  height: 600px;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">

<div class="container-fluid">
  <div class="row">
    <div class="col-xl-9">
      <div class="box-content big-box"></div>
      <div class="row">
        <div class="col-4">
          <div class="box-content"></div>
        </div>
        <div class="col-4">
          <div class="box-content"></div>
        </div>
        <div class="col-4">
          <div class="box-content"></div>
        </div>
      </div>
    </div>
    <div class="col-xl-3">
      <div class="row">
        <div class="col-12">
          <div class="box-content"></div>
        </div>
        <div class="col-12">
          <div class="box-content"></div>
        </div>
        <div class="col-12">
          <div class="box-content"></div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 3

您可以通过以下方式纯粹使用flex-box 创建它。但我建议您使用css grid 进行二维布局。

代码：

.container {
  display: flex;
}

.container div {
  border: 1px solid #e1e1e1;
  margin: 4px;
  text-align: center;
}

.main {
  flex: 4;
}

.sidebar {
  flex: 1;
}

.abc {
  display: flex;
}

.abc div {
  flex: 1;
}

@media screen and (max-width: 980px) {
  .container {
    flex-direction: column;
  }
  
  .sidebar {
    display: flex;
  }

  .sidebar div {
    flex: 1;
  }
}

<div class="container">
    <div class="main">
      <div>1</div>

      <div class="abc">
        <div>2</div>
        <div>3</div>
        <div>4</div>
      </div>
    </div>
    
    <div class="sidebar">
      <div>5</div>
      <div>6</div>
      <div>7</div>
    </div>
  </div>

CSS 网格示例：

https://gridbyexample.com

http://cssgrid.io/

Answer 4

如你所愿。

.demo{
        background: #000;
        height: 200px;
        border: 2px solid red;
        margin: 15px 0;
    }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    
    <body>
<div class="container-fluid">    
<div class="row">
<div class="col-lg-8 col-md-12">
<div class="row">    
<div class="col-md-12">
<div class="demo"></div>
</div>    
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>     
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>     
<div class="col-md-4 col-sm-4">
<div class="demo"></div>
</div>     
</div>
</div>    
<div class="col-lg-4 col-md-12">
<div class="row">    
<div class="col-md-12">
<div class="demo"></div>
</div>    
<div class="col-md-12">
<div class="demo"></div>
</div> 
<div class="col-md-12">
<div class="demo"></div>
</div> 
</div>
</div>    
</div>    
</div>
</body>