flex-col container.jsx has been added to components

App.js

@@ -16,6 +16,7 @@ import {
 } from './components/Typography';
 import ThirdPartySignIn from './components/ThirdPartySignIn';
 import FlexContainer from './components/FlexContainer';
+import FlexColContainer from './components/FlexColContainer';
 import AddProductCard from './components/AddProductCard';
 import Checkbox from './components/Checkbox';
 import Accordion from './components/Accordion';
@@ -100,6 +101,13 @@ export default function App() {
           <Text>Component 4</Text>
           <Text>Component 5</Text>
         </FlexContainer>
+        <FlexColContainer>
+          <Text>Component 1</Text>
+          <Text>Component 2</Text>
+          <Text>Component 3</Text>
+          <Text>Component 4</Text>
+          <Text>Component 5</Text>
+        </FlexColContainer>
         <Nav />
         <Checkbox label='Vegetarian' isChecked={false} />
       </View>

components/FlexColContainer.jsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+
+const FlexColContainer = ({ children }) => {
+  return <View style={styles.container}>{children}</View>;
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'col',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    paddingHorizontal: 16,
+    paddingVertical: 8,
+    flexWrap: 'wrap',
+    gap: 10,
+  },
+});
+
+export default FlexColContainer;