justify-content

CSS justify-content 屬性定義了瀏覽器如何分配順著父容器主軸的彈性元素之間及其周圍的空間。

• start
  從行首開始排列。每行第一個(gè)元素與行首對(duì)齊，同時(shí)所有后續(xù)的元素與前一個(gè)對(duì)齊。
• flex-start
  從行首開始排列。每行第一個(gè)彈性元素與行首對(duì)齊，同時(shí)所有后續(xù)的彈性元素與前一個(gè)對(duì)齊。
• flex-end
  從行尾開始排列。每行最后一個(gè)彈性元素與行尾對(duì)齊，其他元素將與后一個(gè)對(duì)齊。
• center
  伸縮元素向每行中點(diǎn)排列。每行第一個(gè)元素到行首的距離將與每行最后一個(gè)元素到行尾的距離相同。
• left
  伸縮元素一個(gè)挨一個(gè)在對(duì)齊容器得左邊緣，如果屬性的軸與內(nèi)聯(lián)軸不平行，則left的行為類似于

align-items

CSS align-items屬性將所有直接子節(jié)點(diǎn)上的align-self值設(shè)置為一個(gè)組。 align-self屬性設(shè)置項(xiàng)目在其包含塊中的對(duì)齊方式。

• normal
  The effect of this keyword is dependent of the layout mode we are in:

• In absolutely-positioned layouts, the keyword behaves like start on replaced absolutely-positioned boxes, and as stretch on all other absolutely-positioned boxes.
• In static position of absolutely-positioned layouts, the keyword behaves as stretch.
• For flex items, the keyword behaves as stretch.
• For grid items, this keyword leads to a behavior similar to the one of stretch, except for boxes with an aspect ratio or an intrinsic sizes where it behaves like start.
• The property doesn't apply to block-level boxes, and to table cells.

• flex-start
  元素向側(cè)軸起點(diǎn)對(duì)齊。
• flex-end
  元素向側(cè)軸終點(diǎn)對(duì)齊。
• start
  The item is packed flush to each other toward the start edge of the alignment container in the appropriate axis.
• end
  The item is packed flush to each other toward the end edge of the alignment container in the appropriate axis.
• center
  元素在側(cè)軸居中。如果元素在側(cè)軸上的高度高于其容器，那么在兩個(gè)方向上溢出距離相同。
• left
  The items are packed flush to each other toward the left edge of the alignment container. If the property’s axis is not parallel with the inline axis, this value behaves like start.
• right
  The items are packed flush to each other toward the right edge of the alignment container in the appropriate axis. If the property’s axis is not parallel with the inline axis, this value behaves like + start.
• self-start
  The items is packed flush to the edge of the alignment container of the start side of the item, in the appropriate axis.
• self-end
  The item is packed flush to the edge of the alignment container of the end side of the item, in the appropriate axis.
• baseline
• first baseline
• last baseline
  所有元素向基線對(duì)齊。側(cè)軸起點(diǎn)到元素基線距離最大的元素將會(huì)于側(cè)軸起點(diǎn)對(duì)齊以確定基線。
• stretch
  彈性元素被在側(cè)軸方向被拉伸到與容器相同的高度或?qū)挾取?/li>
• safe
  If the size of the item overflows the alignment container, the item is instead aligned as if the alignment mode were start.
• unsafe
  Regardless of the relative sizes of the item and alignment container, the given alignment value is honored.

align-content

align-content屬性定義了當(dāng)作為一個(gè)彈性盒子容器的屬性時(shí)，瀏覽器如何在容器的側(cè)軸圍繞彈性盒子項(xiàng)目分配空間。

該屬性對(duì)單行彈性盒子模型無(wú)效。

• flex-start
  所有行從垂直軸起點(diǎn)開始填充。第一行的垂直軸起點(diǎn)邊和容器的垂直軸起點(diǎn)邊對(duì)齊。接下來(lái)的每一行緊跟前一行。
• flex-end
  所有行從垂直軸末尾開始填充。最后一行的垂直軸終點(diǎn)和容器的垂直軸終點(diǎn)對(duì)齊。同時(shí)所有后續(xù)行與前一個(gè)對(duì)齊。
• center
  所有行朝向容器的中心填充。每行互相緊挨，相對(duì)于容器居中對(duì)齊。容器的垂直軸起點(diǎn)邊和第一行的距離相等于容器的垂直軸終點(diǎn)邊和最后一行的距離。