將製作ejcees(中國象棋打譜程式)

分享和讨论Javascript相关的话题
回复
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4659
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 172 次
被圈友点赞: 201 次
联系:

Re: 將製作ejcees(中國象棋打譜程式)

帖子 ejsoon »

https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4659
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 172 次
被圈友点赞: 201 次
联系:

Re: 將製作ejcees(中國象棋打譜程式)

帖子 ejsoon »

https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4659
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 172 次
被圈友点赞: 201 次
联系:

Re: 將製作ejcees(中國象棋打譜程式)

帖子 ejsoon »

https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4659
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 172 次
被圈友点赞: 201 次
联系:

Re: 將製作ejcees(中國象棋打譜程式)

帖子 ejsoon »

css的flex能否實現每個子元素平均横向分成幾塊,然後子元素在這個塊的中間?


chatgpt:

代码: 全选

可以的。**Flex 很適合做這種「平均分塊 + 子元素居中」的布局**。常見有兩種寫法。

---

## 方法一:`flex: 1` 平均分配寬度(最常用)

每個子元素設置 `flex:1`,它們就會把父容器**平均分成 N 塊**。
然後在每個子元素內部再做居中即可。

```css
.container{
  display:flex;
}

.item{
  flex:1;                 /* 每個元素平均分配寬度 */
  display:flex;
  justify-content:center; /* 水平居中 */
  align-items:center;     /* 垂直居中 */
}
```

HTML:

```html
<div class="container">
  <div class="item">A</div>
  <div class="item">B</div>
  <div class="item">C</div>
</div>
```

效果:

```
|   A   |   B   |   C   |
```

每個 `.item` 都是等寬的一塊,內容在塊中央。

---

## 方法二:固定 N 塊(例如 5 等分)

如果你想**始終分成固定幾塊**,可以用 `flex-basis`:

```css
.container{
  display:flex;
}

.item{
  flex:0 0 20%;   /* 100% / 5 = 20% */
  text-align:center;
}
```

---

## 方法三:只讓元素自己居中(不用內部 flex)

如果只需要**文字居中**:

```css
.item{
  flex:1;
  text-align:center;
}
```

---

## 補充:如果子元素寬度不固定

如果子元素本身有寬度,但希望**在各自區域中間**,那麼一定要讓 `.item` 變成容器:

```css
.item{
  flex:1;
  display:flex;
  justify-content:center;
}
```

---

💡 **總結**

最標準的寫法就是:

```css
.container{ display:flex; }
.item{
  flex:1;
  display:flex;
  justify-content:center;
  align-items:center;
}
```

---

如果你需要,我還可以講一個 **「很多人不知道但更優雅的 flex 寫法」**:
只用 **一行 CSS 就能自動平均分塊且居中**(很適合做工具欄、導航欄)。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
头像
ejsoon
圈圈精英
圈圈精英
帖子: 4659
注册时间: 2022年 11月 18日 17:36
为圈友点赞: 172 次
被圈友点赞: 201 次
联系:

Re: 將製作ejcees(中國象棋打譜程式)

帖子 ejsoon »

去掉按鈕的hover效果。

帥五進一而非進五。
https://ejsoon.vip/
弈趣極光:享受思維樂趣
回复

在线用户

正浏览此版面之用户: 没有注册用户 和 2 访客