css 弹性布局

弹性布局

语法：display:flex;【块级元素】 display：inline-flex；【行内元素】

flex-direction   row【水平垂直方向】

 

//  row  默认效果【从左到右排序】

 

 

//  row-reverse  改变方向【从右到左排序】

flex-direction   column【垂直方向】

 

 //  column  默认效果【从上到下排序】

 

 

 //  column-reverse  改变方向【从下到上排序】

flex-wrap    wrap【换行】

  //  nowrap  默认格式【不换行】

   //  wrap  换行【第一行在上方】

 

   // wrap-reverse  换行【第一行在下方】

 justify-content 【垂直对齐方式】

 

   //   flex-start  默认对齐效果 【左对齐】

 //   flex-end  对齐效果 【右对齐】

 

  //   center 对齐效果 【垂直居中对齐】

 

  //   space-between   对齐效果 【两端对齐】

 

 //   space-around   对齐效果 【两端间隔比较小 元素中间间隔比较大】 

 

 //   space-evenly  对齐效果 【两端间隔比较大 元素中间间隔比较小】 

  align-items 【水平对齐方式】

 

 // flex-start  默认对齐效果 【水平向上对齐】

 

  // center  对齐效果 【水平居中】

   // flex-end  对齐效果 【水平向下对齐】

 

 

// stretch 默认值 【会撑满这个高度  前提父级高度设置为 auto；】