欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

flex(彈性布局)教程之常用布局

 更新時間：2022年09月07日 08:43:53   作者：愛喝酸奶的吃貨  
這篇文章主要介紹了flex(彈性布局)教程之常用布局的相關(guān)資料,需要的朋友可以參考下

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

一、Flex 布局是什么？

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

任何一個容器都可以指定為 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; /* 均勻排列每個元素 首個元素放置于起點，末尾元素放置于終點,中間元素的中間間隔相等 */
? ? ? ? ? ? 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 class="father-one has-flex">
? ? <div class="fa-one-child1"></div>
? ? <div class="fa-one-child2"></div>
? ? <div class="fa-one-child3"></div>
? ? <div class="fa-one-child4"></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 class="father-two has-flex">
? ? <div class="child"></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 class="has-flex father-three">
? ? <i class="fa fa-file-text-o" 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 class="has-flex father-four">
? ? <div class="fa-four-child">第一個</div>
? ? <div class="fa-four-child">第二個</div>
? ? <div class="fa-four-child">第三個</div>
? ? <div class="fa-four-child" style="height: 90px">第四個</div>
</div>
<!--子元素平分父元素,且自適應(yīng)等高 ?end-->

 子元素平分父元素,兩邊對齊中間自適應(yī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)相同寬度間隔，且自動換行 ? star-->
<h3>子元素平分父元素,兩邊對齊中間自適應(yīng)相同寬度間隔，且自動換行 </h3>
<div class="has-flex father-five">
? ? <div class="fa-five-child">第一個</div>
? ? <div class="fa-five-child">第二個</div>
? ? <div class="fa-five-child">第三個</div>
? ? <div class="fa-five-child">第四個</div>
? ? <div class="fa-five-child">第五個</div>
? ? <div class="fa-five-child">第六個</div>
? ? <div class="fa-five-child">第七個</div>
? ? <div class="fa-five-child">第八個</div>
</div>
<!--子元素平分父元素,兩邊對齊中間自適應(yī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 class="has-flex father-six">
? ? <div class="fa-six-child one-child">第一個</div>
? ? <div class="fa-six-child two-child">第二個</div>
? ? <div class="fa-six-child three-child">第三個</div>
</div>
<!--三欄布局,兩邊固定寬中間自適應(yīng) ?end-->

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

相關(guān)文章

最新評論