在使用flex 布局的時候會用到flex屬性，比較常見的設置有flex:1、flex:auto (1 1 auto) 和 flex:none (0 0 auto)三種，他們都是什麼意思？有什麼不同呢？今天小劉就給大家介紹下它們的用途及其區别。

首先flex屬性是flex-grow, flex-shrink 和 flex-basis的簡寫，所以其取值可以參考以下幾種情況：

1、flex默認值為0 1 auto。

2、當flex取值為none,則計算值為0 0 auto，如下是等同的：

.item{flex:none;} 等同 .item{flex-grow:0;flex-shrink:0; flex-basis:auto}

3、當flex取值為auto,則計算值為1 1 auto，如下是等同的：

.item{flex:auto;} 等同 .item{flex-grow:1;flex-shrink:1; flex-basis:auto}

4、當flex取值為一個非負數字,則該數字為flex-grow值，flex-shrink取1，flex-basis:0%，如下是等同的：

.item{flex:1;} 等同 .item{flex-grow:1;flex-shrink:1; flex-basis:0%}

5、當flex取值為一個長度或者百分比,則該數字為flex-basis的值，flex-grow取1，flex-shrink取1，如下是等同的：

.item{flex:0%;} 等同 .item{flex-grow:1;flex-shrink:1; flex-basis:0%}

.item{flex:24px;} 等同 .item{flex-grow:1;flex-shrink:1; flex-basis:24px}

6、當flex取值為兩個非負數,則該數字為lex-grow和flex-shrink的值，flex-basis取0%，如下是等同的：

.item{flex:2 3;} 等同 .item{flex-grow:2;flex-shrink:3; flex-basis:0%}

7、當flex取值為一個非負數和一個長度或百分比,則該數字為lex-grow和flex-basis的值，flex-shrink取1，如下是等同的：

.item{flex:200 30px;} 等同 .item{flex-grow:200;flex-shrink:1; flex-basis:20px}

以上就是flex取值常見寫法。掌握以上方法就可以在項目裡靈活運用，實現所需的網站頁面布局了。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!