<div class="flex-container"> <div class="flex-item1">flex item 1</div> <div class="flex-item2">flex item 2</div> <div class="flex-item3">flex item 3</div> </div> <button id="flex-start" class="btn btn-default">flex-start</button> <button id="flex-end" class="btn btn-default">flex-end</button> <button id="center" class="btn btn-default">center</button> <button id="baseline" class="btn btn-default">baseline</button> <button id="stretch" class="btn btn-default">stretch</button>
.flex-container { display: -webkit-flex; display: flex; justify-content: center; width:100%; height: 250px; background-color: white; border: 1px solid #ddd; margin-bottom:20px; } .flex-item1 { background-color: DeepSkyBlue; width: 100px; margin: 5px; font-size:2em; } .flex-item2 { background-color: pink; width: 150px; margin: 5px; } .flex-item3 { background-color: green; width: 250px; margin: 5px; line-height:5em; }
var container = $(".flex-container"); $(document).on('click','button',function(){ var id = $(this).attr('id'); container.css('align-items',id); });