Flex Box Items 响应式但向右对齐

Question

我正在尝试在响应式布局中使用弹性框。对于大屏幕尺寸，我已经能够使用 flex。但是对于小屏幕尺寸，在不改变布局的情况下，我想要这样。 1) 第 4 块在最左边 2) Block 2 在 Block 4 的右边 3) Block 3 和 Block 4 在 Block 2 下方对齐。这样 Block 4 下方没有任何东西。

我的标记是这样的：

<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;
}

Answer 1

您可以将CSS-Grid 用于狭窄的视口。我用line-based placement 来定位你的盒子。

我不确定你想把盒子放在哪里。所以这里是一个任意定位的代码示例：

.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>

Answer 2

首先，从 html 中删除您的样式代码并将它们放入 css 文件中。这是出于使用 css 文件目的和更清洁的 html 文件的原因。

回到你的问题

在内部 CSS 中严格使用 @media query 进行布局，以平滑地从大屏幕调整到小屏幕，反之亦然。

通过移动优先哲学设计开始您的代码，然后为@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.