Good day, not so long ago, I began to use flexbox in the layout, and now I ran into such a problem - when I set the fixed positioning to the flex-container, the layout starts to go where it is not clear. What causes this behavior? I admit honestly this question did not google decided to immediately contact here.

    3 answers 3

    It’s probably not a combination of flexbox and position: fixed , but property position: fixed as such - when it is assigned, the block takes up as much space on the width as its content takes, and not all of it is 100%.

    example 1 : position: relative; display: flex; justify-content: space-around; position: relative; display: flex; justify-content: space-around; http://prntscr.com/d48d2s

    example 2 : position: fixed; display: flex; justify-content: space-around; position: fixed; display: flex; justify-content: space-around; http://prntscr.com/d48dyu

      The unit behaves the same without and with fixed positioning.

      Maybe you have something wrong. It is necessary to attach the code.

       * {box-sizing: border-box;} body, html { margin: 0; padding: 0; width: 100%; } .item { width: 5rem; height: 5rem; background: #ccc; margin: .5rem; } .flex { display: flex; flex-flow: row wrap; align-items: center; align-content: center; justify-content: space-between; border: 1px solid #eee; margin: 2rem; } .flex.fixed { position: fixed; left: 0; right: 0; } 
       <div class="flex"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="flex fixed"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div>

        To apply position: fixed; flex container, put all its contents in a wrapper

         <div class="outer"> <div class="anyContainer"> <div class="wrapperInner"> // content </div </div> </div> .outer { display: flex; } .anyContainer { flex: 0 0 300px; } .wrapperInner { position: fixed; top: 0; left: 0; }