# flex
* flex-grow
* flex-shrink
* flex-basis
> flex 三種的縮寫
---
flex-grow 預設0，設定值1 會自適應伸展「比例的大小」
ex:flex-grow 2 拿到的比例是兩份
會根據父容器設定值
綠色是flex-grow 2拿到是2份的比例
也就是拿到600px + 藍色是200px =800px
---
設定值1 而是每人拿到400px *2 剛好符合父容器大小
flex-shrink 預設0，設定值1 會自適應壓縮「比例的大小」
ex:flex-shrink 1 壓縮的比例是1
四個box 其中一個box設定flex-grow為4
133*4=399 + 400px =799px 壓縮比例到800px
flex-basis 預設為auto ,設定值為width 數值會優先數值
ex:flex-basis 150px 設定值
第一個box 寬度為150px的設定值
---
## flex屬性的縮寫
ex : flex 0 1 300px;
設定第一個子層
0 就不會去伸展，1而會按照300px
## 實際應用
左邊有一張貓咪的圖片，要如何設定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)
{"metaMigratedAt":"2023-06-16T07:48:01.005Z","metaMigratedFrom":"Content","title":"flex","breaks":true,"contributors":"[{\"id\":\"5dc1fddc-ccc5-4a9b-bebe-e7cf4e494847\",\"add\":2738,\"del\":20}]"}