目錄

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

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

一、Flex 布局是什么？

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

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

.box{
? display: flex;
}

行內元素也可以使用 Flex 布局。

.box{
? display: inline-flex;
}

Webkit 內核的瀏覽器，必須加上-webkit前綴。

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

注意，設為 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; /* 均勻排列每個元素 首個元素放置于起點，末尾元素放置于終點,中間元素的中間間隔相等 */
? ? ? ? ? ? justify-content: space-around; /* 均勻排列每個元素 每個元素周圍分配相同的空間 */
? ? ? ? ? ? justify-content: space-evenly; /* 均勻排列每個元素 ? 每個元素之間的間隔相等 */
? ? ? ? }

? ? ? ? .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-->

水平垂直居中 圖標在上文字在下

css

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

html

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

子元素平分父元素,且自適應等高

 css

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

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

html

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

 子元素平分父元素,兩邊對齊中間自適應相同寬度間隔，且自動換行

css

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

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

html

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

 三欄布局,兩邊固定寬中間自適應

css

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

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

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

html

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

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