+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+ * {
+ box-sizing: content-box;
+}
+--fcc-editable-region--
+
+.gallery {
+ border: 5px solid red;
+ width: 50%;
+}
+
+img {
+ width: 100%;
+ border: 5px solid blue;
+ padding: 5px;
+}
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
new file mode 100644
index 00000000000..781bfe093d1
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6494da0daf5df5197963671d.md
@@ -0,0 +1,83 @@
+---
+id: 6494da0daf5df5197963671d
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Notice how the blue image border extends beyond the red gallery border. This is due to the way browsers calculate the size of container elements.
+
+The `box-sizing` property is used to set this behavior. By default, the `content-box` model is used. With this model, when an element has a specific width, that width is calculated based only on the element's content. Padding and border values get added to the total width, so the element grows to accommodate these values.
+
+Try setting `box-sizing` to `content-box` explicitly, with the global `*` selector. At this point, you will not see any changes, because you are using the default value.
+
+# --hints--
+
+You should have a `*` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+Your `*` selector should have a `box-sizing` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing);
+```
+
+Your `*` selector should have its `box-sizing` property set to `content-box`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing, 'content-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery {
+ border: 5px solid red;
+ width: 50%;
+}
+
+img {
+ width: 100%;
+ border: 5px solid blue;
+ padding: 5px;
+}
+```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
new file mode 100644
index 00000000000..b62a6d87885
--- /dev/null
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd076a1b33c86d84b4232f.md
@@ -0,0 +1,126 @@
+---
+id: 64dd076a1b33c86d84b4232f
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+In order to better visualize how your elements are sized, adding a border can be helpful.
+
+Give your `.gallery` element a `width` of `50%` and a `border` set to `5px solid red`.
+
+Then give your `img` elements a `width` of `100%`, `padding` set to `5px`, and a `border` set to `5px solid blue`.
+
+# --hints--
+
+You should have a `.gallery` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+Your `.gallery` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.width);
+```
+
+Your `.gallery` selector should have a `width` property set to `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.width, '50%');
+```
+
+Your `.gallery` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery')?.border);
+```
+
+Your `.gallery` selector should have a `border` property set to `5px solid red`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.border, '5px solid red');
+```
+
+You should have an `img` selector.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+Your `img` selector should have a `width` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.width);
+```
+
+Your `img` selector should have a `width` property set to `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.width, '100%');
+```
+
+Your `img` selector should have a `padding` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.padding);
+```
+
+Your `img` selector should have a `padding` property set to `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.padding, '5px');
+```
+
+Your `img` selector should have a `border` property.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('img')?.border);
+```
+
+Your `img` selector should have a `border` property set to `5px solid blue`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('img')?.border, '5px solid blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+
+
+
+
+ Photo Gallery
+
+
+
+
+
css flexbox photo gallery
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
similarity index 58%
rename from curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
rename to curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
index 7db27249482..7b1c43d14af 100644
--- a/curriculum/challenges/english/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/64dd136e4e8b0894f9c70d86.md
@@ -1,30 +1,28 @@
---
-id: 615389bd81347947ea7ba896
-title: Step 11
+id: 64dd136e4e8b0894f9c70d86
+title: Step 10
challengeType: 0
-dashedName: step-11
+dashedName: step-10
---
# --description--
-Flexbox is a one-dimensional CSS layout that can control the way items are spaced out and aligned within a container.
+Now that you have figured out your `box-sizing` approach, you can clean up the CSS you added to see the changes.
-To use it, give an element a `display` property of `flex`. This will make the element a flex container. Any direct children of a flex container are called flex items.
-
-Create a `.gallery` selector and make it a flex container.
+Remove your `.gallery` and `img` selectors, and all rules within.
# --hints--
-You should have a `.gallery` selector.
+You should not have a `.gallery` selector.
```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.gallery'));
```
-Your `.gallery` selector should have a `display` property set to `flex` as the value.
+You should not have an `img` selector.
```js
-assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
+assert.notExists(new __helpers.CSSHelp(document).getStyle('img'));
```
# --seed--
@@ -57,35 +55,25 @@ assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex')
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+