为什么我的Flexbox无法正确扩展？

我有一个问题：我试图总是使用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; 
}

来源

2017-09-01 Doe Jowns

您尝试设置'宽度：100％;你的Flexbox的容器'（'.colonne_droite'），也许是'证明，content'属性设置为像'空间around' ？ – zgood

改变这个CSS行

.general 
{ 
    display: flex; 
}

这个

.general 
{ 
    display: flex; 
    width :100%; 
}

来源

2017-09-01 15:15:52 Universus

当你在body使用display: flex，在general也成为柔性项目，因此你还需要告诉它通过设置在它flex-grow: 1（或flex-basis: 100%），以填补宽度。

@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 { 
 
    flex-grow: 1;    /* added property */ 
 
    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; 
 
}

<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 </li> 
 
      <li>Un charisme qui lui permet de pécho la plus belle fille de la série</li> 
 
      <li>Fin stratège (mdr)</li> 
 
      </ul> 
 
     </p> 
 
     </div> 
 
     <div class="element"> 
 
     <h2> Ma formation </h2> 
 
     <p> 
 
      <ul> 
 
      <li>Bâtard de Ned </li> 
 
      <li>Garde de Nuit</li> 
 
      <li>Ygritte</li> 
 
      </ul> 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-09-01 15:16:08 LGSon

为什么我的Flexbox无法正确扩展？

回答

相关问题