Question 173328 in CSS Question posted in
Some basic documentation can be found here.

Css – Flex-grow does not change the state of an element

Why does flex-grow: 1 not work here? I want the elements to share the whole space and there are no spaces between them. They should be navigation buttons to which you can add one if you need one more. If possible please use flex-box, I would like to understand it.

http://jsfiddle.net/vqL95o0s/1/

CSS

header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }


a.button {
    height: 75px;
    display: flex;
    align-items: center;
    flex-grow: 1;
    background-color: black;
}

HTML

        <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>

The boxes stayed in one place at a distance, but did not get any bigger.

Tags:

4

Answers


  1. 0

    You need to set the flex-grow property for the li elements as they are the direct children of the navlist in which you want them to grow.

    header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }

.navlist li{
  flex-grow:1;
}

a.button {
    height: 75px;
    display: flex;
    align-items: center;
    background-color: black;
}
            <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>
    Login or Signup to reply.
  2. 0

    The problem is that, you are applying flex-grow property on "a element". You should apply the flex-grow on the direct child of flexbox that is li items. Here is the updated code:-

    header{
    background-color: #1D3557;
    height: 300px;
    background-repeat: repeat-x;
}

ul.navlist {
    width: auto;
    display: flex;
    justify-content: space-between;

    list-style-type: none;
    align-items: flex-end;
    padding: 0;
  }

ul.navlist > li:nth-child(1){
  flex-grow: 1;
}

a.button {
    height: 75px;
    display: flex;
    align-items: center;
    background-color: black;
}
            <header style="background-image: url('img/headerStripes.png')">
            <img src="img/webdev_logo.png" alt="Logo">
            <ul class="navlist">
                <li><a class="button" href="#">Example 1</a></li>
                <li><a class="button" href="#">Example 2</a></li>
                <li><a class="button" href="#">Example 3</a></li>
                <li><a class="button" href="#">Example 4</a></li>
                <li><a class="button" href="#">Example 5</a></li>
                <li><a class="button active">Example 6</a></li>
            </ul>
        </header>

    Here I applied flex-grow to the first li item.

    Login or Signup to reply.
  3. 0

    You a tag is inside the li element. This one should fill the space :

    li {
    flex:auto;
}

    http://jsfiddle.net/dL7nz9xw/

    And you don’t need the flex-grow: 1;

    https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

    The alignment is done after the lengths and auto margins are applied,
    meaning that, if in a Flexbox layout there is at least one flexible
    element, with flex-grow different from 0, it will have no effect as
    there won’t be any available space.

    Login or Signup to reply.
  4. 0

    Remove the justify-content: space-between on your .navlist (or set it back to normal) and set the flex-grow: 1; on your li elements rather than your anchors. Your a are not flex items because they are not the direct children of your ul. Hope it helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search