Using flexbox for layout

Question

I am building a simple site that I have decided to use flexbox for the layout. Generally everything seems to be working fine. However when using flexbox I have to explicitly tell the flexbox items (my divs in this case) a given width. When looking through Guil Hernandez course's he simply uses flex-grow property to make the items spread evenly over the container div.

In my example I have shown below. I have a map and an address that when in horizontal mobile view (bigger than or equal to 480px) it should display the map and address divs next to each other. Which it does but only if I give them both width sizes and not flex grow properties. Is this fine?

Also another issue is when I turn into vertical mobile view when checking on google developer tools, on some devices (namely iphone 4) the address div does not match up with the header, is there a way around this, as I keep trying padding-right margin-right and seem to be getting the same result.

Here is my responsive css

@media screen and (min-width: 480px){
  /************************
  TWO COLUMN LAYOUT
  ************************/
    #flex-container{
        flex-direction: row;
        flex-wrap:wrap;
        justify-content: space-between;
    }
    .news-image{
        width:40%;
        margin: 2.5%;
    }
    .para{
        width:50%;
        margin-right:2.5%;
        margin-top:-10px;

    }
    .innerbox #toby-image{
        width:50%;
        margin:2.5%;
    }


    #map-container{
        width:40%;
        margin-left:3.0%;
    }

    .contact{
        width:40%;
        margin-left:30px;
        margin-right:30px;
        margin-top: -18px;
        padding-left: 0;
    }

}

Here is the html for it (twig file) the flex-container div wraps the {% block content %} in the main.twig file

{% extends 'main.twig' %}
{% set active_page = 'contact' %}

{% block title %}Contact Us{% endblock %}

{% block heading %}Contact Us{% endblock %}

{% block content %}
            <div id="map-container">
                <div id="map"></div>
            </div>
            <div class="contact">
                <h3>Contact Info</h3>

                <ul class="contact-info">
                    <li class="phone"><a href="tel:07340334933">07340334933</a></li>
                    <li class="email"><a href="mailto:toby@decorum.net">toby@decorum.net</a></li>
                    <li class="address">
                        <a href="/contact-us">
                            <p>Masionette Hurlingham</p>
                            <p>360 Wandsworth Bridge Road</p>
                            <p>Fulham</p>
                            <p>London</p>
                            <p>SW6 2TZ</p>
                            <p>England</p>
                        </a>
                    </li>

                </ul>
            </div>

<script>
    function initMap(){
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
            center: {lat :44.540, lng: -78.546},
            zoom: 8

        });


    }

</script>
{% endblock %}

and if you need, this is my main css file

/************************
GENERAL
************************/
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html{
  position:relative;
  min-height: 100%;
}
body{
    font-family: proxima-nova, sans-serif;

}


a {
   text-decoration: none;
}

img{
  max-width: 100%;
}



/*****************************
 * PAGE BACKGROUND
 ****************************/

/*#page-background{
    background: linear-gradient(#fff,transparent 20%),
        linear-gradient(0deg, #fff,transparent),
        #fff url('../img/main-background.jpg') no-repeat center;
    background-size: cover;
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
}*/

#page-background{
    display:none;
}

/*******************************
INNERBOX
*******************************/

.innerbox{
    position:absolute;
    width:100%;
}

.innerbox h1{
    text-align:center;
    padding-right:10px;
}

#flex-container{
    display:flex;
    flex-direction:column;
}

.para p{
    margin: 0 auto;
    display: block;
    padding: 20px 10px;
}

.news-image{
    margin: 0 auto;
}

/*****************************
 * ABOUT US PAGE (INNERBOX)
 ****************************/

.innerbox #toby-image img{
    margin: 0 auto;
    display: block;
}


/*************************
 * CONTACT PAGE (INNERBOX)
 * **********************/

#map{
    position: relative;
    padding-bottom: 75%;
    height: 0;
    overflow:hidden;
}

/* Your styles for the iframe */
#map iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.contact{
    width:90%;
    margin: 0 auto;
    padding-left:100px;
}

.contact-info{
    list-style: none;
    padding:0;
    margin:0;
    font-size: 0.9em;
}

.contact-info a{
    display:block;
    min-height: 20px;
    background-repeat: no-repeat;
    background-size: 16px 16px;
    padding: 0 0 0 30px;
    margin: 0 0 10px;
}

.contact-info li.phone a {
    background-image: url('../img/phone-46-16.png');
}

.contact-info li.email a {
    background-image: url('../img/email-16.png');
}

.contact-info li.address a {
    background-image: url('../img/home-4-16.png');
}

.contact-info li.address p{
    padding: 0;
    margin: 0 !important;
}

/********************************
 * COLOURS
 * *****************************/

a{
    color: #6ab47b;
}

a:hover{

Answer 1 · 2016-05-06T12:32:12Z

May 6, 2016 12:32pm

Hi,

Do you have this site in a workspace ? or possibly somewhere I can see a working version?

Craig :)

Welcome to the Treehouse Community

Looking to learn something new?

Mayur Pande

Mayur Pande

Using flexbox for layout

1 Answer

Craig Watson

Craig Watson

Mayur Pande

Mayur Pande

Craig Watson

Craig Watson

Mayur Pande

Mayur Pande

Mayur Pande

Mayur Pande