

flex sẽ xác định cách các item của bạn sẽ “lấp đầy” không gian có sẵn dọc theo trục chính của bạn. Không gian sẽ được phân chia theo thuộc tính flex của từng phần tử.
Trong ví dụ sau, các chế độ xem màu đỏ, cam và xanh lục đều là các chế độ xem con trong chế độ xem vùng chứa có flex: 1 bộ. Chế độ xem màu đỏ sử dụng flex: 1 , chế độ xem màu cam sử dụng flex: 2 và chế độ xem màu lục sử dụng flex: 3 . 1+2+3 = 6, có nghĩa là chế độ xem màu đỏ sẽ chiếm 1/6 không gian, màu cam chiếm 2/6 diện tích và màu xanh lục chiếm 3/6 diện tích.
import React from 'react';
import {StyleSheet, View} from 'react-native';
const Flex = () => {
return (
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 20,
},
});
export default Flex;
flexDirection kiểm soát hướng của các phần tử con. Đây cũng được gọi là trục chính. Trục phụ là trục vuông góc với trục chính hoặc trục mà các đường bao được bố trí
Justify Content: Quy định sự phân bổ vị trí các component con theo trục tọa độ :
các component con sẽ được phân bổ theo vị trí đầu, cuối, có khoảng trắng ở giữa hoặc trung tâm.(flex-start, flex-end, center, space-between, space-around, space-evenly)
Align Items: Quy định sự phân bổ vị trí các component con theo trục tọa độ thứ hai:
bao gồm : stretch, flex-start, flex-end, center, baseline
Thuộc tính Align Self gần giống với Align Items, nhưng sẽ được set ở view con, tác động đến chính nó trên hệ quy chiếu là view cha. Align Self sẽ có độ ưu tiêsn cao hơn Align Item
live demo
Khi tổng chiều dài hoặc chiều rộng của các items trong view lớn hơn view cha thì chúng có thể được cắt thành một hàng hoặc cột mới.
Xác định vị trí của một phần tử xác định cách nó được định vị trong phần tử cha của nó.(Phần này giống với css web)
XEM LIVE NHÉ