---
# System prepended metadata

title: flex

---

# flex

* flex-grow 
* flex-shrink
* flex-basis


> flex 三種的縮寫
---

 flex-grow 預設0，設定值1 會自適應伸展「比例的大小」

 ex:flex-grow 2 拿到的比例是兩份
 
 ![](https://i.imgur.com/14ySDjv.png)


會根據父容器設定值

綠色是flex-grow 2拿到是2份的比例
也就是拿到600px + 藍色是200px =800px

---


設定值1 而是每人拿到400px *2 剛好符合父容器大小
![](https://i.imgur.com/bL1AQxr.png)



 flex-shrink 預設0，設定值1 會自適應壓縮「比例的大小」

 ex:flex-shrink 1 壓縮的比例是1
 四個box 其中一個box設定flex-grow為4
 133*4=399 + 400px =799px 壓縮比例到800px
 
 ![](https://i.imgur.com/HOlPQmK.png)




flex-basis 預設為auto ,設定值為width 數值會優先數值

ex:flex-basis 150px 設定值

第一個box 寬度為150px的設定值
![](https://i.imgur.com/37ay79O.png)

---

## flex屬性的縮寫

ex : flex 0 1 300px;
設定第一個子層
0 就不會去伸展，1而會按照300px
![](https://i.imgur.com/YlLySUF.png)

## 實際應用
![](https://i.imgur.com/fAKqTZ0.png)
左邊有一張貓咪的圖片，要如何設定flex屬性的特性
```=html
    <body>
    <div class="wrap">
        <div class="aside">
            <img src="https://images.unsplash.com/photo-1629122271630-2f39ef9ddde8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80" alt="">
        </div>
        <div class="main">
            <p>
                Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure rem et reiciendis facere quia corrupti, voluptate pariatur, ipsam, tempora nemo illum non provident eius aliquid itaque consectetur veritatis modi!
            </p>
        </div>
        <div class="reverse">
            <div class="aside">
                <img src="https://images.unsplash.com/photo-1629122271630-2f39ef9ddde8?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=751&q=80" alt="">
            </div>
            <div class="main">
                <p>
                    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vitae iure rem et reiciendis facere quia corrupti, voluptate pariatur, ipsam, tempora nemo illum non provident eius aliquid itaque consectetur veritatis modi!
                </p>
                </div>
            </div>
        </div>
        
    </div>
```

```=css
body,
html {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

.wrap {
	width: 1100px;
	margin: 8px auto;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	background: #8326aa;
}
.aside img {
	width: 100%;
}
.aside {
	display: flex;
	flex: 0 1 350px;
	height: auto;
}
.main {
	display: flex;
	height: auto;
}
.main p {
	width: 700px;
	margin-left: 10px;
	line-height: 1.5;
	font-size: 1.5rem;
}
.reverse {
	display: flex;
	flex-direction: row-reverse;
	justify-content: space-between;
	align-items: center;
}

.reverse .main {
	margin-right: 10px;
}

.reverse .main p {
	width: 700px;
	line-height: 1.5;
	font-size: 1.5rem;
}

```

# 目錄頁
---

- [Flexbox](/ZEHy6qAcQ5m7efV3GUk3uw)