弹性布局

移动布局
设备: 手机 & ipad
系统: 安卓 & ios
内置: 安卓系统的内置浏览器是谷歌 ios内置safari浏览器 他们的内核都是webkit 不考虑兼容性,需要考虑的是安卓和ios的区别

弹性布局

   *分两部分 分别是弹性父级 弹性子元素
   *给父级设置display: flex; 或者 display: inline-flex;
    1.flex-direction: row | row-reverse | column | column-reverse;
    *属性指定了弹性子元素在父容器中的位置


       row: 横向从左到右

      

      row-reverse: 反转横向排列

      

      column: 纵向排列

      

      column-reverse: 反转纵向排列

      

 

    2.justify-content: flex-start | flex-end | center | space-between | space-around;
    *内容对齐属性应用在弹性容器上,把弹性项沿着弹性容器的主轴线(main axis)对齐


      flex-start: 弹性项目向行头紧挨着填充。这个是默认值

      

      flex-end: 弹性项目向行尾紧挨着填充

        

      center: 弹性项目居中紧挨着填充

       

      space-between: 弹性项目平均分布在该行上

        

      space-around: 弹性项目平均分布在该行上,两边留有一半的间隔空间

      

原文地址:https://www.cnblogs.com/lijieqiqi/p/qiqiyidong.html