1
我想使用媒體查詢在id =「articles」中重新排列我的3列測試。我想移動它們，使它們垂直而不是水平。我試過使用flexbox，但它不能解決我的問題。你知道是否有可能用flexbox做到這一點？如果不是，我該怎麼做？如何使用Flexbox重新對齊媒體查詢中的項目？
@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;
}<head>
<meta charset="utf-8" />
<title>CV de Jules Raymond</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="bloc_page">
<header>
<div id="titre">
<h1>Jules Raymond</h1>
<div>
<a href="moi.jpeg"> <img src="moi_mini.jpg" alt="Une photo de Jules Raymond" title="Cliquez pour agrandir" /></a>
</div>
</div>
<h3>Etudiant à l'université de Californie-Berkeley</h3>
</header>
<section>
<aside></aside>
<div id="articles">
<div id="experience">
<h3>Mon experience</h3>
<ul>
<li>De 1992 à 2004: naissance et école primaire</li>
<li>De 2004 à 2010: école secondaire (high scool)</li>
<li>De 2010 jusqu'à présent: étudiant universitaire</li>
</ul>
</div>
<div id="competences">
<h3>Mes competances</h3>
<ol>
<li>HTML & CSS (en procès)</li>
<li>PHP & MySql (avancé)</li>
<li>C (expert)</li>
</ol>
</div>
<div id="formation">
<h3>Ma formation</h3>
<ul>
<li>J'ai appris sur <a href="http://openclassrooms.com/" title="Cliquez pour découvrir!">OpenClassroom</a>.</li>
<li>J'ai posé mes questions sur <a href="http://stackoverflow.com/" title="Cliquez pour découvrir encore!">StackOverFlow</a>.</li>
</ul>
</div>
</div>
</section>
</div>
</body>
</html>