@4react/flex 中文文档教程

发布于 4年前 浏览 24 项目主页 更新于 3年前

@4react / flex

React 应用程序的 Flexbox 组件。

alt text

  <Flex row justify="space-between" align="center">
    <Flex alignSelf="start" ... />
    <Flex shrink grow ... />
    <Flex
      column
      alignSelf="stretch"
      grow={2}
      justify="space-between"
      align="center"
    >
      <Flex alignSelf="stretch" ... />
      <Flex ... />
      <Flex alignSelf="end" grow ... />
    </Flex>
  </Flex>

Install

npm i @4react/flex

Flex

通用 div 元素,带有 display: flex

<Flex row justify="space-between" align="center">
  ...
</Flex>
PropTypeDefaultDescription
inlinebooleanfalseTransform in a inline-flex element.
direction'row', 'column''row'Define the main-axis of the container i.e. where the flex items are placed. Corresponding of the flex-direction property (along with the reverse prop).
rowbooleanfalseSet the container main-axis to "horizontal".
columnbooleanfalseSet the container main-axis to "vertical".
reversebooleanfalseReverse the container direction.
justify'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly''start'Alignment of flex items along the main axis. Corresponding of the justify-content property.
align'stretch', 'start', 'end', 'center', 'baseline''stretch'Alignment of flex items along the cross axis on the current line. Corresponding of the align-items property.
lines'stretch', 'start', 'end', 'space-between', 'space-around', 'space-evenly''stretch'Alignment of lines (when there is extra space in the cross-axis). Corresponding of the align-content property.
wrapboolean, 'reverse'falseControls if (and how) items will flow across multiple lines.
classNamestring-Additional className for the component.
styleobject-Additional style object for the component.

Display

Description

// display: flex
<Flex>

// display: inline-flex
<Flex inline>

Direction

说明。

// row
<Flex>
<Flex row
<Flex direction="row">

// row-reverse
<Flex row reverse>
<Flex direction="row" reverse>

// column
<Flex column
<Flex direction="column">

// column-reverse
<Flex column reverse>
<Flex direction="column" reverse>

Justification

描述。

// justify-content
<Flex justify="start">
<Flex justify="center">
<Flex justify="space-between">

// align-items
<Flex align="start">
<Flex align="stretch">
<Flex align="center">

// align-content
<Flex lines="start">
<Flex lines="center">
<Flex lines="space-between">

Wrap

描述。

// nowrap
<Flex>

// wrap
<Flex wrap>

// wrap-reverse
<Flex wrap="reverse">

Flexed

<Flexed grow order={2} />

@4react / flex

Flexbox components for React Applications.

alt text

  <Flex row justify="space-between" align="center">
    <Flex alignSelf="start" ... />
    <Flex shrink grow ... />
    <Flex
      column
      alignSelf="stretch"
      grow={2}
      justify="space-between"
      align="center"
    >
      <Flex alignSelf="stretch" ... />
      <Flex ... />
      <Flex alignSelf="end" grow ... />
    </Flex>
  </Flex>

Install

npm i @4react/flex

Flex

Generic div element with display: flex

<Flex row justify="space-between" align="center">
  ...
</Flex>
PropTypeDefaultDescription
inlinebooleanfalseTransform in a inline-flex element.
direction'row', 'column''row'Define the main-axis of the container i.e. where the flex items are placed. Corresponding of the flex-direction property (along with the reverse prop).
rowbooleanfalseSet the container main-axis to "horizontal".
columnbooleanfalseSet the container main-axis to "vertical".
reversebooleanfalseReverse the container direction.
justify'start', 'end', 'center', 'space-between', 'space-around', 'space-evenly''start'Alignment of flex items along the main axis. Corresponding of the justify-content property.
align'stretch', 'start', 'end', 'center', 'baseline''stretch'Alignment of flex items along the cross axis on the current line. Corresponding of the align-items property.
lines'stretch', 'start', 'end', 'space-between', 'space-around', 'space-evenly''stretch'Alignment of lines (when there is extra space in the cross-axis). Corresponding of the align-content property.
wrapboolean, 'reverse'falseControls if (and how) items will flow across multiple lines.
classNamestring-Additional className for the component.
styleobject-Additional style object for the component.

Display

Description

// display: flex
<Flex>

// display: inline-flex
<Flex inline>

Direction

Description.

// row
<Flex>
<Flex row
<Flex direction="row">

// row-reverse
<Flex row reverse>
<Flex direction="row" reverse>

// column
<Flex column
<Flex direction="column">

// column-reverse
<Flex column reverse>
<Flex direction="column" reverse>

Justification

Description.

// justify-content
<Flex justify="start">
<Flex justify="center">
<Flex justify="space-between">

// align-items
<Flex align="start">
<Flex align="stretch">
<Flex align="center">

// align-content
<Flex lines="start">
<Flex lines="center">
<Flex lines="space-between">

Wrap

Description.

// nowrap
<Flex>

// wrap
<Flex wrap>

// wrap-reverse
<Flex wrap="reverse">

Flexed

<Flexed grow order={2} />
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文