flex學習總結

參考資料：

座標軸

divContainer: {
  display: flex;
  flex-direction: row-reverse;
}
// 延申：
// 1.寫在contaniner有6個屬性：3個flex-，2個align-，1個justify-content
// 2.flex-direction: row(默認) | row-reverse | column | column-revers
// 3.flex-direction: row-reverse與justify-content: flex-end的區別
//   flex-direction: row-reverse座標軸反轉，123 -> 321排列
//   justify-content: flex-end座標軸不反轉，123 -> 123排列

排列

// 左對齊
divContainer: {
  display: flex;
  justify-content: flex-start;
}

// 右對齊
divContainer: {
  display: flex;
  justify-content: flex-end;
}

// 居中對齊
divContainer: {
  display: flex;
  justify-content: center;
}

// 底部對齊
divContainer: {
  display: flex;
  align-item: flex-end;
}

// 只需要3號元素底部對齊
divContainer: {
  display: flex;
}

divContainer:nth-child(2): {
  align-self: flex-end;
}

// 平均剩餘空間
divContainer: {
  display: flex;
  justify-content: space-around;
}

// 左右先貼邊，再平均剩餘空間
divContainer: {
  display: flex;
  justify-content: space-between;
}

// 左右先貼邊，再平均剩餘空間
divContainer: {
  display: flex;
  justify-content: space-between;
}

// 排列超過行內寬度後，元素自動換行
divContainer: {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap
}

// 在父元素中水平垂直方向都居中對齊，並且元素水平排列
divContainer: {
  display: flex;
  justify-content: center;
  align-item: center;
}

// 在父元素中水平垂直方向都居中對齊，並且元素垂直排列
divContainer: {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-item: center;
}

// 上下先貼邊，再平均剩餘空間
divContainer: {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: space-between;
}

// 水平方向子元素自動換行
divContainer: {
  display: flex;
  /*flex-direction: row;
  flex-wrap: wrap;*/
  flex-flow: row wrap; // 合併成一句
}

// 延申：
// 1.flex默認nowrap，當增加子元素，子元素寬度會被壓縮
// 2.align-content：作用於y軸多行的情況，單行無效
// 3.align-item: 作用於y軸單行的情況
// 4.flex-flow = flex-direction + flex-wrap

空間分配

// <div>
//   <span>1</span>
//   <span>2</span>
//   <span>3</span>
// </div>
// 子元素沒有寬度，要求子元素平均分配父元素的寬度
divContainer: {
  display: flex;
}
divContainer item: {
  flex: 1;
}

// 前後兩個元素固定寬度，要求中間元素自動撐滿寬度
divContainer: {
  display: flex;
  width: 60%;
}
divContainer:nth-child(0) {
  width: 50px;
}
divContainer:nth-child(1) {
  flex: 1;
}
divContainer:nth-child(2) {
  width: 50px;
}

// 延申：
//   1.flex定義在子元素上，表示佔剩餘寬度的多少份
//   2.比如上面的需求：子元素沒有寬度，要求子元素平均分配父元素的寬度
//       (1)剩餘寬度就是父元素的寬度
//       (2)設置子元素flex:1就是平均每個子元素都是佔一份
//   3.nth-child(0)與nth-child(1)設置flex:1,nth-child(1)設置flex:2
//     那就是父元素被平均分成4份，nth-child(1)佔兩份