Detailed explanation of the conflict between flex layout and position:absolute/fixed

I encountered this problem before when developing a project, the conflict between flex layout and position:absolute/fixed. Later I thought of a solution, and today I will share it with you:

Project Practice:

We now want to make a navigation bar at the top, and want to use fixed to fix it at the top, and want to use flexible box layout to set its internal style, but we find that the flexible box layout has failed.

The HTML code is as follows:

<ul>
    <li>About the Association</li>
    <li>Association Charter</li>
    <li>Association Structure</li>
    <li>Downloads</li>
</ul>

The CSS code is as follows:

ul {
	position: fixed;
  	display: flex;
    justify-content: space-between;
    margin: 0 15px;
    background: pink;
}
li {
    flex: 1;
    list-style: none;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    border: 1px solid #fff;
}

The effect is as follows:

We can find that the flexible box layout has failed, so how do we solve this problem?
It’s actually very simple. You just need to put another box outside the ul. The outer box is then positioned and the inner box is laid out normally using flexbox.

The HTML code after the change is:

<div class="nav-box">    
    <ul>
        <li>About the Association</li>
        <li>Association Charter</li>
        <li>Association Structure</li>
        <li>Downloads</li>
    </ul>
</div>

The CSS code after the change is:

.nav-box {
    width: 100%;
    position: fixed; 
}
ul {
    display: flex;
    justify-content: space-between;
    margin: 0 15px;
    background: pink;
}
li {
    flex: 1;
    list-style: none;
    height: 100px;
    line-height: 100px;
    text-align: center;
    font-size: 30px;
    border: 1px solid #fff;
}

At this time we found that the problem has been solved!

This is the end of this article on the conflict between flex layout and position:absolute/fixed. For more information about the conflict between flex and position:absolute/fixed, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!