diff --git a/examples/justify-content/index.ts b/examples/justify-content/index.ts
new file mode 100644
index 00000000..ca4fce19
--- /dev/null
+++ b/examples/justify-content/index.ts
@@ -0,0 +1 @@
+import './justify-content.js';
diff --git a/examples/justify-content/justify-content.tsx b/examples/justify-content/justify-content.tsx
new file mode 100644
index 00000000..a1b186ae
--- /dev/null
+++ b/examples/justify-content/justify-content.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import {render, Box, Text} from '../../src/index.js';
+
+function JustifyContent() {
+ return (
+
+
+ [
+
+ X
+ Y
+
+ ] flex-start
+
+
+ [
+
+ X
+ Y
+
+ ] flex-end
+
+
+ [
+
+ X
+ Y
+
+ ] center
+
+
+ [
+
+ X
+ Y
+
+ ] space-around
+
+
+ [
+
+ X
+ Y
+
+ ] space-between
+
+
+ [
+
+ X
+ Y
+
+ ] space-evenly
+
+
+ );
+}
+
+render();
diff --git a/readme.md b/readme.md
index 4454f30d..4dd514d1 100644
--- a/readme.md
+++ b/readme.md
@@ -837,7 +837,7 @@ See [align-self](https://css-tricks.com/almanac/properties/a/align-self/).
##### justifyContent
Type: `string`\
-Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around`
+Allowed values: `flex-start` `center` `flex-end` `space-between` `space-around` `space-evenly`
See [justify-content](https://css-tricks.com/almanac/properties/j/justify-content/).
@@ -868,6 +868,12 @@ See [justify-content](https://css-tricks.com/almanac/properties/j/justify-conten
Y
// [ X Y ]
+
+
+ X
+ Y
+
+// [ X Y ]
```
#### Visibility
diff --git a/src/styles.ts b/src/styles.ts
index f465299a..f10ed4c0 100644
--- a/src/styles.ts
+++ b/src/styles.ts
@@ -152,6 +152,7 @@ export type Styles = {
| 'flex-end'
| 'space-between'
| 'space-around'
+ | 'space-evenly'
| 'center';
/**
@@ -483,6 +484,10 @@ const applyFlexStyles = (node: YogaNode, style: Styles): void => {
if (style.justifyContent === 'space-around') {
node.setJustifyContent(Yoga.JUSTIFY_SPACE_AROUND);
}
+
+ if (style.justifyContent === 'space-evenly') {
+ node.setJustifyContent(Yoga.JUSTIFY_SPACE_EVENLY);
+ }
}
};
diff --git a/test/flex-justify-content.tsx b/test/flex-justify-content.tsx
index bd0e5091..3227781c 100644
--- a/test/flex-justify-content.tsx
+++ b/test/flex-justify-content.tsx
@@ -57,6 +57,17 @@ test('row - align two text nodes on the edges', t => {
t.is(output, 'A B');
});
+test('row - space evenly two text nodes', t => {
+ const output = renderToString(
+
+ A
+ B
+ ,
+ );
+
+ t.is(output, ' A B');
+});
+
// Yoga has a bug, where first child in a container with space-around doesn't have
// the correct X coordinate and measure function is used on that child node
test.failing('row - align two text nodes with equal space around them', t => {