碼上歡樂
相關內容    簡體    繁體

Flex 彈性布局(****************************************************)

本文轉載自   查看原文   2016-11-02 23:45   3197 

多行自適應，多列自適應，間隔也能自適應，任意對齊

image

 

 

創建彈性容器  flex container

display: block | inline  | inline-block  | none | flex

 

 

彈性元素  flex item

是不是flex container 彈性容器中所有的子元素都是  彈性元素呢？

不是的，只有彈性容器，在文檔流中的直接子元素(不包含孫子元素 )才是彈性元素。

 

 

flex 布局特性

排列和方向

flex排列和方向的屬性 描述
flex-direction 彈性的方向
flex-wrap 彈性的換行
flex-flow 彈性的流
order 彈性的順序

 

 

flex-direction

flex-direction取值 描述
row 行
row-reverse 從右向左
column 從上到下
column-reverse 從下到上

 

row (flex-direction默認值)

image

 

 

row-reverse

image

 

column

image

 

column-reverse

image

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex direction</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;line-height: 40px;text-align: center;background-color: #c99702;}
    .container0 .item, .container1 .item{padding: 0 12px;}


    .container{display:flex;}
    .container1{flex-direction: row-reverse;}
    .container2{flex-direction: column;}
    .container3{flex-direction: column-reverse;}
    </style>
</head>
<body>
<div class="container container0">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
<div class="container container3">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
</div>
</body>
</html>
復制代碼

image

 

 

flex-wrap

flex-wrap取值 描述
nowrap 不換行（默認值）
wrap 換行
wrap-reverse  

 

wrap

image

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex-direction</title>
    <style type="text/css">
    .container{width: 400px;margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex;}
    .container1{flex-wrap: wrap;}
    .container2{flex-wrap: wrap-reverse;}
    </style>
</head>
<body>

<div class="container container0">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

<div class="container container1">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

<div class="container container2">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
</div>

</body>
</html>
復制代碼

image

 

flex-flow(推薦使用)

語法:

flex-flow：<' flex-direction '> || <' flex-wrap '>

默認值：看各分拆屬性
適用於：flex容器
繼承性：無
動畫性：否
計算值：指定值

 

取值：

<' flex-direction '>：定義彈性盒子元素的排列方向。
<' flex-wrap '>：控制flex容器是單行或者多行。

 

說明:

復合屬性。設置或檢索彈性盒模型對象的子元素排列方式。

 

推薦使用 flex-flow ,而不是單獨用flex-direction  或 flew-wrap

image初始值   row   nowrap

 

 

imageimage

 

 

order

order 是一個『相對值』 ，是排在主軸上的順序

order 值越大，排名越靠后。

order取值 描述
order 整數
initial 初始值  0
image

 

舉個栗子:

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>order</title>
    <style type="text/css">
    .container{
        display: flex;
        background-color: #963297;
        width: 300px;
        padding:3px;
    }

    .item{
        color: #fff;
        width: 50px;
        line-height: 30px;
        background-color: #d29201;
        margin: 4px;
        text-align: center;
    }
    .item1{order: 10;}
    .item2{order: 2;}
    .item3{order: 3;}

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>
復制代碼

image

 

 

彈性

flex彈性相關的屬性

  • flex-grow
  • flex-shrink
  • flex-basis

 

flex-basis

設置『flex item』的 『初始寬度、 高度』

橫向排列時，設置的是寬

縱向排列時，設置的是高

 

語法：

flex-basis：<length> | <percentage> | auto | content

默認值：auto

適用於：flex子項

繼承性：無

動畫性：是，當值為非關鍵字時

計算值：指定值

 

取值：

 

<length>： 用長度值來定義寬度。不允許負值 <percentage>：用百分比來定義寬度。不允許負值auto： 無特定寬度值，取決於其它屬性值content： 基於內容自動計算寬度

說明：

設置或檢索彈性盒伸縮基准值。

  • 如果所有子元素的基准值之和大於剩余空間，則會根據每項設置的基准值，按比率伸縮剩余空間
  • 對應的腳本特性為flexBasis。

 

flex-grow

設置元素所能分配到的空余空間的比例。

語法:

flex-grow：<number>

默認值：0

適用於：flex子項

繼承性：無

動畫性：是

計算值：指定值

 

取值：

 

<number>：用數值來定義擴展比率。不允許負值
 

 

說明：

  • 根據彈性盒子元素所設置的擴展因子作為比率來分配剩余空間。

flex-basis + flow-grow / sum(flow-grow) * remain

 

flex-shrink

把負的剩余空間平攤

語法:

flex-shrink：<number>
默認值：1
適用於：flex子項
繼承性：無
動畫性：是
計算值：指定值

 

取值:

<number>：用數值來定義收縮比率。不允許負值

 

說明:

設置或檢索彈性盒的收縮比率。
根據彈性盒子元素所設置的收縮因子作為比率來收縮空間。

flex-basis + flow-shrink / sum(flow-shrink) * remain

 

flex(推薦使用)

語法

flex：none | <' flex-grow '> <' flex-shrink >'? || <' flex-basis '>
默認值：看各分拆屬性
適用於：flex子項
繼承性：無
動畫性：否
計算值：看各分拆屬性

 

取值

none：none關鍵字的計算值為: 0 0 auto
<' flex-grow '>：用來指定擴展比率，即剩余空間是正值時此「flex子項」相對於「flex容器」里其他「flex子項」能分配到空間比例。
在「flex」屬性中該值如果被省略則默認為「1」
<' flex-shrink '>：用來指定收縮比率，即剩余空間是負值時此「flex子項」相對於「flex容器」里其他「flex子項」能收縮的空間比例。
在收縮的時候收縮比率會以伸縮基准值加權
在「flex」屬性中該值如果被省略則默認為「1」
<' flex-basis '>：用來指定伸縮基准值，即在根據伸縮比率計算出剩余空間的分布之前，「flex子項」長度的起始數值。
在「flex」屬性中該值如果被省略則默認為「0%」
在「flex」屬性中該值如果被指定為「auto」，則伸縮基准值的計算值是自身的 <' width '> 設置，如果自身的寬度沒有定義，則長度取決於內容。

說明

復合屬性。設置或檢索彈性盒模型對象的子元素如何分配空間。
如果縮寫「flex: 1」, 則其計算值為「1 1 0%」
如果縮寫「flex: auto」, 則其計算值為「1 1 auto」
如果「flex: none」, 則其計算值為「0 0 auto」
如果「flex: 0 auto」或者「flex: initial」, 則其計算值為「0 1 auto」，即「flex」初始值

舉個栗子:

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>flex</title>
    <style type="text/css">
    .container{
        background-color: #963297;
    }

    .item{margin: 10px;line-height: 40px;text-align: center;color: #fff;font-size: 20px;background-color: #c99702;font-size: 50px;}
    .container{display: flex;flex-flow: column;}/* 彈性布局，且縱向排列 */
    html,body,.container{height: 100%;}
    .item{flex: 1 1 0;}/* flex-grow:1;  flex-shrink:1; flex-basis:0; */
    .item3{flex: 2;}/* flex-grow:2; */
    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>
</body>
</html>
復制代碼

image

 

 

對齊

和『對齊』相關的屬性有:

  • justify-content
  • align-items
  • align-self
  • align-content

 

 

justify-content

justify-content: flex-start | flex-end | center | space-between | space-around

默認值：flex-start

設置 main-axis 方向上對齊方式

justify-content 和 text-align是類似的，比text-align 更豐富一些。

 

舉個栗子:

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>justify-content</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}

    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex; }
    .fs{justify-content: flex-start;}
    .fe{justify-content: flex-end;}
    .c{justify-content: center;}
    .sb{justify-content: space-between;}
    .sa{justify-content: space-around;}


    /*.container{flex-flow: column; width: 120px;height: 300px;}*/
    </style>
</head>
<body>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sb">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container sa">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

<div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
</div>

</body>
</html>
復制代碼

image

 

 

 

 

align-items

設置『輔軸方向上』的對齊方式

語法:

align-items：flex-start | flex-end | center | baseline | stretch
默認值：stretch
適用於：flex容器
繼承性：無
動畫性：是
計算值：指定值

 

取值:

flex-start：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。
flex-end：彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。
center：彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。
baseline：如彈性盒子元素的行內軸與側軸為同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
stretch：如果指定側軸大小的屬性值為'auto'，則其值會使項目的邊距盒的尺寸盡可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。

 

說明:

定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。
對應的腳本特性為alignItems。

 

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-items</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}


    .container{display: flex;}
    .item1{line-height: 100px;}
    .item2{line-height: 70px;}
    .fs{align-items: flex-start;}
    .fe{align-items: flex-end;}
    .c{align-items: center;}
    .s{align-items: stretch;}
    .b{align-items: baseline;}

    </style>
</head>
<body>
    <div class="container fs">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container fe">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container c">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container s">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    <div class="container b">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
    </div>
    
</body>
</html>
復制代碼

image

 

我看不懂，最后的 baseline。 覺得應該和 flex-start相同。而實際和center相同。 求解釋

 

 

 

align-self

align-self：auto | flex-start | flex-end | center | baseline | stretch

設置『單個 flex item 』在cross-axis 方向上的對齊方式

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-self</title>
    <style type="text/css">
    .container{margin: 20px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 100px;line-height: 40px;text-align: center;background-color: #c99702;}
    

    .container{display: flex;align-items: flex-start;}
    .item1{line-height: 100px;}
    /*.item2{align-self: flex-end;}*/
    /*.item2{align-self: center;}*/
    /*.item2{align-self: baseline;}*/
    /*.item2{align-self: stretch;}*/
    </style>
</head>
<body>
        <div class="container">
            <div class="item item1">1</div>
            <div class="item item2">2</div>
            <div class="item item3">3</div>
        </div>
</body>
</html>
復制代碼
image

 

 

 

flex-start

imageflex-end

imagecenter

imagebaseline

imagestretch

 

 

 

align-content

align-content：flex-start | flex-end | center | space-between | space-around | stretch

設置 cross-axis 輔軸方向上行對齊方式

flex換行了，多行之間的對齊方式

默認值： stretch 拉伸

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>align-content</title>
    <style type="text/css">
    .container{margin: 20px;width: 800px;line-height: 40px;font-size: 20px;color: #fff;background-color: #963297;}
    .item{margin: 10px;width: 200px;line-height: 40px;text-align: center;background-color: #c99702;}

    .container{display: flex;}
    .container{height: 800px;flex-flow: row wrap; align-items: flex-start;}

    /*.container{align-content: flex-start;}*/
    /*.container{align-content: flex-end;}*/
    /*.container{align-content: center;}*/
    /*.container{align-content: space-between;}*/
    /*.container{align-content: stretch;}*/

    </style>
</head>
<body>
<div class="container">
        <div class="item item1">1</div>
        <div class="item item2">2</div>
        <div class="item item3">3</div>
        <div class="item item4">4</div>
        <div class="item item5">5</div>
        <div class="item item6">6</div>
        <div class="item item7">7</div>
        <div class="item item8">8</div>
        <div class="item item9">9</div>
        <div class="item item10">10</div>
</div>
</body>
</html>
復制代碼

image

 

 

 

布局--三行兩列自適應布局

核心代碼

復制代碼 
<div class="head">head</div>
<div class="body">
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>
復制代碼

 

body{display: flex;flex-flow: column;}
.head,.foot{height: 100px;}
.body{flex-flow: 1; display: flex;}
.side{width: 200px;}
.main{flex: 1;}

 

舉個栗子：

復制代碼 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>三行兩列自適應布局</title>
    <style type="text/css">
    html,body{margin: 0;text-align: center;}
    .head, .foot{line-height: 100px;background-color: #000;color: #fff;}
    .side{background-color: yellow;}
    .main{background-color: pink;}


    html,body{height: 100%;}
    body{display: flex;flex-flow: column;}
    .head,.foot{height: 100px;}
    .body{flex: 1;display: flex;}
    .side{width: 200px;}
    .main{flex: 1;}

    .main{margin-left: 10px;}
    /*.body{width: 960px;align-self: center;}*/
    </style>
</head>
<body>
<div class="head">head</div>
<div class="body">    
        <div class="side">side</div>
        <div class="main">main</div>
</div>
<div class="foot">foot</div>
</body>
</html>
復制代碼

 

image

 
 


免責聲明！

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



猜您在找 彈性布局flex的屬性 和 flex=1是啥 彈性布局flex flex布局----彈性盒子 彈性布局flex Flex布局（彈性盒子布局） 彈性盒子布局(flex布局) 彈性布局（Flex）布局介紹 布局：flex彈性布局_固定底部、居中 css3彈性伸縮布局(一)—————flex布局 css 彈性盒子（flex布局）的起邊和終邊詳解
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM