flex 子元素有時不能充滿整個 flex 容器， 所以我們經常需要告訴 CSS 以什么方式排列 flex 子元素，以及調整它們的間距。 幸運的是，我們可以通過 justify-content 屬性的不同值來實現。 在介紹屬性的可選值之前，我們要先理解一些重要術語。
回憶一下，如果把 flex 容器設為一個行，它的子元素會從左到右逐個排列； 如果把 flex 容器設為一個列，它的子元素會從上到下逐個排列。 子元素排列的方向被稱為 main axis（主軸）。 對於行，主軸水平貫穿每一個項目； 對於列，主軸垂直貫穿每一個項目。
對於如何沿主軸線排放 flex 項目，有幾種選擇。 很常用的一種是 justify-content: center;：即 flex 子元素在 flex 容器中居中排列。 其他選擇包括：
flex-start：從 flex 容器的起始位置開始排列項目。 對行來說是把項目移至左邊， 對於列是把項目移至頂部。 如未設置justify-content的值，那么這就是默認值。flex-end：從 flex 容器的終止位置開始排列項目。 對行來說是把項目移至右邊， 對於列是把項目移至底部。space-between：項目間保留一定間距地沿主軸居中排列。 第一個和最后一個項目被放置在容器邊沿。 例如，在行中第一個項目會緊貼着容器左邊，最后一個項目會緊貼着容器右邊，然后其他項目均勻排布。space-around：與space-between相似，但頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。space-evenly：頭尾兩個項目不會緊貼容器邊緣，所有項目之間的空間均勻排布。