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属性，除非二者不一致