Flexbox layout (flexDirection, justifyContent, alignItems) in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set the main axis direction to row in a Flexbox container.

React Native

const styles = StyleSheet.create({ container: { flexDirection: '[1]' } });

Drag options to blanks, or click blank then click option'

Arow

Bcolumn

Cwrap

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'column' which arranges items vertically.

Using 'wrap' which controls wrapping, not direction.

Setting flexDirection to row arranges children horizontally.

2fill in blank

medium

Complete the code to center items horizontally inside a Flexbox container.

React Native

const styles = StyleSheet.create({ container: { justifyContent: '[1]' } });

Drag options to blanks, or click blank then click option'

Aflex-end

Bflex-start

Cspace-between

Dcenter

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'flex-start' which aligns items to the start.

Using 'space-between' which spreads items apart.

justifyContent: 'center' centers items along the main axis.

3fill in blank

hard

Fix the error in the code to align items vertically centered in a Flexbox container.

React Native

const styles = StyleSheet.create({ container: { alignItems: '[1]' } });

Drag options to blanks, or click blank then click option'

Acenter

Bleft

Cmiddle

Dtop

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'left' or 'top' which are not valid values for alignItems.

Using 'middle' which is not a valid Flexbox value.

alignItems: 'center' centers items along the cross axis vertically.

4fill in blank

hard

Fill both blanks to create a Flexbox container with vertical layout and items spaced evenly.

React Native

const styles = StyleSheet.create({ container: { flexDirection: '[1]', justifyContent: '[2]' } });

Drag options to blanks, or click blank then click option'

Acolumn

Brow

Cspace-around

Dspace-between

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'row' for flexDirection which arranges items horizontally.

Using 'space-around' which adds space around items, not just between.

Using flexDirection: 'column' arranges items vertically, and justifyContent: 'space-between' spaces them evenly with space between.

5fill in blank

hard

Fill all three blanks to create a horizontal Flexbox container with centered items and space around them.

React Native

const styles = StyleSheet.create({ container: { flexDirection: '[1]', justifyContent: '[2]', alignItems: '[3]' } });

Drag options to blanks, or click blank then click option'

Acolumn

Bcenter

Cspace-around

Drow

Attempts:

3 left

💡 Hint

Common Mistakes

Mixing up flexDirection values.

Using justifyContent or alignItems values that don't center or space items correctly.

flexDirection: 'row' arranges items horizontally, justifyContent: 'space-around' adds space around items along the main axis, and alignItems: 'center' centers items vertically.