常用的幾種布局方式---Flex 布局(垂直居中展示）

• 前言
• 一、默認使用靜態布局
• 二、flex布局
• • 1.父元素container
  • 1.1.display:flex
  • 1.2.flex-direction屬性
  • 1.3.主軸與側軸
  • 1.4.justify-content屬性
  • 1.5.align-items屬性
  • 1.6.flex-wrap屬性
  • 2.子元素items

---

前言

怎樣讓一個元素在垂直或者水平方向居中顯示，可以使用css解決，但是會出現不同瀏覽器的兼容性問題，而flex布局解決了一個父容器和多個子元素的布局問題，從而靈活布局。

一、默認使用靜態布局

代碼展示

二、flex布局

1.父元素container

1.1.display:flex

在父標簽加入display:flex后

.wrap{ height:800px; border:28px solid antiquewhite; display:flex; }

垂直布局變成水平布局，如下圖所示

1.2.flex-direction屬性

在父標簽中修改

.wrap{ height:800px; border:28px solid antiquewhite; display:flex; flex-direction:column; }

后又變成垂直布局

1.3.主軸與側軸

先介紹下主軸和交叉軸概念，有些屬性只針對主軸生效，部分對交叉軸生效

1.4.justify-content屬性

justify-content用來設置主軸方向上的子元素排列的方式，屬性為center時意味居中顯示

.wrap{ height:800px; border:28px solid antiquewhite; display:flex; justify-content:center; }

又變成水平居中顯示：

更改justify-content屬性值，justify-content：flex-start后，從起始側開始排列：

justify-content：flex-end后，排列在尾部：

想均勻分割子元素的空間距離，可使用justify-content：space-between;

justify-content：space-around;

justify-content：space-evenly;

.wrap{ height:800px; border:28px solid antiquewhite; display:flex; flex-direction:column; justify-content:center; }

注意，此時因為flex-direction:column變成了垂直展示，但是此時垂直方向（從上到下）為主軸，水平方向（自左向右）為交叉軸
修改后變成垂直方向居中顯示：

1.5.align-items屬性

align-items:center用來設置交叉軸方向上的子元素排列的方式，屬性為center時意味居中顯示

.wrap{ height:800px; border:28px solid antiquewhite; display:flex; flex-direction:column; justify-content:center; align-items:center; }

后使交叉軸方向居中顯示：

1.6.flex-wrap屬性

當網頁縮小到頁面不足以容納元素的排列，使盒子中的元素壓縮，失去原來的形狀，希望能換行展示，則使用
flex-wrap：wrap;

2.子元素items

第二個盒子不設定寬度，則盒子寬度就為內容本身寬度

代碼展示

此時修改代碼：

.box-2{ background:darkcyan; flex-grow:1; }

代碼展示

更為詳細的可以看看阮一峰老師的
Flex 布局教程：語法篇

Flex 布局教程：實例篇（實現骰子的布局）

總結

以上是生活随笔為你收集整理的常用的几种布局方式---Flex 布局(垂直居中展示）的全部內容，希望文章能夠幫你解決所遇到的問題。

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