Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

docs(cn): translate utilities/positioning.md #104

Merged
merged 2 commits into from
Oct 16, 2021
Merged

docs(cn): translate utilities/positioning.md #104

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
62fa44f
docs(cn): translate utilities/positioning.md
watonyweng Oct 11, 2021
328741a
docs(cn): update utilities/positioning.md
watonyweng Oct 14, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 44 additions & 44 deletions utilities/positioning.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
# Positioning
# Positioning {#positioning}

## Order
## Order {#order}

Utilities for controlling the order of flex and grid items.
用于控制 flex 和 grid 子条目顺序的工具类。

<PlaygroundWithVariants
variant='5'
Expand Down Expand Up @@ -44,9 +44,9 @@ export default {

</Customizing>

## Justify Content
## Justify Content {#justify-content}

Utilities for controlling how flex and grid items are positioned along a container's main axis.
用于控制 flex 和 grid 子条目如何沿容器主轴定位的工具类。

<PlaygroundWithVariants
variant='start'
Expand All @@ -62,9 +62,9 @@ Utilities for controlling how flex and grid items are positioned along a contain
&lt;/div&gt;'
/>

## Justify Items
## Justify Items {#justify-items}

Utilities for controlling how grid items are aligned along their inline axis.
用于控制网格子条目沿其行内轴对齐的工具类。

<PlaygroundWithVariants
variant='auto'
Expand All @@ -85,9 +85,9 @@ Utilities for controlling how grid items are aligned along their inline axis.
&lt;/div&gt;'
/>

## Justify Self
## Justify Self {#justify-self}

Utilities for controlling how an individual grid item is aligned along its inline axis.
用于控制单个网格子条目沿其行内轴对齐的工具类。

<PlaygroundWithVariants
variant='auto'
Expand All @@ -108,9 +108,9 @@ Utilities for controlling how an individual grid item is aligned along its inlin
&lt;/div&gt;'
/>

## Align Content
## Align Content {#align-content}

Utilities for controlling how rows are positioned in multi-row flex and grid containers.
用于控制行在多行 flex 和 grid 容器中定位的工具类。

<PlaygroundWithVariants
variant='center'
Expand All @@ -129,9 +129,9 @@ Utilities for controlling how rows are positioned in multi-row flex and grid con
&lt;/div&gt;'
/>

## Align Items
## Align Items {#align-items}

Utilities for controlling how flex and grid items are positioned along a container's cross axis.
用于控制 flex 和 grid 子条目沿容器的交叉轴定位的工具类。

<PlaygroundWithVariants
variant='start'
Expand All @@ -147,9 +147,9 @@ Utilities for controlling how flex and grid items are positioned along a contain
&lt;/div&gt;'
/>

## Align Self
## Align Self {#align-self}

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.
用于控制单个 flex 和 grid 子条目沿其容器的交叉轴定位的工具类。

<PlaygroundWithVariants
variant='center'
Expand All @@ -165,9 +165,9 @@ Utilities for controlling how an individual flex or grid item is positioned alon
&lt;/div&gt;'
/>

## Place Content
## Place Content {#place-content}

Utilities for controlling how content is justified and aligned at the same time.
用于控制内容同时有序对齐的工具类。

<PlaygroundWithVariants
variant='center'
Expand All @@ -186,9 +186,9 @@ Utilities for controlling how content is justified and aligned at the same time.
&lt;/div&gt;'
/>

## Place Items
## Place Items {#place-items}

Utilities for controlling how items are justified and aligned at the same time.
用于控制子条目同时有序对齐的工具类。

<PlaygroundWithVariants
variant='auto'
Expand All @@ -207,9 +207,9 @@ Utilities for controlling how items are justified and aligned at the same time.
&lt;/div&gt;'
/>

## Place Self
## Place Self {#place-self}

Utilities for controlling how an individual item is justified and aligned at the same time.
用于控制单独条目同时有序对齐的工具类。
watonyweng marked this conversation as resolved.
Show resolved Hide resolved

<PlaygroundWithVariants
variant='auto'
Expand All @@ -228,9 +228,9 @@ Utilities for controlling how an individual item is justified and aligned at the
&lt;/div&gt;'
/>

## Position
## Position {#position}

Utilities for controlling how an element is positioned in the DOM.
用于控制元素在 DOM 中位置的工具类。
watonyweng marked this conversation as resolved.
Show resolved Hide resolved

<PlaygroundWithVariants
variant='static'
Expand All @@ -249,11 +249,11 @@ Utilities for controlling how an element is positioned in the DOM.
&lt;p&gt;Far out in the uncharted backwaters of the unfashionable end of the western spiral arm of the Galaxy lies a small unregarded yellow sun. Orbiting this at a distance of roughly ninety-two million miles is an utterly insignificant little blue green planet whose ape-descended life forms are so amazingly primitive that they still think digital watches are a pretty neat idea.&lt;/p&gt; '
/>

## Top / Right / Bottom / Left
## Top / Right / Bottom / Left {#top-right-bottom-left}

Utilities for controlling the placement of positioned elements.
用于控制元素位置的工具类。
watonyweng marked this conversation as resolved.
Show resolved Hide resolved

### Inset
### Inset {#inset}

<PlaygroundWithVariants
variant='4'
Expand All @@ -280,7 +280,7 @@ export default {

</Customizing>

### Inset Y
### Inset Y {#inset-y}

<PlaygroundWithVariants
variant='4'
Expand All @@ -292,7 +292,7 @@ export default {
html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
/>

### Inset X
### Inset X {#inset-x}

<PlaygroundWithVariants
variant='4'
Expand All @@ -305,7 +305,7 @@ export default {
/>


### Top
### Top {#top}

<PlaygroundWithVariants
variant='4'
Expand All @@ -318,7 +318,7 @@ export default {
/>


### Right
### Right {#right}

<PlaygroundWithVariants
variant='4'
Expand All @@ -330,7 +330,7 @@ export default {
html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
/>

### Bottom
### Bottom {#bottom}

<PlaygroundWithVariants
variant='4'
Expand All @@ -342,7 +342,7 @@ export default {
html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
/>

### Left
### Left {#left}

<PlaygroundWithVariants
variant='4'
Expand All @@ -354,9 +354,9 @@ export default {
html='&lt;div class="absolute {class} bg-green-400 rounded-md p-2 text-center max-w-24 h-8"&gt;{class}&lt;/div&gt;'
/>

## Floats
## Floats {#floats}

Utilities for controlling the wrapping of content around an element.
用于控制元素浮动的工具类。

<PlaygroundWithVariants
variant='left'
Expand All @@ -369,9 +369,9 @@ Utilities for controlling the wrapping of content around an element.
As much mud in the streets as if the waters had but newly retired from the face of the earth, and it would not be wonderful to meet a Megalosaurus, forty feet long or so, waddling like an elephantine lizard up Holborn Hill.'
/>

## Clear
## Clear {#clear}

Utilities for controlling the wrapping of content around an element.
用于控制元素取消浮动的工具类。

<PlaygroundWithVariants
variant='left'
Expand All @@ -387,9 +387,9 @@ As much mud in the streets as if the waters had but newly retired from the face
&lt;/div&gt;'
/>

## Isolation
## Isolation {#isolation}

Utilities for controlling whether an element should explicitly create a new stacking context. These utilities are especially helpful when used in conjunction with [mix-blend-mode](/utilities/effects#mix-blend-mode) and [z-index](#z-index).
用于控制元素是否显式创建新上下文的工具类。这些工具类与 [mix-blend-mode](/utilities/effects#mix-blend-mode) 和 [z-index](#z-index) 结合使用时特别有用。

<PlaygroundWithVariants
variant='isolate'
Expand All @@ -404,9 +404,9 @@ Utilities for controlling whether an element should explicitly create a new stac
&lt;/div&gt;'
/>

## Object Fit
## Object Fit {#object-fit}

Utilities for controlling how a replaced element's content should be resized.
用于控制替换元素内容如何调整大小的工具类。

<PlaygroundWithVariants
variant='cover'
Expand All @@ -418,9 +418,9 @@ Utilities for controlling how a replaced element's content should be resized.
&lt;/img&gt;'
/>

## Object Position
## Object Position {#object-position}

Utilities for controlling how a replaced element's content should be positioned within its container.
用于控制替换元素在其容器中如何定位的工具类。

<PlaygroundWithVariants
variant='bottom'
Expand Down Expand Up @@ -456,9 +456,9 @@ export default {

</Customizing>

## Z-Index
## Z-Index {#z-index}

Utilities for controlling the stack order of an element.
用于控制元素在堆栈顺序的工具类。

<PlaygroundWithVariants
variant='auto'
Expand Down