# 【六角學院2024軟體工程師體驗營<br><span class="right-text">——Flexbox 網頁切版術 | Week2】</span>
## 我的個人背景
<p class = "inner-text">目前在系統廠做零件工程師，對軟體程式很感興趣，想要轉向這個行業，目前意向是想要轉後端工程師，這一次看到六角又體驗營，就向先來瞭解看看軟體工程師都是在做什麼，自己有沒有辦法接受這樣子的工作內容</p>

## 參加體驗營的原因
<p class = "inner-text">之前又自學過一點Python，但是對前端完全沒有瞭解，自學起來有一些沒有方向。剛好看到六角又開這個體驗營，立刻手刀報名參加。</p>

## 目前的心得感想
<p class = "inner-text">不得不說，不管是洧杰校長和體驗營的各位同學和助教都讓我大開眼界，校長和各位助教有夠拼，晚上過了12點還是照樣為大家解答疑問，同學們也都非常積極，學習的氣氛極佳，讓我也充滿了動力。</p>

<h2>Flex 排版重點整理</h2>
<ul>
<li>
<h3>display：flex</h3>
<p class = "inner-text">神奇的排版術都要從這裏開始，將原本的一維空間轉換為二維空間(主軸和交錯軸)，讓佈局更加彈性。</p>
<!-- <img src="https://hackmd.io/_uploads/SJPvwpJQR.png" class="flex-pic"> -->
<div class="flex-pic">
<img src="https://hackmd.io/_uploads/HJUWO61mA.png">
<svg xmlns="http://www.w3.org/2000/svg" height="48px" viewBox="0 -960 960 960" width="48px" fill="#5f6368"><path d="M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z"/></svg>
<img src="https://hackmd.io/_uploads/ByYzOTkQR.png">
</div>
</li>
<li>
<h3>
flex-direction
</h3>
<p class = "inner-text">這個屬性的4個值決定了這個二維空間主軸佈局的方向性，與主軸垂直的叫做交錯軸：</p>
<ol>
<li class = "inner-text">row(預設)：空間上由左向右排列<br><img src="https://hackmd.io/_uploads/S1NZkoxQ0.png"></li>
<li class = "inner-text">row-reverse：空間上由右向左排列，與row相反<br><img src="https://hackmd.io/_uploads/rJMVyix7C.png"></li>
<li class = "inner-text">column：空間上由上至下排列<br><img src="https://hackmd.io/_uploads/SkYvyjx7R.png"></li>
<li class = "inner-text">column-reverse：空間上由下至上排列，與column相反<br><img src="https://hackmd.io/_uploads/S1vYyjxm0.png"></li>
</ol>
<!-- <img src="https://hackmd.io/_uploads/Skx3Cpy7C.png"> -->
</li>
<li>
<h3>flex-wrap</h3>
<p class="inner-text">類似於Word的自動換行，當容器內元素的長度超過容器的長度時，自動換至下一行：</p>
<ol>
<li class = "inner-text">nowrap(預設)：不換行，如果元素總長度超出容器長度，會將容器內的元素按照比例重新分配<br><img src="https://hackmd.io/_uploads/BJ0uxjx7A.png"></li>
<li class = "inner-text">wrap：自動換行，只要元素總長超過容器長度，就向下進行換行<br><img src="https://hackmd.io/_uploads/HJEUxoemA.png"></li>
</ol>
<!-- <img src="https://hackmd.io/_uploads/ByH5j9xmR.png"> -->
</li>
<li>
<h3>justify-content</h3>
<p class = "inner-text">該屬性定義主軸的對其方式，分爲下列幾種：</p>
<ol>
<li class = "inner-text">
center：居中對齊<br>
<img src="https://hackmd.io/_uploads/ry6pXoe7R.png">
</li>
<li class = "inner-text">
flex-start(預設)：靠前對齊(主軸：row -> 靠左；column -> 靠上)<br>
<img src="https://hackmd.io/_uploads/BJPyVilXR.png">
</li>
<li class = "inner-text">
flex-end：靠後對齊(主軸：row -> 靠右；column -> 靠下)<br>
<img src="https://hackmd.io/_uploads/r1Cx4jxmC.png">
</li>
<li class = "inner-text">
space-between：貼齊兩側，中間間距平均分配<br>
<img src="https://hackmd.io/_uploads/HJFfVixQR.png">
</li>
<li class = "inner-text">
space-around：每個元素的兩側空間等值平分(兩側的元素與容器的間距爲兩元素間距的1/2)<br>
<img src="https://hackmd.io/_uploads/BkX_4ie7R.png">
</li>
<li class = "inner-text">
space-evenly：所有的間距平分等寬<br>
<img src="https://hackmd.io/_uploads/BkDKNieQR.png">
</li>
</ol>
</li>
<li>
<h3>align-items</h3>
<p class = "inner-text">上面講到justify-content用來改變主軸的空間佈局，而align-items就是調整交錯軸的空間佈局，語法基本與justify-content一致：</p>
<ol>
<li class = "inner-text">
center：居中對齊<br>
<img src="https://hackmd.io/_uploads/HJtgUsgQR.png">
</li>
<li class = "inner-text">
flexs-tart(預設)：靠前對齊(主軸row： -> 靠上；column -> 靠左)<br>
<img src="https://hackmd.io/_uploads/S1Y4LjlQA.png">
</li>
<li class = "inner-text">
flex-end：靠後對齊(主軸row： -> 靠下；column -> 靠右)<br>
<img src="https://hackmd.io/_uploads/r1xOiig7A.png">
</li>
<li class = "inner-text">
stretch：高度填滿整個空間<br>
<img src="https://hackmd.io/_uploads/SyQCsixmC.png">
</li>
<li class = "inner-text">
baseline：以基準線對齊<br>
<img src="https://hackmd.io/_uploads/rJRQ3oe7C.png"><br>
<p style="font-weight:bold;background-color:yellow;display:inline-block;">什麼是baseline：</p>
<img src="https://hackmd.io/_uploads/HyosnsxQA.png">
</li>
</ol>
</li>
</ul>
<footer style="display:flex;justify-content:flex-end;"><a href="https://medium.com/@sickmi14798/css-flex%E5%B8%83%E5%B1%80%E7%B3%BB%E7%B5%B1%E5%9F%BA%E6%9C%AC%E6%A6%82%E5%BF%B5-24dbf39bd75d" style="display:block;">參考資料</a></footer>

---

<style>
.right-text{
display: block;
text-align: right
}
.inner-text{
font-size: 18px;

}
.flex-pic{
display: flex;
margin: 0 auto;
justify-content: space-between;
align-items: center;
}
.flex-pic img{
display: block;
}
</style>