码迷,mamicode.com
首页 > 其他好文 > 详细

display flex 弹性布局

时间:2020-03-31 01:05:46      阅读:79      评论:0      收藏:0      [点我收藏+]

标签:play   空间   数组   nbsp   ems   isp   col   水平对齐   ima   

 

 

                  display: flex; 
 
 
                  flex-direction: row;    /*从左到右排序 1 2 3  */
                  flex-direction: row-reverse;  /*从右到左排序 3 2 1  */
                  flex-direction: column;  /*从上到下排序  1 2 3  */
                  flex-direction: column-reverse;  /*从下到上排序 3  2 1*/
 
 
                  flex-wrap: wrap;      /* 换行 */

 

 

 

  justify-content   : 水平对齐方式

技术图片

 

 

 

 

  align-items: ;  垂直对齐方式

技术图片

 

 

--------------------------------------------------------------------------------------------------------- 以上都是父元素中的属性

 

 

--------------------------------------------------------------------------------------------------------- 下面是子元素中用到的属性

 

      order: 数字-   ----------------------------可以用拍排序。 数组越小越靠前
 
      flex-grow ------ 对剩余空间进行分配(只有有剩余空间才可用)
 
技术图片

 

 

技术图片

 

 

 

 flex-shrink: -----------------------------------------按比例压缩, 值 为 0 时, 页面变化不压缩

 

display flex 弹性布局

标签:play   空间   数组   nbsp   ems   isp   col   水平对齐   ima   

原文地址:https://www.cnblogs.com/javascript9527/p/12602458.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!