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