LOG4420: Question 5 de l'intra 2012 en boites flexibles

Je me suis amusé à réécrire la solution de la question 5 de l'intra 2012 en boîtes flexibles. Remarquez comme il est facile de centrer un item. Je me suis aussi amusé à modifier l'ordre des boîtes, plutôt que de déplacer l'image.

<!doctype html>
<html>
<head>
<meta charset="utf8">
<link rel="stylesheet" href="styleQuestion5flex.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="monscriptQuestion5.js"></script>
</head>
<body>
<div class="boite contientImage"><img src="logoPoly.png"></div>
<div class="boite"></div>
<div class="boite"></div>
</body>
</html>

.flexible {
    display: flex;
    flex-direction: row;
}
.boite {
    align-items: center;
    justify-content: center;
    flex-basis: 150px;
    display: flex;
    flex-direction: row;
    border: solid 1px;
    height: 150px;
}
img {
    width: 50px;
    height: 50px;
}
.contientImage {
    background-color: red;
}



$(document).ready(function(){
     var i = 0;

     // On attribue un ordre initial aux boîtes
     $('.boite').each(function(){
	 $(this).css('order',i.toString());
	 i++;
     });
    
     $('.boite').click(function(){
	 var positionActuelle =  $('.boite.contientImage').css('order');
         var positionNouvelle =  $(this).css('order');
         $(this).css('order',positionActuelle);
         $('.boite.contientImage').css('order',positionNouvelle);
        });
    });