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

Question

我正在使用Bootstrap Flex-Box的项目中工作。 我已将链接附加到正在使用的布局上。 在除PC以外的其他设备上使用时，我需要将右侧的列向下更改。

这就是我想要的

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

Answer 1

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

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

检查以下代码段 ：

 .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 Grid示例：

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>