flex弹性盒模型

flex属性

 #box1 {
            background-color:yellow;
            height:100px;
            display: flex;
            justify-content: space-between;
        }
        #box1 p {
            width: 200px;
        }
        #box2 {
            background-color: gray;
        }
        #box3 {
            background-color: green;
        }
        #box4 {
            background-color: hotpink;
        }

   <div id="box1">
      <p id="box2">1</p>
      <p id="box3">2</p>
      <p id="box4">3</p>
   </div>

上面代码：
三个元素设置大小及背景色，在父容器中添加flex。

• display:flex属性可以把块级元素在一排显示
• flex需要添加在父元素上，改变子元素的排列顺序
• 默认为从左往右依次排列，且和父元素左边没有间隙
  

横轴排列方式

• justify-content:flex-start
  交叉轴的七点对齐
  
• flex-end
  右对齐
  
• center
  居中
  
• space-between
  两端对齐，项目之间的间隔都相等
  
• space-around
  每个项目两侧的间隔相等，项目之间的间隔比项目与边框的间隔大一倍
  

竖轴排列方式

#box1 {
            background-color:yellow;
            height:500px;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
        }

• align-items:flex-start
  默认值，左对齐
  
• flex-end
  交叉轴的终点对齐
  
• center
  交叉轴的中点对齐
  
• baseline
  项目的第一行文字的基线对齐

.box2 {
        font-size: 30px;
    }

.box3 {
        font-size: 50px;
    }

• stretch
  如果项目未设置高度或设为auto,将占满整个容器的高度(P标签自带样式，没有整个占满，换成div可以占满)

#box1 {
          background-color:yellow;
          height:500px;
          display: flex;
          justify-content: space-between;
          align-items: stretch;
      }
#box1 p {
          width: 200px;
          /*不设置高度*/
        }
#box2 {
          background-color: gray;
      }
#box3 {
          background-color: green;    
      }
#box4 {
          background-color: hotpink;      
      }

给子元素设置flex占比

 #box1 {
          background-color:yellow;
          height:100px;
          display: flex;
          align-items: stretch;
      }
#box1 p {
          width: 200px;
        }
#box2 {
          background-color: gray;
          flex:1;
      }
#box3 {
          background-color: green;
          flex:2;
      }
#box4 {
          background-color: hotpink;
          flex:3;
      }