美文网首页
flex布局实例(一):一个元素

flex布局实例(一):一个元素

作者: 李悦之 | 来源:发表于2017-05-14 16:58 被阅读100次

    代码:

    .parent{
          display:flex;
          justify-content:flex-start;
          align-items:flex-start;
        }
    

    默认左右横向排列,效果:

    屏幕快照 2017-05-14 下午4.23.31.png

    代码:

    .parent{
          display:flex;
          justify-content:center;
        }
    

    主轴方向居中,效果:

    屏幕快照 2017-05-14 下午4.25.38.png

    代码:

    .parent{
          display:flex;
          justify-content:flex-end;
        }
    

    主轴方向靠右排列,效果:

    屏幕快照 2017-05-14 下午4.28.49.png

    代码:

    .parent{
          display:flex;
          align-items:center;
        }
    

    侧轴居中效果:


    屏幕快照 2017-05-14 下午4.30.45.png

    代码:

    .parent{
          display:flex;
          align-items:flex-end;
        }
    

    侧轴排列至最后:

    屏幕快照 2017-05-14 下午4.32.43.png

    代码:

    .parent{
          display:flex;
          justify-content:center;
          align-items:center;
        }
    

    主轴和侧轴居中效果:

    屏幕快照 2017-05-14 下午4.34.58.png

    代码:
    .parent{
    display:flex;
    justify-content:center;
    align-items:flex-end;
    }
    主轴居中,侧轴最后效果:

    屏幕快照 2017-05-14 下午4.38.57.png

    代码:

    .parent{
          display:flex;
          justify-content:flex-end;
          align-items:flex-end;
        }
    

    主轴和侧轴都靠后效果:

    屏幕快照 2017-05-14 下午4.41.04.png

    相关文章

      网友评论

          本文标题:flex布局实例(一):一个元素

          本文链接:https://www.haomeiwen.com/subject/djpqxxtx.html