前言：display:flex?是一種布局方式。它即可以應用于容器中，也可以應用于行內元素。是W3C提出的一種新的方案，可以簡便、完整、響應式地實現各種頁面布局。目前，它已經得到了所有瀏覽器的支持。

?

Flex是Flexible Box的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。設為Flex布局以后，子元素的float、clear和vertical-align屬性將失效。flex的六個屬性①flex-direction?容器內元素的排列方向(默認是橫向排列)

HTML代碼：

css代碼：

效果展示：

(1)flex-direction:row; 沿水平主軸讓元素從左向右排列

(2)flex-direction:column; 讓元素沿垂直主軸從上到下垂直排列

(3)flex-direction:row-reverse;沿水平主軸讓元素從右向左排列

②flex-wrap?容器內元素的換行(默認不換行)(1)flex-wrap: nowrap; (默認)元素不換行,比如：一個div寬度100%，設置此屬性，2個div寬度就自動變成各50%；(2)flex-wrap: wrap; 元素換行,比如：一個div寬度100%，設置此屬性，第二個div就在第二行了；③justify-content?元素在主軸(頁面)上的排列

HTML代碼：

css代碼：

效果展示：

(1)justify-content : center;元素在主軸(頁面)上居中排列

(2)justify-content : flex-start;元素在主軸(頁面)上由左或者上開始排列

(3)justify-content: flex-end;元素在主軸(頁面)上由右或者下開始排列

(4)justify-content : space-between;元素在主軸(頁面)上左右兩端或者上下兩端開始排列

(5)justify-content : space-around;每個元素兩側的間隔相等。所以，元素之間的間隔比元素與邊框的間隔大一倍。

④align-items元素在主軸/頁面當前行的橫軸/縱軸方向上的對齊方式

HTML代碼：

css代碼：

效果展示：

(1)align-items : flex-start; 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸起始邊界(靠上對齊)。

(2)align-items : flex-end; 彈性盒子元素的側軸(縱軸)起始位置的邊界緊靠住該行的側軸結束邊界。(靠下對齊)

(3)align-items : center; 彈性盒子元素在該行的側軸(縱軸)上居中放置。(居中對齊)

(4)align-items : baseline; 如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效，如下圖。其它情況下，該值將參與基線對齊，如右下圖中所示，div1的行高為50px，div2的行高為60px，div3的行高為70px，三個div的文本基線是對其的。(靠上對齊)

⑤align-content?在彈性容器內的元素沒有占用交叉軸上所有可用的空間時對齊容器內的各項(垂直)

?HTML代碼：

css代碼

?效果展示：

(1)align-content: flex-start; 元素位于容器的開頭。各行向彈性盒容器的起始位置堆疊。

?

(2)align-content: flex-end; 元素位于容器的結尾。各行向彈性盒容器的結尾位置堆疊。

?

(3)align-content: stretch; 元素位于容器的中心。各行向彈性盒容器的中間位置堆疊。

?

(4)align-content: center; 默認值。元素被拉伸以適應容器。各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效于'flex-start'。

?

(5)align-content: space-between;元素位于各行之間留有空白的容器內。各行在彈性盒容器中平均分布。

?

(6)align-content: space-around;元素位于各行之前、之間、之后都留有空白的容器內。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負數或彈性盒容器中只有一行，該值等效于"center"。

總結：以上就是今日的技術分享啦！喜歡的話請期待下期內容哦~?

傳一后期精彩活動預告

總結

以上是生活随笔為你收集整理的css不换行属性_前端 | css display:flex 的六个属性你知道吗的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。