1
メディアクエリを使用してid = "articles"に3列のテストを再配置したいと思います。私はそれらが水平にではなく垂直になるように移動したいと思います。私は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>