初學flex，記錄一下flex實現無敵居中（水平垂直居中），實現某個div內部的元素水平垂直居中（樣式寫在該div上）
display
: flex;
flex-direction
: column; //主軸的方向，如果內部只有乙個元素，那麼這個值可以任意取（預設為row）
align-items
: center; //定義專案在交叉軸上如何對齊
justify-content
: center;//定義專案在主軸上的如何對齊
align-items:定義專案在交叉軸上如何對齊
justify-content:定義專案在主軸上的如何對齊
為什麼說內部只有乙個元素時flex-direction可以任意取呢，因為當主軸在水平方向上時，justify-content: center實現水平居中，align-items實現垂直居中，反過來當主軸在豎直方向上時，justify-content: center實現的是豎直居中，而align-items實現水平居中，所以不論如何都是實現了完全居中。所以，align-items和justify-content完全可以通過主軸方向的變化來實現作用交換。
順便記錄屬性的取值範圍：
align-items：
flex-start：交叉軸的起點對齊。
flex-end：交叉軸的終點對齊。
center：居中
baseline: 專案的第一行文字的基線對齊。（不管內部元素高度多高，都按照第一行文字對齊）
stretch（預設值）：如果專案未設定高度或設為auto，將佔滿整個容器的高度。
justify-content:
flex-start（預設值）：左對齊
flex-end：右對齊
center： 居中
space-between：兩端對齊，專案之間的間隔都相等。
space-around：每個專案兩側的間隔相等。所以，專案之間的間隔比專案與邊框的間隔大一倍。
flex布局水平垂直居中
作為乙個來自逆戰班的前端 小學生 今天給大家講解下我對flex布局水平垂直居中的理解。首先，我們需要了解什麼是flex布局，flex布局通常被稱為 flexbox，是一種一維的布局模型。它給 flexbox 的子元素之間提供了強大的空間分布和對齊能力。flex布局決定主軸方向上子項的對齊和分布方式的...
Flex 4 控制項居中問題
絕對布局，預設就是絕對布局，可以不設定 設定panel的verticalcenter 0 horizontalcenter 0 verticalcenter 0 horizontalcenter 0 title hello test cornerradius 5 在flex3中布局直接是 layou...
盒子水平垂直居中之 flex
父親 align items 在交叉軸上的如何對齊 flex start flex end center baseline stretch align content屬性定義了多根軸線的對齊方式。如果專案只有一根軸線，該屬性不起作用。boxfelx 1 代表3項 flex grow 它指定了flex...