Nếu bạn là người thường xuyên làm việc với Web, thường xuyên đau đầu với việc phải chia layout website của mình như thế nào cho phù hợp, đúng như thiết kế. Bạn đã tìm đến rất nhiều cách để dàn layout cho website của bạn như sử dụng các thuộc tính float hoặc kỹ thuật clear float để chia cột cho website, hay lười hơn nữa là sử dụng các CSS Grid Framework để tiết kiệm thời gian. Nhưng với những cách truyền thống này, sẽ rất tốn thời gian hoặc sử dụng framework thì lại không hề tốt chút nào vì nó sẽ sinh ra rất nhiều nhưng thuộc tính css thừa, gây nặng website và làm ảnh hưởng ít nhiều đến tốc độ load trang. Có 1 kỹ thuật, dàn trang linh hoạt hơn, đơn giản hơn rất nhiều so với 2 phương pháp trên để dàn trang, nếu hiểu được nó, sử dụng thuần thục có lẽ việc chia layout website của bạn sẽ trở nên đơn giản rất nhiều. Nắm được xu hướng đó, chính facebook đã đưa khái niệm flexbox vào trong React Native, việc sử dụng nó sẽ giúp ứng dụng của bạn trở nên bắt mắt hơn, các component được dàn layout đơn giản hơn, sẽ không còn vất vả khi phải viết cssphục vụ cho từng kích thước màn hình như trong các ứng dụng Hybrid App như xưa nữa. Đó chính là Flexbox !

1. Flexbox là gì?

.container { display: flex; }

2. Flex container và Flex items

• Flex container: là thành phần lớn bao quanh các phần tử bên trong, bạn sẽ thiết lập hiển thị theo chiều ngang hoặc chiều dọc khi đó các item bên trong sẽ hiển thị dựa trên thiết lập của container này
  

• Flex item: Các phần tử con của container được gọi là item, ở item bạn có thể thiết lập nó sẽ sử dụng bao nhiêu cột trong một container, hoặc thiết lập thứ tự hiển thị của nó.
  

  Ngoài ra, còn 1 vài khái niệm khi làm việc với flexbox trong react native bạn cần quan tâm đó là
  

• main start, main end: Khi thiết lập flexbox, điểm bắt đầu của container gọi là main start và điểm kết thúc được gọi là main end. Điều này có nghĩa, các item bên trong sẽ hiển thị từ main start đến main end (hoặc là được phép hiển thị đến main end). Và chiều vuông góc của nó là cross start, cross end cũng có ý nghĩa tương tự nhưng luôn vuông góc với main start, main end.
  

• main axis: Trục này là trục chính để điều khiển hướng mà các item sẽ hiển thị. Như bạn thấy ở trên hình main axis là trục dọc nên các item sẽ hiển thị theo chiều dọc, tuy nhiên ta có thể sử dụng thuộc tính flex-direction để thay đổi trục của main axis và lúc đó các item sẽ hiển thị theo nó. Và cross axis luôn là trục vuông góc của main axis.
  

• main size: Bạn có thể hiểu đơn giản là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục main axis.
  

• cross size: Là kích thước (chiều rộng hoặc dọc) của mỗi item dựa theo trục cross axis.
  

3. Sử dụng flexbox trong React Native thế nào

React Native sử dụng giới hạn các thuộc tính và giá trị của Flexbox layout. Nhưng, nó khá là đủ để đáp ứng tất cả các yêu cầu mà chúng ta gặp phải
Điều đầu tiên và sự khác nhau chủ yếu đó là : tất cả những thành phần container trong React Native mặc định là Flexbox Containers, không cần viết thêm code, không cần add thêm các thuộc tính, chỉ cần lấy ra và sử dụng thôi

• Điều thứ 1: Nếu element nào có 1 parent container, element con đó có thể xác định vị trí của nó với thuộc tính của Flex items là : 'align-self' bên trong parent container, nó vẫn là container Flex, các hành vi và thuộc tính của container Flex vẫn được chấp nhận

Ví dụ: Ta có tất cả các hình vuông màu tím đều đặt bên trong 1 Flex Containers parent
Sử dụng thuộc tính 'align-self: flex end' để coi hình vuông màu tím cuối cùng là 1 Flex Containers
mới, lại chứa các thành phần bên trong của riêng nó.

• Điều thứ 2: Thuộc tính Flex sẽ định nghĩa cho Flex Containers cách quản lý khoảng không gian dọc theo Main Axis (trục chính) như thế nào hoặc cách chia sẻ không gian giữa các Flex Containers ra sao.

flex: 1
nội dung sẽ được mở rộng full dọc theo trục chính của thằng cha.

Một vài ví dụ (thằng cha có trục chính là trục thẳng đứng)

Hình bên trái là set flex : 1, hình bên phải là không set flex

Thuộc tính Flex khi được set các giá trị khác nhau sẽ thay thế được thuộc tính 'flex-grow'.
Ví dụ:

first: {
  flex: 3
},
last: {
  flex: 2
}

cho các ô hình vuông màu tìm trong Flex Container cha, ta sẽ được kết quả như sau:

• Thuộc tính Justify-content: thuộc tính này sẽ luôn luôn căn nội dung theo trục Main Axis. Ví dụ như hình bên dưới, các ô vuông màu tím lần lượt được set các giá trị sau: flex-start, flex-end, center, space-around, space-between;

• Thuộc tính Align-items : thuộc tính này sẽ luôn luôn căn nội dung theo trục Cross Axis. Ví dụ như hình bên dưới, các ô vuông màu tím sẽ lần lượt được set các giá trị: flex-start, flex-end, center

Kết luận

Link tham khảo

https://medium.com/the-react-native-log/understanding-react-native-flexbox-layout-7a528200afd4

https://facebook.github.io/react-native/docs/flexbox.html

http://moduscreate.com/aligning-children-using-flexbox-in-react-native/