CSS 小結(jié)筆記之伸縮布局 (flex)

番茄西紅柿發(fā)布于2019-04-23 13:22 / 3517人閱讀

摘要：相關(guān)的各個(gè)屬性如下在父盒子定義，子盒子才能使用屬性設(shè)置子盒子的縮放比例，可以一起指定也可以多帶帶指定。子盒子在父盒子中的水平對(duì)齊方式。強(qiáng)行在一行顯示，因此每個(gè)盒子的大小都會(huì)減少。

CSS flex 是一種伸縮布局，之前塊級(jí)元素布局在同一行，可以通過display或position或float來實(shí)現(xiàn)，而本篇介紹一個(gè)新的方法——flex（彈性布局）。

flex 為和模型布局提供了極大地靈活性，所謂彈性布局即可根據(jù)大小判定自動(dòng)伸縮。

flex相關(guān)的各個(gè)屬性如下：

1、display：flex；在父盒子定義flex，子盒子才能使用flex屬性

2、flex：none |flex-grow flex-shrink flex-basis 設(shè)置子盒子的縮放比例，可以一起指定也可以多帶帶指定。（均不可為負(fù)數(shù)）

　　（1）none 相當(dāng)于 flex： 0 0 auto；

　　（2）flex-grow 用來規(guī)定盒子的擴(kuò)展比率，即盒子相對(duì)于其他盒子能夠分配到的空間的比值，沒有指定flex的不參與分配。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 800px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            background-color: aqua;
            width: 200px;
        }
        
        .son2 {
            background-color: green;
            flex-grow: 1;
            width: 50px;
        }
        
        .son3 {
            background-color: blue;
            flex-grow: 2;
            width: 30px;
        }
        
        .son4 {
            background-color: orange;
            flex-grow: 3;
            width: 80px;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">1div>
        <div class="son2">2div>
        <div class="son3">3div>
        <div class="son4">4div>
    div>
body>

html>

View Code

　　　　上面圖中子盒子所占大小的計(jì)算方法為：

　　　　a、.son1 沒有指定flex 因此不參與分配大小為固定的200px；

　　　　b、剩下的空間需要減去盒子固有的寬度來繼續(xù)分配，即可分配空間為

　　　　　　600-50-30-80=440px

　　　　c、指定分配的比率為1:2:3 所以各自能分配到的大小為440*（1/6），440*（2/6），440*（3/6）

　　　　d、最后可得出各個(gè)盒子的大小

　　　　　　.son2: 440*（1/6）+50=123.3px

　　　　　　.son3: 440*（2/6）+30=176.7px

　　　　　　.son4: 440*（3/6）+80=300px

　?。?）、flex-shrink 規(guī)定盒子收縮率，一般是在子盒子總體大小超過父盒子情況下，確定各個(gè)盒子的縮小比例。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            width: 100px;
            flex-shrink: 1;
            background-color: aqua;
        }
        
        .son2 {
            width: 200px;
            flex-shrink: 2;
            background-color: orange;
        }
        
        .son3 {
            width: 300px;
            flex-shrink: 3;
            background-color: deeppink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">1div>
        <div class="son2">2div>
        <div class="son3">3div>
    div>
body>

html>

View Code

　　　　上面圖中子盒子所占大小的計(jì)算方法為：

　　　　a、子盒子總體寬度大小為：100+200+300=600px

　　　　b、超過父盒子 600-400=200px

　　　　c、收縮比率為：1:2:3 ，則對(duì)收縮大小進(jìn)行加權(quán)求值,求出收縮大小

　　　　　　.son1: 200*[100*1/（1*100+2*200+3*300）]=14px

　　　　　　.son2: 200*[200*2/（1*100+2*200+3*300）]=57px

　　　　　　.son1: 200*[300*3/（1*100+2*200+3*300）]=129px

　　　　d、最終各個(gè)盒子大小為

　　　　　　.son1: 100-14=86px；

　　　　　　.son2: 200-57=143px；

　　　　　　.son3: 300-129=171px；

　　（4）、flex-basis：長度 |百分比

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        /* 超過按照比例劃分 */
        
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
        }
        
        .son1 {
            width: 100px;
            flex-basis: 35%;
            background-color: aqua;
        }
        
        .son2 {
            width: 200px;
            flex-basis: 30%;
            background-color: orange;
        }
        
        .son3 {
            width: 300px;
            flex-basis: 50%;
            background-color: deeppink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">1div>
        <div class="son2">2div>
        <div class="son3">3div>
    div>
body>

html>

View Code

　　　　一般設(shè)置不超過盒子大小或者不超過100%，超過100%則按比例分配空間。

　　　　如上圖按7:6:10 來分配，設(shè)置為auto，則以自身大小來分配。

　?。?）、常用復(fù)合屬性

　　　　　　flex：1相當(dāng)于 flex：1 1 0%；

　　　　　　flex：auto 相當(dāng)于 flex：1 1 auto；

　　　　　　flex：none 相當(dāng)于 flex：0 0 auto；

　　　　　　 flex：0 none 或flex：initial 相當(dāng)于 flex：0 1 auto；

3、flex-direction：row | row-reverse | column | column-reverse 調(diào)整株洲方向，即合適是水平分布還是垂直分布的，默認(rèn)是水平方向。

　　上面四個(gè)值分別是，水平| 水平反向| 垂直| 垂直反向

　　反向的意思是，盒子順序是相反的。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 2px solid red;
            display: flex;
            margin: 200px auto;
            flex-direction: column-reverse;
        }
        
        .son1 {
            flex: 1;
            background-color: aqua;
        }
        
        .son2 {
            flex: 1;
            background-color: orange;
        }
        
        .son3 {
            flex: 1;
            background-color: deeppink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son1">1div>
        <div class="son2">2div>
        <div class="son3">3div>
    div>
body>

html>

View Code

4、justify-content: flex-start | flex-end | center | space-between | space-around 子盒子在父盒子中的水平對(duì)齊方式。　　　

　　flex-start ：默認(rèn)值，項(xiàng)目向容器起始位置對(duì)齊（靠左對(duì)齊）

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 400px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            justify-content: flex-start;
        }
        
        .son {
            flex: 0 0 20%;
            background-color: aqua;
        }
        
        .son:nth-child(2) {
            background-color: orange;
        }
        
        .son:nth-child(3) {
            background-color: deeppink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son">1div>
        <div class="son">2div>
        <div class="son">3div>
    div>
body>

html>

View Code

　　接下來只將justify-content 值改變，就不重復(fù)寫代碼了，只給出結(jié)果圖

　　　　　flex-end：項(xiàng)目向容器結(jié)束位置對(duì)齊。（靠右對(duì)齊）　　　　center：項(xiàng)目位于容器的中間。（水平居中）　　　　　　space-between：各個(gè)項(xiàng)目中間有空隙，但是開頭和結(jié)尾緊貼容器（父盒子）　　 space-around：各個(gè)項(xiàng)目中間有空隙，且空隙距離相同（相當(dāng)于每個(gè)盒子左右給了一個(gè)相同的margin值）　　 5、align-items：flex-start | flex-end | center | baseline | stretch 子盒子在父盒子中的垂直對(duì)齊方式

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 400px;
            height: 400px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            align-items: stretch;
        }
        
        .son {
            flex: 0 0 20%;
            padding: 30px 0;
            background-color: aqua;
            font-size: 40px;
        }
        
        .son:nth-child(2) {
            padding: 50px 0;
            background-color: orange;
        }
        
        .son:nth-child(3) {
            padding: 100px 0;
            background-color: deeppink;
        }
    style>
head>

<body>
    <div class="fa">
        <div class="son">1div>
        <div class="son">2div>
        <div class="son">3div>
    div>
body>

html>

View Code

　　同樣接下來幾種只給出效果圖

　　flex-start：上對(duì)齊　　　　flex-end ：下對(duì)齊　　　　center：垂直居中對(duì)齊　　　　baseline：與項(xiàng)目的第一行文字的基線對(duì)齊，因此當(dāng)基線在同一條線上時(shí)，與flex-start一致　　 6、flex-wrap：nowrap | wrap | wrap-reverse 當(dāng)子盒子大小超過父盒子是是否換行　　nowrap：默認(rèn)值，不換行。強(qiáng)行在一行顯示，因此每個(gè)盒子的大小都會(huì)減少。

DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Documenttitle>
    <style>
        .fa {
            width: 200px;
            height: 200px;
            border: 1px solid red;
            display: flex;
            margin: 100px auto;
            align-items: baseline

GPU云服務(wù)器云服務(wù)器 flex布局 CSS_Flex css布局 css布局教程

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1777.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensor

閱讀 735·2023-04-25 19:43
Windows 下安裝 XGBoost

閱讀 3981·2021-11-30 14:52
Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

閱讀 3807·2021-11-30 14:52
VmShell：黑五美國VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

閱讀 3871·2021-11-29 11:00
百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

閱讀 3802·2021-11-29 11:00
Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

閱讀 3904·2021-11-29 11:00
301重定向怎么做?301重定向設(shè)置方法有幾種

閱讀 3580·2021-11-29 11:00
wordpress網(wǎng)站重定向次數(shù)過多的解決方法

閱讀 6182·2021-11-29 11:00

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

CSS 小結(jié)筆記之伸縮布局 (flex)

相關(guān)文章

HTML-CSS

HTML-CSS

**Day05 - Flex 實(shí)現(xiàn)可伸縮的圖片墻中文指南**

發(fā)表評(píng)論

0條評(píng)論

番茄西紅柿

男|高級(jí)講師

TA的文章

tensor

Windows 下安裝 XGBoost

Hadoop 2.6.0 啟動(dòng)問題 lib/native/libhadoop.so which mi

VmShell：黑五美國VPS,免費(fèi)先開通測(cè)試,滿意后付款!支持tiktok美區(qū)

百度智能云：云產(chǎn)品特惠福利,1核2G輕量應(yīng)用服務(wù)器僅48元/年

Linux系統(tǒng)和寶塔面板如何啟用禁ping功能?

301重定向怎么做?301重定向設(shè)置方法有幾種

wordpress網(wǎng)站重定向次數(shù)過多的解決方法

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！

CSS 小結(jié)筆記之伸縮布局 (flex)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長期優(yōu)惠，快來選購！