目錄

• 一、Flex 布局是什么？
• 任何一個(gè)容器都可以指定為 Flex 布局。
• 行內(nèi)元素也可以使用 Flex 布局。
• Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。
• 二、常用布局
• 公共樣式：
•  垂直居中 子元素左右分布
• 水平垂直居中
• 水平垂直居中 圖標(biāo)在上文字在下
• 子元素平分父元素,且自適應(yīng)等高
•  子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動(dòng)換行
•  三欄布局,兩邊固定寬中間自適應(yīng)

2009年，W3C 提出了一種新的方案----Flex 布局，可以簡便、完整、響應(yīng)式地實(shí)現(xiàn)各種頁面布局。目前，它已經(jīng)得到了所有瀏覽器的支持，這意味著，現(xiàn)在就能很安全地使用這項(xiàng)功能。

一、Flex 布局是什么？

Flex 是 Flexible Box 的縮寫，意為"彈性布局"，用來為盒狀模型提供最大的靈活性。

任何一個(gè)容器都可以指定為 Flex 布局。

.box{
? display: flex;
}

行內(nèi)元素也可以使用 Flex 布局。

.box{
? display: inline-flex;
}

Webkit 內(nèi)核的瀏覽器，必須加上-webkit前綴。

.box{
? display: -webkit-flex; /* Safari */
? display: flex;
}

注意，設(shè)為 Flex 布局以后，子元素的float、clear和vertical-align屬性將失效。

二、常用布局

公共樣式：

? ? <style>
? ? ? ? * {
? ? ? ? ? ? margin: 0;
? ? ? ? ? ? padding: 0;
? ? ? ? }

? ? ? ? .has-flex {
? ? ? ? ? ? display: flex;
? ? ? ? }
? ? </style>

 垂直居中 子元素左右分布

css

? ? ? ? .father-one {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? background-color: #fffcef;
? ? ? ? ? ? align-items: center; /*縱軸）方向上的對齊方式。*/
? ? ? ? ? ? justify-content: space-between; /* 均勻排列每個(gè)元素 首個(gè)元素放置于起點(diǎn)，末尾元素放置于終點(diǎn),中間元素的中間間隔相等 */
? ? ? ? ? ? justify-content: space-around; /* 均勻排列每個(gè)元素 每個(gè)元素周圍分配相同的空間 */
? ? ? ? ? ? justify-content: space-evenly; /* 均勻排列每個(gè)元素 ? 每個(gè)元素之間的間隔相等 */
? ? ? ? }

? ? ? ? .fa-one-child1 {
? ? ? ? ? ? height: 30px;
? ? ? ? ? ? width: 30px;
? ? ? ? ? ? background-color: #a6acde;
? ? ? ? }

? ? ? ? .fa-one-child2 {
? ? ? ? ? ? height: 40px;
? ? ? ? ? ? width: 40px;
? ? ? ? ? ? background-color: #e4b9f0;
? ? ? ? }

? ? ? ? .fa-one-child3 {
? ? ? ? ? ? height: 50px;
? ? ? ? ? ? width: 50px;
? ? ? ? ? ? background-color: #f3b009;
? ? ? ? }

? ? ? ? .fa-one-child4 {
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? width: 60px;
? ? ? ? ? ? background-color: #f77c4f;
? ? ? ? }

html

<!--垂直居中 子元素左右分布 star-->
<h3>垂直居中 子元素左右分布</h3>
<div>
? ? <div></div>
? ? <div></div>
? ? <div></div>
? ? <div></div>
</div>
<!--垂直居中 子元素左右分布 end-->

水平垂直居中

css

? ? ? ? .father-two {
? ? ? ? ? ? width: 100%;
? ? ? ? ? ? height: 200px;
? ? ? ? ? ? align-items: center; /*縱軸）方向上的對齊方式。*/
? ? ? ? ? ? justify-content: center; /* ? ?橫軸）方向上的對齊方式*/
? ? ? ? ? ? background-color: red;
? ? ? ? }

? ? ? ? .child {
? ? ? ? ? ? width: 50%;
? ? ? ? ? ? height: 60px;
? ? ? ? ? ? background-color: rosybrown;
? ? ? ? }

html

<!--水平垂直居中 star-->
<h3>水平垂直居中</h3>
<div>
? ? <div></div>
</div>
<!--水平垂直居中 end-->

水平垂直居中 圖標(biāo)在上文字在下

css

? ? ? ? .father-three {
? ? ? ? ? ? height: 80px;
? ? ? ? ? ? background-color: #f77c4f;
? ? ? ? ? ? align-items: center;
? ? ? ? ? ? justify-content: center;
? ? ? ? ? ? flex-direction: column;
? ? ? ? }

html

<!--水平垂直居中 圖標(biāo)在上文字在下 star-->
<h3>水平垂直居中 圖標(biāo)在上文字在下</h3>
<div>
? ? <i aria-hidden="true"></i>
? ? <p>測試</p>
</div>
<!--水平垂直居中 圖標(biāo)在上文字在下 end-->

子元素平分父元素,且自適應(yīng)等高

 css

? ? ? ? .father-four {
? ? ? ? ? ? background-color: #ffd5eb;
? ? ? ? }

? ? ? ? .fa-four-child {
? ? ? ? ? ? flex: 1;
? ? ? ? ? ? text-align: center;
? ? ? ? ? ? background-color: #ffffff;
? ? ? ? ? ? border: 1px solid;
? ? ? ? }

html

<!--子元素平分父元素,且自適應(yīng)等高 ? star-->
<h3>子元素平分父元素,且自適應(yīng)等高 </h3>
<div>
? ? <div>第一個(gè)</div>
? ? <div>第二個(gè)</div>
? ? <div>第三個(gè)</div>
? ? <div>第四個(gè)</div>
</div>
<!--子元素平分父元素,且自適應(yīng)等高 ?end-->

 子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動(dòng)換行

css

? ? ? ? .father-five {
? ? ? ? ? ? height: 100px;
? ? ? ? ? ? background-color: #a6acde;
? ? ? ? ? ? justify-content: space-between;
? ? ? ? ? ? flex-wrap: wrap;
? ? ? ? }

? ? ? ? .fa-five-child {
? ? ? ? ? ? width: 21%;
? ? ? ? ? ? background-color: #f77c4f;
? ? ? ? }

html

<!--子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動(dòng)換行 ? star-->
<h3>子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動(dòng)換行 </h3>
<div>
? ? <div>第一個(gè)</div>
? ? <div>第二個(gè)</div>
? ? <div>第三個(gè)</div>
? ? <div>第四個(gè)</div>
? ? <div>第五個(gè)</div>
? ? <div>第六個(gè)</div>
? ? <div>第七個(gè)</div>
? ? <div>第八個(gè)</div>
</div>
<!--子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動(dòng)換行 ?end-->

 三欄布局,兩邊固定寬中間自適應(yīng)

css

? ? ? ? .father-six {
? ? ? ? ? ? height: 100px;
? ? ? ? }

? ? ? ? .one-child,
? ? ? ? .three-child {
? ? ? ? ? ? width: 300px;
? ? ? ? ? ? background-color: #a6acde;
? ? ? ? }

? ? ? ? .two-child {
? ? ? ? ? ? flex: 1;
? ? ? ? ? ? background-color: #eeeeee;
? ? ? ? }

html

<!--三欄布局,兩邊固定寬中間自適應(yīng) ? star-->
<h3>三欄布局,兩邊固定寬中間自適應(yīng) </h3>
<div>
? ? <div>第一個(gè)</div>
? ? <div>第二個(gè)</div>
? ? <div>第三個(gè)</div>
</div>
<!--三欄布局,兩邊固定寬中間自適應(yīng) ?end-->

到此這篇關(guān)于flex(彈性布局)教程之常用布局的文章就介紹到這了,更多相關(guān)flex常用布局內(nèi)容請搜索以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持！