CODEWITHSUNDEEP
htmlcssflexbox
Doe Jowns
Doe Jowns

Reputation: 302

Why is my flexbox not extending correctly?

I've got a problem : i'm trying to always extend my presentation to the whole page using flexbox, but I can't figure out why it doesn't work.. (see below). I suspect some bug using the columns of lists, but I haven't figure it out. Any idea ? (the columns of lists are in : "colonne_droite" --> "Le reste")

picture of my problem

Here is my 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>

and my 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;
}

Upvotes: 0

Views: 741

Answers (2)

Asons
Asons

Reputation: 87191

As you use display: flex on the body, the general also becomes a flex item, and as such you also need to tell it to fill the width by setting flex-grow: 1 on it (or 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>

Upvotes: 1

Universus
Universus

Reputation: 406

change this css lines

.general
{
    display: flex;
}

into this 

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

Upvotes: 1

Related Questions