Question

我想在id =＆＃34;文章＆＃34;中重新排列我的3列测试。使用媒体查询。我想移动它们，使它们垂直而不是水平。我尝试过使用flexbox，但它并没有解决我的问题。你知道是否可以用flexbox做到这一点？如果没有，我怎么能这样做？

＆＃13;

SlurmUser

＆＃13;

@font-face {
  font-family: 'kinder';
  src: url('kindergarten.ttf');
}

@media all and (max-width: 1024px) {
  aside {
    display: none;
  }
  #articles {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
}


/* Eléments principaux de la page */

body {
  background: url('back.jpg');
  font-family: 'kinder', Arial, sans-serif;
  color: #181818;
}

#bloc_page {
  width: 100%;
  margin: auto;
}


/* Header */

header {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

#titre {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
}

#titre div {
  position: absolute;
  right: 40px;
  top: 25px;
}


/* Body */

aside {
  position: absolute;
  width: 5%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: url(ban.jpg);
  border-radius: 4px;
  border: 1px solid red;
}

section {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
}

#articles {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

#articles h3 {
  text-transform: uppercase;
  color: red;
}

＆＃13;

Answer 1

您的代码一切正常。除了一个主要错误 - 媒体查询应始终写入 AFTER 您的代码。

您现在的代码：

@media query;
CSS;

为了使其发挥作用应该是什么样的：

CSS;
@media query;

媒体查询是告诉浏览器的方式 - 到目前为止这是我的CSS，当网站以*宽度显示时，请将这些新样式应用于它。这是级联样式表背后的基本思想。

如何使用Flexbox重新调整媒体查询中的项目？

1 个答案: