我有一個問題:我試圖總是使用flexbox將我的演示文稿擴展到整個頁面,但我無法弄清楚它爲什麼不起作用。(請參見下文)。我懷疑使用列的列的一些錯誤,但我沒有弄明白。任何想法 ? (列表的列是: 「colonne_droite」 - > 「樂reste」)爲什麼我的Flexbox無法正確擴展?
這裏是我的HTML
<!DOCTYPE html>
<html>
<head>
<meta charset = "utf-8">
<link rel="stylesheet" href="CV.css" />
<title> SNOW Jon </title>
</head>
<body>
<div class = "general">
<div class = "colonne_gauche">
</div>
<div class = "colonne_droite">
<header id = "Titre">
<div class = "texte">
<h1 class ="center"> SNOW Jon </h1>
<p class = "center"> "Je sais juste que je ne sais rien" </p>
</div>
<div class = "element_titre">
<a href = "jonsnow.jpg">
<img class = "bordered" src = "minijon.jpg" alt = "Photo de moi" />
</a>
</div>
</header>
<div id = "Le_reste">
<div class = "element">
<h2> Mon expérience </h2>
<p>
<ul>
<li>Roi du <strong> Nord </strong></li>
<li>Chef du <a href = "http://fr.gameofthrones.wikia.com/wiki/Le_Mur">Mur</a></li>
<li>Adepte des grandes actions héroïques</li>
</ul>
</p>
</div>
<div class = "element">
<h2> Mes Compétences </h2>
<p>
<ul>
<li>Très chanceux </strong></li>
<li>Un charisme qui lui permet de pécho la plus belle fille de la série</a></li>
<li>Fin stratège (mdr)</li>
</ul>
</p>
</div>
<div class = "element">
<h2> Ma formation </h2>
<p>
<ul>
<li>Bâtard de Ned </strong></li>
<li>Garde de Nuit</a></li>
<li>Ygritte</li>
</ul>
</p>
</div>
</div>
</div>
</div>
</body>
和我的CSS:
@font-face
{
font-family: 'cac_champagne';
src: url('cac_champagne/cac_champagne-webfont.eot') format('eot'),
url('cac_champagne/cac_champagne-webfont.woff') format('woff'),
url('cac_champagne/cac_champagne-webfont.ttf') format('truetype'),
url('cac_champagne/cac_champagne-webfont.svg') format('svg');
}
h1
{
font-family: 'cac_champagne',Arial,serif;
text-decoration: blink;
}
.center
{
text-align: center;
}
body
{
display: flex;
background: url("cv.jpg") fixed;
color: white;
}
.general
{
display: flex;
}
.bordered
{
border: 2px #BFBFBF groove;
box-shadow: 3px 3px 3px #B3B3B3 ;
}
.colonne_gauche
{
width: 100px;
background-image: url("liseré.jpg");
}
.colonne_droite
{
flex:1;
display: flex;
flex-direction: column;
align-items: justify;
}
#Titre
{
flex: 1;
display: flex;
background: white;
}
.texte
{
margin: auto;
text-align: center;
flex: 1;
}
#Le_reste
{
flex: 1;
display: flex;
justify-content: space-around;
background: yellow;
}
.element
{
flex: 1;
}
您嘗試設置'寬度:100%;你的Flexbox的容器'('.colonne_droite'),也許是'證明,content'屬性設置爲像'空間around' ? – zgood