Question

我遇到了问题：我总是试图使用flexbox将演示文稿扩展到整个页面，但我无法弄清楚它为什么不起作用。（见下文）。我怀疑使用列表列的一些错误，但我还没弄清楚。任何的想法？（列表列在：＆＃34; colonne_droite＆＃34; - ＆gt;＆＃34; Le reste＆＃34;）

这是我的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;
}

Answer 1

更改此css行

.general
{
    display: flex;
}

进入这个

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

Answer 2

当您在display: flex上使用body时，general也会成为弹性项目，因此您还需要通过设置{{1}来告诉它填充宽度在它上面（或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;
}

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

2 个答案: