CSS3 什麼是彈性盒？ display屬性中flex與box屬性值的差異與用法-css教學-PHP中文網

首頁

web前端

css教學

CSS3 什麼是彈性盒？ display屬性中flex與box屬性值的差異與用法

青灯夜游

Sep 08, 2018 pm 03:42 PM

我們在Web前端網頁的開發與設計過程中，佈局是非常重要的一環。佈局用來決定頁面上不同元件和元素的尺寸和位置。本章我們跟大家介紹的是一種css3佈局模型：彈性盒模型（flex box），讓大家了解在css3中什麼是彈性盒子，以及彈性盒子中display屬性的flex與box屬性值的區別和用法。有一定的參考價值，有需要的朋友可以參考一下，希望對你有幫助。

一：什麼是彈性盒子
CSS3 彈性盒（ Flexible Box 或 flexbox），是一種當頁面需要適應不同的螢幕大小以及裝置類型時確保元素擁有適當的行為的佈局方式。引入彈性盒佈局模型的目的是提供一種更有效的方式來對一個容器中的子元素進行排列、對齊和分配空白空間。可以用簡單的方式滿足許多常見的複雜的佈局需求。它的優點在於開發人員只是聲明佈局應該具有的行為，而不需要給出具體的實作方式。瀏覽器會負責完成實際的佈局。這個佈局模型在主流瀏覽器中都得到了支援。

二：CSS3 彈性盒子內容
彈性盒子由彈性容器(Flex container)和彈性子元素(Flex item)組成。
彈性容器透過設定 display 屬性的值為 flex 或 inline-flex將其定義為彈性容器。
彈性容器內包含了一個或多個彈性子元素。
注意：彈性容器外及彈性子元素內是正常渲染的。彈性盒子只定義了彈性子元素如何在彈性容器內佈置。

三：display:box 與display:flex的區別與用法

#1. display:box 主要是控制父容器裡面子元素的排列方式、排列順序、垂直（水平）對齊方式

display:box是2009年之前的語法，已經過時，使用是需要加上對應前綴的。

所以相容性的程式碼，大致如下

display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
    display: -moz-box; /* Firefox 17- */
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex;

登入後複製

舉例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>弹性盒子--display: box;</title>
		<style>
			.box {
				width: 330px;
				height: 400px;
				border: 1px #000 solid;
				margin: 0 auto;
				display: -webkit-box;
				display: -moz-box;
				display: -ms-flexbox;
				display: -o-box;
				display: box;
				}
				
				.box p {
				width: 100px;
				height: 20px;
				background: #000;
				margin: 5px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			<p>123</p>
			<p>123</p>
			<p>123</p>
		</div>
	</body>
</html>

登入後複製

效果圖：

CSS3 什麼是彈性盒？ display屬性中flex與box屬性值的差異與用法

給父元素宣告一個display:box伸縮盒屬性後，就代表是把整個盒子裡的塊元素都變成了內聯元素，然後這個父元素裡面的子元素就可以自由分配空間了，而不會每個區塊元素各佔一行，而是協商共同排在一行上面。如上面例子中div裡面的3個p標籤會在一行展示，而不是上下層級分配。

二：display:flex 主要讓子容器針對父容器的寬度按一定規則進行劃分

display:flex;是2011年之後出現的，也將是以後標準的語法，大部分新版瀏覽器基本上都不用使用前綴了，目前應該只有蘋果瀏覽器需要帶webkit前綴，其他都可以正常顯示。

新版本設定伸縮盒的display屬性如下：
display:flex;將容器盒模型作為區塊級彈性伸縮盒顯示(新版本)
display:inline-flex;將容器盒模型作為內聯級彈性伸縮盒顯示(新版本)

#用法：

首先flex的使用需要有一個父容器，父容器中有幾個items.

父容器：container

屬性：

　　 display:flex;/*flex區塊級，inline-flex:行內快*/

　　 justify-content:space-around;/*center:水平居中,flex-start:靠左;flex-end:靠右；space-between:兩邊的向兩邊靠，中間等分;space-around:完美的平均分配*/

　　 align-items:stretch;/*center:垂直居中、flex-start：至頂、flex-end:至底、space-between、space- around*/　　

　　 flex-direction: row;/*column從上向下的排列，column-reverse、row:從左到右，row-reverse:從右向左*/

#　　 flex-wrap:wrap;/*wrap多行顯示（父容器不夠顯示的時候，從上到下）、nowrap(當容器不夠寬的時候，子元素會平分父容器的寬或者高)、wrap -reverse:從下方往上*/

/*flex-flow是flex-direction、flex-wrap的縮寫*/

舉例：

<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>弹性盒子--display:flex;</title>
  <style>
    .container{
       width:600px;
       height:400px;
       border:1px solid #000;
       display:flex;/*flex块级，inline-flex:行内快*/
       justify-content:space-around;
       align-items:stretch;
       flex-direction: row;
       flex-wrap:wrap;
       /*flex-flow是flex-direction、flex-wrap的缩写*/
    }
    .box{
    　　width:200px;
     　 height:100px;
        border:1px solid #000;
     }
   </style>
 </head>
 <body>
     <div>
　　　　   <div>这是中间的box1</div>
        　<div>这是中间的box2</div>
　　　</div>
 </body>
</html>

登入後複製

效果圖：

CSS3 什麼是彈性盒？ display屬性中flex與box屬性值的差異與用法