flex布局

关于flex布局参考：http://cssreference.parryqiu.com/flexbox/

flex布局中遇到的问题：

（1）、当flex布局的盒子有定位时flex失效。

            如：将两个盒子分别布局到box的最左和最右，并且固定定位

            <div class="box">
                <div class="one">one</div>
                <div class="three">three</div>
            </div>

           <style type="text/css">
              .box{
                 display: flex;

                 position: fixed;
                 justify-content: space-between;//盒子平分box剩下的空间
            }
            .one{
                  background: palegreen;
             }
            .three{
                width: 100px;
                 height: 50px;
                 background: pink;
            }
        </style>

结果如下：

解决办法：给box在加一个父盒子bigbox，然后去掉box的定位，给bigbox加宽度加定位

      <div class="bigbox">
            <div class="box">
                <div class="one">one</div>
                <div class="three">three</div>
            </div>
        </div>

样式：

       .bigbox{
            position: fixed;
            width: 200px;
        }

 

结果：