flex 常用布局

1. 水平垂直居中布局

.main{
    width: 400px;
    height: 400px;
    border: 1px solid #CCC;
    display: flex; /*父元素设置flex属性*/
    justify-content: center; /*水平主轴居中*/
    align-items: center; /*垂直交叉轴居中*/
}
.content{
    width: 100px;
    height: 50px;
    background: pink;
}

2. 左边固定，右边自适应

    
左对齐/右对齐/居中对齐/平分空间/两端对齐
    
 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐 左对齐/右对齐/居中对齐/平分空间/两端对齐

 自适应不换行

  .main {
       display: flex;
   }
   .main .content1 {
       flex: 0 0 300px;
       margin-right: 30px;
   }

自适应换行

  .main {
       display: flex;
       flex-wrap: wrap;
   }
   .main .content1 {
       flex: 0 0 300px;
       margin-right: 30px;
   }
   .main .content2 {
       flex: 1 0 0;
   }

flex 布局总结

开始flex布局

display:flex;

横向

justify-content:flex-start/flex-end/center/space-evenly/space-between;

左对齐/右对齐/居中对齐/平分空间/两端对齐

space-around 跟space-evenly类似，但是左右两边的留白为平分空间的 1/2.

竖向

align-item:flex-start/flex-end/center;

靠上左对齐/靠下对齐/居中对齐

改变轴模式

flex-direction:column;

调整块的宽度

flex:1; flex:2;flex:1;