css flex布局實例

本文轉載自查看原文 2019-07-22 00:31 1149 css

總共7個屬性，一一說來：

1、flex-basis 屬性用於設置或檢索彈性盒伸縮基准值,用在子級。

語法：flex-basis: number|auto|initial|inherit;

number：一個長度單位或者一個百分比，規定靈活項目的初始長度。

auto：默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
width: 350px;
height: 100px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
}

#main div {
-webkit-flex-grow: 0; /* Safari 6.1+ */
-webkit-flex-shrink: 0; /* Safari 6.1+ */
-webkit-flex-basis: 40px; /* Safari 6.1+ */
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}

#main div:nth-of-type(2) {
-webkit-flex-basis: 80px; /* Safari 6.1+ */
flex-basis: 80px;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 flex-basis 屬性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通過 -webkit-flex-basis 屬性支持該屬性。</p>

</body>
</html>

2、flex-direction 屬性規定靈活項目的方向。用在父元素。

row：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
display: flex;
flex-direction:row;
}

#main div {
width: 40px;
height: 40px;
}
</style>
</head>
<body>

</body>
</html>

效果：

row-reverse：與 row 相同，但是以相反的順序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
display: flex;
flex-direction:row-reverse;
}

#main div {
width: 40px;
height: 40px;
}
</style>
</head>
<body>

</body>
</html>

效果：

可以看出位置和排列順序與row都正好相反。

column：靈活的項目將垂直顯示，正如一個列一樣。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
display: flex;
flex-direction:column;
}

#main div {
width: 40px;
height: 40px;
}
</style>
</head>
<body>

</body>
</html>

效果：

column-reverse：與 column 相同，但是以相反的順序。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
display: flex;
flex-direction:column-reverse;
}

#main div {
width: 40px;
height: 40px;
}
</style>
</head>
<body>

</body>
</html>

效果：

以上代碼父級沒有設置高度，下面我設置一個比實際內容大的高度來看下：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {

height:300px;

display: flex;
flex-direction:column-reverse;
}

#main div {
width: 40px;
height: 40px;
}
</style>
</head>
<body>

</body>
</html>

效果：

你會發現，排列是從父級底部從下往上排列的。這個排列非常有用，如果按照普通的處理方法的話，首先是前端或后端對數據進行倒序排列，然后用父級，子級用absolute,bottom:index*height定位。

3、flex-wrap：屬性規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向，用在父級。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#main {
width: 200px;
height: 200px;
border: 1px solid #c3c3c3;
display: -webkit-flex; /* Safari */
display: flex;
flex-wrap: wrap;
}

#main div {
width: 50px;
height: 50px;
}
</style>
</head>
<body>

<p><b>注意:</b> Internet Explorer 10 及更早版本瀏覽器不支持 flex-wrap 屬性。</p>
<p><b>注意:</b> Safari 6.1 及更新版本通過 -webkit-flex-wrap 屬性支持該屬性。</p>

</body>
</html>

效果：

既然都看到這里了，下面就都直接貼圖了，呵呵：

nowrap：默認值，單行

wrap:多行

這里有問題注意一下，當子級的flex-basis*子級的數量大於父級的時候，因為flex-wrap默認單行，所以flex-basis動轉為auto,相當於失效。看下圖：

40px*6大於200px,但是沒有換行。

下面再來看下flex-wrap和flex-direction的聯系（只考慮換行的情況），先看row-reverse：

效果已經很明顯，再來看看與column-reverse的聯系：

4、flex-flow： flex-direction 和 flex-wrap 屬性的復合屬性。

如：display:flex;flex-flow:row-reverse wrap;

注意：flex-flow里面的這兩個值是沒有先后循序的，也可以只寫一個值。此處不再做演示。

5、flex-grow 屬性用於設置或檢索彈性盒的擴展比率,用於子元素。

屬性值：number,一個數字，規定項目將相對於其他靈活的項目進行擴展的量。默認值是 0。

6、flex-shrink 屬性用於設置或檢索彈性盒的收縮比率，用於子元素。

lex-shrink 屬性指定了 flex 元素的收縮規則。flex 元素僅在默認寬度之和大於容器的時候才會發生收縮，其收縮的大小是依據 flex-shrink 的值

屬性值：number,一個數字，規定項目將相對於其他靈活的項目進行收縮的量。默認值是 1。是1。是1。

w3c這里說是默認值是0，應該是文字錯誤。

flex-shrink的默認值為1，如果沒有顯示定義該屬性，將會自動按照默認值1在所有因子相加之后計算比率來進行空間收縮。

本例中A、B、C 顯式定義了 flex-shrink 為 1，第二個定義了 flex-shrink 為 2，所以計算出來總共將剩余空間分成了 6 份，其中第一份，第三份，第四份，第五份占 1 份，第二份占 2 份，即1:2:1:1:1

我們可以看到父容器定義為 400px，子項被定義為 120px，子項相加之后即為 600 px，超出父容器 200px。那么超出的 200px 需要被這五份消化通過收縮因子，所以加權綜合可得 200*1+200*2+200*1+200*1+200*1=1200px。

於是我們可以計算 A、B、C、D、E 將被移除的溢出量是多少：

第一份： 被移除溢出量：(200*1/1200)*200，即約等於33px

第二份：被移除溢出量：(200*2/1200)*200，即約等於67px

第三份：被移除溢出量：(200*1/1200)*200，即約等於33px 

第四份：被移除溢出量：(200*2/1200)*200，即約等於33px

第五份：被移除溢出量：(200*2/1200)*200，即約等於33px

最后，實際寬度分別為：120-33=87px, 120-67=53px, 120-40=87px, 120-40=87px,120-40=87px，此外，這個寬度是包含邊框的。通過審查元素核實，這個寬度是正確的
注意不要進入誤區，認為第二個元素的寬度是第一個元素寬度的一半。

7、最后說下flex布局的flex屬性：
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。

默認值：0 1 auto

這三個值的順序的固定的，按照順序使用。

哪里有不對的地方或者想溝通的，歡迎留言。

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 CSS實例詳解：Flex布局 flex布局語法+實例 css3 flex 布局 css中的flex布局 CSS布局——display: flex CSS-Flex布局 CSS flex布局 CSS中的flex布局 css flex布局詳解 css3的flex布局

css flex布局 實例

免責聲明！

css flex布局實例