From 677a1287df8c1a5d6c35f33705be251828daf901 Mon Sep 17 00:00:00 2001
From: tripolskypetr <tripolskypetr@penguin>
Date: Wed, 3 Jul 2019 21:04:15 +0300
Subject: [PATCH] docs

---
 Readme.md           |  40 ++++++++++++++++++++++++++++++++++++++++
 docs/screenshot.png | Bin 0 -> 6515 bytes
 qml/example.qml     |   1 -
 3 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 Readme.md
 create mode 100644 docs/screenshot.png

diff --git a/Readme.md b/Readme.md
new file mode 100644
index 0000000..f25f209
--- /dev/null
+++ b/Readme.md
@@ -0,0 +1,40 @@
+# QML flex layout
+
+Qt quick layout system is real ugly. It would be much more convenient to use flexbox for positioning elements. This repository contains a set of qt quick bindings to the [Yoga](https://github.com/facebook/yoga) layout engine from React Native for rendering flexbox.
+
+![Screenshot](docs/screenshot.png)
+
+```
+import QtQuick 2.5
+import QtQuick.Window 2.0
+
+Window {
+    visible: true
+    height: 400
+    width: 675
+    Rectangle {
+        anchors.fill: parent
+        color: "cyan"
+        Flex {
+            height: parent.height
+            width: parent.width
+            
+            flexDirection: "row"
+            flexWrap: "wrap"
+            justifyContent: "spaceAround"
+            alignItems: "center"
+            alignSelf: "center"
+            alignContent: "stretch"
+
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+            Rectangle { color: "green"; height: 150; width: 150 }
+        }
+    }
+}
+
+```
diff --git a/docs/screenshot.png b/docs/screenshot.png
new file mode 100644
index 0000000000000000000000000000000000000000..d4734eeee3f751e41775ac79b7f341a431ffaeb4
GIT binary patch
literal 6515
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
Unw$mDpDC#DJ(0AQkR<lM0mNN_TmS$7

literal 0
HcmV?d00001

diff --git a/qml/example.qml b/qml/example.qml
index dfd8284..5953c1f 100644
--- a/qml/example.qml
+++ b/qml/example.qml
@@ -17,7 +17,6 @@ Window {
             alignItems: "center"
             alignSelf: "center"
             alignContent: "stretch"
-            flexShrink: 10
             Rectangle { color: "green"; height: 150; width: 150 }
             Rectangle { color: "green"; height: 150; width: 150 }
             Rectangle { color: "green"; height: 150; width: 150 }