Flex Box项目响应性但对齐向右
Flex Box项目响应性但对齐向右
提问于 2020-04-06 19:39:08
我试图在一个响应的布局中使用flex框。对于大屏幕尺寸，我已经能够使用flex。但对于小屏幕大小，不改变布局，我想这样做。( 1)第4座位于最左边；2第2座位于第4座的右边；3)第3座和第4座在第2座之下对齐。
我的标记是这样的：
<div id="main">
<div class ="greenbox" style="background-color:lightgreen;">Green BLOCK 1 with more content.</div>
<div class ="bluebox" style="background-color:lightblue;">BLUE BLOCK 2</div>
<div class ="yellowbox" style="background-color:yellow;">yellow BLOCK 3</div>
<div class ="redbox" style="background-color:coral;">BLOCK 4 RED</div>
</div>我对初学者的css是：
#main {
border: 1px solid black;
display: flex;
align-content: flex-start
align-items: center;
}
#main div {
padding: 10px;
}
.redbox {
order: -1;
}回答 2
Stack Overflow用户
回答已采纳
发布于 2020-04-06 20:40:39
您可以使用CSS-网格作为您的窄视口。我用线基布置来定位你的箱子。
我不太清楚你想把你的箱子放在哪里。因此，这里有一个具有任意定位的代码示例：
.box {
box-shadow: inset 0 0 1em rgba(0, 0, 0, 0.4);
padding: 1em;
color: #FFF;
font-family: sans-serif;
}
.box--green {
background-color: #3D9970;
}
.box--blue {
background-color: #0074D9;
}
.box--yellow {
background-color: #FFDC00;
}
.box--red {
background-color: #FF4136;
}
/*
* position your boxes wherever you want in your grid
*/
#main {
display: grid;
grid-template-columns: repeat(4, 1fr); /* 4 columns */
grid-template-rows: repeat(2, 1fr); /* 2 rows */
}
.box--1 {
grid-area: 1 / 1 / 2 / 3;
}
.box--2 {
grid-area: 1 / 3 / 2 / 5;
}
.box--3 {
grid-area: 2 / 3 / 3 / 4;
}
.box--4 {
grid-area: 2 / 4 / 3 / 5;
}
/*
* use flex positioning (and get rid of the grid) on bigger screens
*/
@media screen and (min-width: 960px) {
#main {
border: 1px solid black;
display: flex;
align-content: flex-start;
align-items: center;
}
#main div {
padding: 10px;
}
.redbox {
order: -1;
}
}<main id="main">
<div class="box box--1 box--green">BLOCK 1 - with more content</div>
<div class="box box--2 box--blue">BLOCK 2</div>
<div class="box box--3 box--yellow">BLOCK 3</div>
<div class="box box--4 box--red">BLOCK 4</div>
</main>
Stack Overflow用户
发布于 2020-04-06 20:42:35
首先，也是大多数情况下，从html中删除样式代码，并将它们放在css文件中。这是因为使用css文件的目的和更干净的html文件。
回到你的问题
严格使用@media query在您的内部css布局，以顺利调整大小从大屏幕到小屏幕，反之亦然。
通过移动第一哲学设计开始您的代码，然后选择一个您想要用于这些@media screens的断点，最后为每个“您的屏幕需要”之一应用不同的设计布局。
对于移动第一设计，请使用以下内容：
.block1 {
display: flex;
flex-direction: flex-left;
}
.boxright2 {
display: flex;
flex-direction: flex-right;
}
.block3 .block4 {
display: flex;
flex-direction: row;
Float: clear;
}然后使用下面的代码进行断点，并根据此处提供的视口添加或缩小每个项目的大小：
@media screen and (min-width:768px) {
//your code goes here for tablet
}
@media screen and (min-width: 1024px) {
//your code goes here for larger screen like desktop and laptop
}
P.S. play with them you will figure it out later. 页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/61067658
复制相关文章
相似问题
腾讯云开发者
