# 筆記_CSS_Flex排版_有關twzipcode
-----
###### tags: `CSS` `jQuery`

感激 卡斯柏 技術分享
簡單又易懂
本篇來源 [圖解：CSS Flex 屬性一點也不難](https://wcc723.github.io/css/2017/07/21/css-flex/)

技術成就不在我

MDN
[place-content](https://developer.mozilla.org/zh-CN/docs/Web/CSS/place-content)

----

框架有框架的優點也有缺點
這次時做專案時使用了 網路上別人寫的jQ
地址生成欄位 套件

但要不得的是CSS套不進去

## 實做

地址共有三個地方
縣市跟鄉鎮是jQ產生的
第三個input是一般用`form-control`

[台灣縣市鄉鎮郵遞區號 下拉選單外掛 TWzipcode 使用心得](https://www.wfublog.com/2017/10/taiwan-county-town-zip-address-twzipcode-jquery.html)

即使用CSS方法加上去也只會跑版
這是因為`form-control` 屬性本身就屬於一行一行的


最一開始的`<div id="zipcode"></div>` 就是地址套件
使用`style` 做最高權限

<!--外容器-->
<div>
    <!--內容器-->
    <div id="zipcode"></div>
    <!--內容器-->
    <div>
      <input id="" name="" type="text" class="form-control">
    </div>
</div>

一排要排3格/個
使用row

<div style="display: flex; flex-direction: row;">
    <div id="zipcode" style="display:flex; flex: 1; place-content:space-around;"></div>
    <div style="flex-grow:2; flex-shrink:1; flex-basis:0%;">
      <input id="" name="" type="text" class="form-control">
    </div>
</div>

---

排好後會發現
3個完建中間的空隙在RWD時會有問題
**特別是不順的RWD**

使用

- justify-content
- align-items
- align-content

但我style中寫的是`place-content`

在MDN中
> place-content 属性是align-content 和 justify-content的简写. 使用这两个属性的值可以用于任何的布局情况。

Flex完成成品


----

> 還有另一種方法是用套件
> bootstrap-select

[bootstrap-select](https://developer.snapappointments.com/bootstrap-select/)

----

## Flex

這樣只能自己實刻了...

### Flex 外容器屬性
- display
- flex-flow
- flex-direction
- flex-wrap
- justify-content
- align-items
### Flex 內元件屬性

- flex
> - flex-grow
> - flex-shrink
> - flex-basis
- order
- align-self

## 外容器

### display

Html Code

<div class="flex column">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>

<div class="flex row">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item flex-2">C</div>
</div>

使用的是SCSS

.flex {
  // display 要先設定
  display: flex;
  // display: 有 flex | inline-flex;
  // inline-flex 作用類似於 inline-block + flex
  
  background-color: #61a0f8;
  // 單存只有margin左右會沒填滿 所以改成top
  margin-top: 10px;
  height: 300px;
  padding: 15px;
}

.column {
  flex-direction: column;
}

.row {
  flex-direction: row;
}

.item {
  flex: 1;
  background-color: #f08bc3;
  // 做出間縫 才看起來是一塊塊的正方形
  margin: 5px;
  display: flex;
  justify-content: center; // 文字水平置中
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 0%;
  //background-color: #f08bc3;
}

結果

---

### flex-wrap

[CodePen Home
Flex 介紹 (flex-wrap)](https://codepen.io/Wcc723/pen/xroRaB)

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">4</div>
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  // 修改以下值試試看 wrap | nowrap | wrap | wrap-reverse
  flex-wrap: wrap;
}

.item {
  flex: 0 0 30%;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  flex-grow: 1;
  flex-shrink: 1;
  flex-basis: 60%;
  background-color: #f08bc3;
}

-----

### justify-content
### align-items

兩個偏向同一屬性

[CodePen Home
Flex 介紹 (flex-justify)](https://codepen.io/Wcc723/pen/VWJPaa)

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
<!--  可打開以下註解增加數量  -->
<!--   <div class="item flex-2">2</div>
  <div class="item">3</div> -->
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  // 修改以下值試試看 flex-start | flex-end | center | space-between | space-around;
  justify-content: space-around;
  
  // 修改以下值試試看 flex-start | flex-end | center | baseline | stretch;
  align-items: flex-end;
}

.item {
  width: 60px;
  height: 120px;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 120px;
  height: 240px;
  background-color: #f08bc3;
}

----

### align-content

[CodePen Home
Flex 介紹 (align-content)](https://codepen.io/Wcc723/pen/JJQEOY)

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
  <div class="item flex-2">2</div>
  <div class="item">3</div>
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  flex-wrap: wrap;
  // 修改以下值試試看 flex-start | flex-end | center | space-between | space-around;
  justify-content: center;
  
  // 修改以下值試試看 flex-start | flex-end | center | space-between | space-around | stretch
  align-content: center;
}

.item {
  width: 25%;
  height: 80px;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 40%;
  height: 120px;
  background-color: #f08bc3;
}

---
---

## 內元件

### flex

[CodePen Home
Flex 介紹 (flex)](https://codepen.io/Wcc723/pen/BZqrVW)

<div class="flex">
  <div class="item"></div>
  <div class="item flex-2"></div>
  <div class="item"></div>
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
}

.item {
  flex: 1;
  background-color: #f08bc3;
  & + .item {
    margin-left: 15px;
  }
}

.flex-2 {
  flex-grow: 2;
  flex-shrink: 1;
  flex-basis: 0%;
  // 請修改這三個值試試看
  
  background-color: #f08bc3;
}

### align-self

[CodePen Home
Flex 介紹 (align-self)](https://codepen.io/Wcc723/pen/pwMBem)

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item align-self">3</div>
<!--  可打開以下註解增加數量  -->
<!--   <div class="item flex-2">2</div>
  <div class="item">3</div> -->
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  justify-content: space-around;
  align-items: flex-end;
}

.item {
  width: 60px;
  height: 120px;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  width: 120px;
  height: 240px;
  background-color: #f08bc3;
}

.align-self {
  // 修改以下值試試看  auto | flex-start | flex-end | center | baseline | stretch
  align-self: center;
}

### Order

[Flex 介紹 (order)](https://codepen.io/Wcc723/pen/OgKGjw)

<div class="flex">
  <div class="item">1</div>
  <div class="item flex-2">2</div>
  <div class="item order">3</div>
  <div class="item flex-2">4</div>
  <div class="item">5</div>
</div>

.flex {
  display: flex;
  height: 300px;
  padding: 15px;
  background-color: #61a0f8;
  justify-content: space-around;
}

.item {
  flex: 1;
  background-color: #f08bc3;
  margin: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  font-size: 2rem;
}

.flex-2 {
  flex: 2;
  background-color: #f08bc3;
}

.order {
  // 修改以下值試試看
  order: -1;
}