flex布局学习1

1. flex的item之间默认没有间隔

2. flex-grow属性

   2.1 flex布局默认不修改元素的宽度

   2.2 弹性布局默认左对齐

   当有两个元素进行弹性布局时，如果我们希望另一个占据剩余父元素的所有宽度时，可以设置这个元素的flex-grow属性为1

   flex-grow属性默认为0，即保持默认宽度，当设置为1时，表示该项目宽度拉伸，占据该行剩余所有宽度

   	input {
   	flex-grow: 1;
   	}
   

3. align-self属性和align-items属性

   3.1 弹性布局默认修改元素的高度，如果项目没有显式指定高度，就将占据元素的所有高度

   3.2 align-self可以改变这种特性

   	input {
   	flex-grow: 1;
   	align-self: center;
   	}
   

   align-self属性可以取四个值：

   • flex-start: 顶边对齐，高度不拉伸

   • flex-end: 底边对齐，高度不拉伸

   • center: 居中，高度不拉伸

   • stretch: 默认值，高度自动拉伸

   3.3 如果项目很多，一个个设置align-self属性就很麻烦。这时可以在容器元素，设置align-items属性，它的值被所有子元素的align-self属性所继承

   	form {
   	display: flex;
   	align-items: center;
   	}
   

   在容器元素上设置了align-items属性，就可以不用在子元素上设置align-self属性，除非两者不一致