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

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

---

前言

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

一、默認(rèn)使用靜態(tài)布局

代碼展示

二、flex布局

1.父元素container

1.1.display:flex

在父標(biāo)簽加入display:flex后

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

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

1.2.flex-direction屬性

在父標(biāo)簽中修改

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

后又變成垂直布局

1.3.主軸與側(cè)軸

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

1.4.justify-content屬性

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

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

又變成水平居中顯示：

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

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; }

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

1.5.align-items屬性

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

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

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

1.6.flex-wrap屬性

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

2.子元素items

第二個(gè)盒子不設(shè)定寬度，則盒子寬度就為內(nèi)容本身寬度

代碼展示

此時(shí)修改代碼：

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

代碼展示

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

Flex 布局教程：實(shí)例篇（實(shí)現(xiàn)骰子的布局）

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。