Flex布局--子项常见属性

╰+哭是因爲堅強的太久メ 2023-01-01 01:50 180阅读 0赞

## 1、flex:子项目占的份数 ##

定义子项目分配剩余空间，默认值为0

section{ 
    		width: 60%;
    		height: 150px;
    		background-color: pink;
    		margin: 0 auto;
    		display: flex;
    	}
    section .item1{ 
    		width: 100px;
    		height: 100px;
    		background-color: orange;
       }
    section .item2{ 
    		flex: 1;
    		background-color: reenyellow;
      }
    section .item3{ 
    		width: 100px;
    		height: 100px;
    		background-color: plum;
      }

效果如图  
![在这里插入图片描述][20201230153834430.PNG_pic_center]  
这也称为圣杯布局。

## 2、align-self:控制子项自己在侧轴上的排列方式 ##

align-self: flex-end;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]  
3、order:定义项目的排列顺序。数值越小，排列越靠前，默认为0。

order: -1;

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]

[20201230153834430.PNG_pic_center]: /images/20221120/f18552eab58244b086049cc923c87573.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/9c2bf029ea79497e9b081ea7febf7152.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2hhbnJhYmJpdA_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20221120/d1ff54b46abf4488ab7d6e0879ba020b.png