Flexbox zum Ausrichten von Inhalten in der Fußzeile?

Question

Okay, ich habe versucht, den Inhalt in meiner Fußzeile so auszurichten, dass er sich gleichmäßig auf der Haupt- und der Hauptachse befindet.

• Alle drei divs müssen in der Fußzeile gestaffelt werden um sie gleich viel Raum haben, und das Zentrum div dh rot div der anderen divs 2x Verhältnis sein muss (Wie zur Zeit ist, mit Ausnahme nicht voneinander out)
• die Höhe aller divs sollte die gleiche wie rot div sein.Hinweis:, dass die grüne div ist kleiner ist Höhe und die orange div ist größer.

---

das ist, was die Fußzeile wie folgt aussieht: http://imgur.com/a/hENE6

wird Irgendwelche Ideen geschätzt.

Answer 1

Siehe unten.

footer { 
 
background: blue; 
 
width: 100%; 
 
display: flex; 
 
justify-content: space-around; 
 
align-items: center; 
 
padding: 2em; 
 
} 
 
.green { 
 
background: green; 
 
width: 20%; 
 
} 
 
.red { 
 
background: red; 
 
width: 40%; 
 
} 
 
.orange { 
 
background: orange; 
 
width: 20% 
 
};

<footer> 
 
<div class="green">Text</div> 
 
<div class="red">Text</div> 
 
<div class="orange">Text</div> 
 
</footer>

Answer 2

auf das Bild Suchen Sie gemeinsam, habe ich diese Geige erstellt Flexbox mit https://jsfiddle.net/1r39tfc9/1/

die Höhe Ihrer Fußzeile Passen Sie Ihre Bedürfnisse nach. Hoffe das hilft.

<style> 
    footer { 
     display: -webkit-flex; 
     display: flex; 
     flex-direction: row; 
     background-color: lightgrey; 
     -webkit-align-items: stretch; 
     align-items: stretch; 
     height:200px; 
    } 

    .box { 
     padding: 20px; 
     text-align:center; 
    } 
    .green { 
     background: green; 
     flex:1; 
    } 
    .red { 
     background: red; 
     flex:2; 
    } 
    .orange { 
     background: orange; 
     flex:2; 
    } 
</style> 

    <footer> 
     <div class="box green"> 
     Green 
     </div> 
     <div class="box red"> 
     Red 
     </div> 
     <div class="box orange"> 
     Orange 
     </div> 
    </footer>