chore(zh-cn): Move CSS examples p1 - flexbox & box alignment (#24473)

* chore(zh-cn): Move CSS examples p1 - flexbox & box alignment

files/zh-cn/web/css/css_box_alignment/box_alignment_in_flexbox/index.md

@@ -1,5 +1,5 @@
 ---
-title: Box alignment in Flexbox
+title: 弹性盒布局中的盒对齐方式
 slug: Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox
 ---
 
@@ -11,7 +11,37 @@ slug: Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox
 
 在此示例中，使用{{cssxref("justify-content")}}在主轴上对齐三个弹性元素（flex items），并使用{{cssxref("align-items")}}在十字轴上对齐。第一个元素通过将{{cssxref("align-self")}}设置为居中来覆盖在父元素设置的 align-items 值。
 
-{{EmbedGHLiveSample("css-examples/box-alignment/overview/flex-align-items.html", '100%', 500)}}
+```html live-sample___flex-align-items
+<div class="box">
+  <div>一</div>
+  <div>二</div>
+  <div>三 <br />具有 <br />额外的 <br />文本</div>
+</div>
+```
+
+```css hidden live-sample___flex-align-items
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___flex-align-items
+.box {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box :first-child {
+  align-self: center;
+}
+```
+
+{{EmbedLiveSample("flex-align-items")}}
 
 ## 轴 与 flex-direction
 
@@ -46,7 +76,36 @@ Flexbox 与文档的写入模式有关，因此如果你使用英语并将{{cssx
 
 通过在一组弹性项目中的一个项目上设置 auto 的{{cssxref("margin")}}全部对齐以开始，我们可以创建拆分导航。这适用于 Flexbox 和对齐属性。一旦没有可用于自动边距的空间，该项目的行为与所有其他弹性项目的行为相同，并且收缩以尝试适合空间。
 
-{{EmbedGHLiveSample("css-examples/box-alignment/flexbox/auto-margins.html", '100%', 500)}}
+```html live-sample___auto-margins
+<div class="box">
+  <div>一</div>
+  <div>二</div>
+  <div>三</div>
+  <div class="push">四</div>
+  <div>五</div>
+</div>
+```
+
+```css hidden live-sample___auto-margins
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___auto-margins
+.box {
+  display: flex;
+  border: 2px dotted rgb(96 139 168);
+}
+.push {
+  margin-left: auto;
+}
+```
+
+{{EmbedLiveSample("auto-margins")}}
 
 ## `gap` 属性
 
@@ -60,12 +119,46 @@ Flexbox 与文档的写入模式有关，因此如果你使用英语并将{{cssx
 
 在纵轴上，`row-gap`属性将在相邻的子元素之间创建间距，因此还必须将`flex-wrap`设置为`wrap`,以使其具有任何效果。
 
-> [!NOTE]
-> 从 Firefox 63 开始，Firefox 是唯一实现 Flexbox gap 属性的浏览器。
-
-## Reference
-
-### CSS Properties
+```html live-sample___gap
+<div class="box">
+  <div>一</div>
+  <div>二</div>
+  <div>三</div>
+  <div>四</div>
+  <div>五</div>
+  <div>六</div>
+</div>
+```
+
+```css hidden live-sample___gap
+.box > * {
+  padding: 20px;
+  border: 2px solid rgb(96 139 168);
+  border-radius: 5px;
+  background-color: rgb(96 139 168 / 0.2);
+}
+```
+
+```css live-sample___gap
+.box {
+  width: 450px;
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: 10px;
+  column-gap: 2em;
+  border: 2px dotted rgb(96 139 168);
+}
+
+.box > * {
+  flex: 1;
+}
+```
+
+{{EmbedLiveSample("gap")}}
+
+## 参考
+
+### CSS 属性
 
 - {{cssxref("justify-content")}}
 - {{cssxref("align-content")}}
@@ -78,17 +171,11 @@ Flexbox 与文档的写入模式有关，因此如果你使用英语并将{{cssx
 - {{cssxref("column-gap")}}
 - {{cssxref("gap")}}
 
-### Glossary Entries
-
-- {{Glossary("Cross axis")}}
-- {{Glossary("Main axis")}}
-
-## Guides
+### 术语条目
 
-- [Alignment in flexbox](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)
+- {{Glossary("Cross axis", "交叉轴")}}
+- {{Glossary("Main axis", "主轴")}}
 
-## External Resources
+## 指南
 
-- [Box alignment cheatsheet](https://rachelandrew.co.uk/css/cheatsheets/box-alignment)
-- [CSS Grid, Flexbox and Box Alignment](https://www.smashingmagazine.com/2016/11/css-grids-flexbox-box-alignment-new-layout-standard/)
-- [Thoughts on partial implementations of Box Alignment](https://blogs.igalia.com/jfernandez/2017/05/03/can-i-use-css-box-alignment/)
+- [弹性盒布局中的对齐方式](/zh-CN/docs/Web/CSS/CSS_flexible_box_layout/Aligning_items_in_a_flex_container)