Hiển thị: flex css

Thuộc tính hộp linh hoạt

Flex là giá trị của màn hình css. Bằng cách sử dụng flex hiển thị trong các phần tử cha, các phần tử con sẽ tự động căn chỉnh như cột hoặc hàng với chiều rộng tự động và chiều cao tự động

Thuộc tính của flex container

1. hiển thị ( flex hoặc inline-flex )
2. hướng uốn
3. uốn dẻo
4. dòng chảy linh hoạt
5. biện minh cho nội dung
6. sắp xếp các mục
7. căn chỉnh nội dung

Thuộc tính của các mục linh hoạt (con của vùng chứa)

1. trật tự
2. uốn cong
3. uốn cong
4. flex-cơ bản
5. uốn cong
6. tự sắp xếp

Màn hình linh hoạt

Display flex là thuộc tính của flex container để sử dụng flexbox. Thuộc tính CSS Display có thể có giá trị flex hoặc inline-flex. Bằng cách sử dụng flex hiển thị hoặc inline-flex cho vùng chứa chính, phần tử con sẽ tự động kích hoạt ngữ cảnh flex

Thay đổi màn hình flex

Chặn Linh hoạt

Mục 1

Mục 2

Mục 3

mục 4

    
    
Item 1
    
    
Item 2
    
    
Item 3
    
    
Item 4
    
    

Hướng linh hoạt

Thuộc tính Flex Direction được cấp cho bộ chứa flex để thay đổi hướng của các mục flex. Theo mặc định, hướng flex là hàng

Giá trị Flex Directions

1. hàng (mặc định)
2. đảo ngược hàng
3. cột
4. đảo ngược cột

Thay đổi hướng Flex

hàng đảo hàng cột đảo cột

Mục 1

Mục 2

Mục 3

mục 4

    
    
Item 1
    
    
Item 2
    
    
Item 3
    
    
Item 4
    
    

Flex Wrap

Các mục linh hoạt theo mặc định sẽ nằm trong một hàng. bọc flex được sử dụng để cho phép các mục được bọc trong dòng tiếp theo hoặc bọc ngược lại

Giá trị Flex Wrap

1. nowrap (mặc định)
2. bọc ( bọc trong dòng tiếp theo)
3. quấn ngược (nhiều dòng nhưng ngược từ dưới lên trên)

Thay đổi bọc Flex

nowrap bọc bọc đảo ngược

Mục 1

Mục 2

Mục 3

mục 4

mục 5

mục 6

mục 7

mục 8

mục 9

mục 10

mục 11

mục 12

mục 13

mục 14

mục 15

mục 16

    
    
Item 1
    
    
Item 2
    
    
Item 3
    
    
Item 4
    
    
Item 5
    
    
Item 6
    
    
Item 7
    
    
Item 8
    
    
Item 9
    
    
Item 10
    
    
Item 11
    
    
Item 12
    
    
Item 13
    
    
Item 14
    
    
Item 15
    
    
Item 16
    
    

Luồng linh hoạt

luồng flex là cách viết tắt của các thuộc tính flex-direction và flex-wrap. Giá trị mặc định là row nowrap

Mục 1

Mục 2

Mục 3

mục 4

    
    
Item 1
    
    
Item 2
    
    
Item 3
    
    
Item 4
    

Căn chỉnh nội dung

thuộc tính justify-content được sử dụng để biện minh cho nội dung trong trục chính. Điều này có thể điều chỉnh các mục sang trái, giữa, phải hoặc thêm khoảng trắng ở giữa

giá trị nội dung biện minh

1. khởi động linh hoạt (mặc định)
2. kết thúc uốn cong
3. trung tâm
4. không gian giữa
5. không gian xung quanh
6. không gian đều

Thay đổi nội dung biện minh

flex-start flex-end không gian trung tâm-giữa không gian-xung quanh không gian-đồng đều

Mục 1

Mục 2

Mục 3

    
    
Item 1
    
    
Item 2 bigger
    
    
Item 3
      
    

Căn chỉnh các mục

Thuộc tính Align-items xác định hành vi của cách mục linh hoạt được bố trí trên trục ngang. Theo mặc định, giá trị được kéo dài

Giá trị của align-item

1. căng ra
2. khởi động linh hoạt
3. kết thúc uốn cong
4. trung tâm
5. đường cơ sở

kéo dài flex-bắt đầu flex-end đường cơ sở trung tâm

1

2

3

    
    
 1 
    
    
 2 
    
    
 3 
      
                      
                  

trật tự

thuộc tính order của mục flex đặt thứ tự chúng xuất hiện trong vùng chứa chính. Thứ tự mặc định là 0. giá trị của đơn đặt hàng luôn luôn là một con số

Theo mặc định, tất cả các mục flex đều theo thứ tự luồng tài liệu

1

2

3

    
    
 1 
    
    
 2 
    
    
 3 
      
            
        

uốn cong

thuộc tính flex-grow của mục flex xác định khả năng tăng trưởng. Giá trị mặc định cho tất cả các mục linh hoạt là 0

Flex-grow 0 có nghĩa là chiều rộng của mục flex chỉ theo nội dung

Flex-grow 1 có nghĩa là chiều rộng của vật phẩm linh hoạt sẽ được phân bổ đều cho tất cả các vật phẩm

phát triển linh hoạt. 0 1

1

2

3

    
    
 1 
    
    
 2 
    
    
 3 
      
            
        

1

2

3

co giãn linh hoạt

Thuộc tính Flex Shrink của mục flex xác định khả năng co lại nếu cần. Giá trị mặc định của flex-shrink là 1. Giá trị có thể là bất kỳ giá trị dương nào hoặc 0

co giãn linh hoạt. 0 1

Cột

Cột

Cột

Cột

Cột

Cột

Cột

Cột

    
    
Column
    
    
Column
    
    
Column
    
    
Column
    
    
Column
    
    
Column
    
    
Column
    
    
Column
    
            
        

Cơ sở linh hoạt

thuộc tính flex-basis của mục flex xác định chiều rộng mặc định của mục trước trong %age, px, em hoặc rem. Giá trị mặc định của flex-basis là auto. Chúng ta có thể gán giá trị cho flex-shrink dựa trên tỷ lệ phần trăm được yêu cầu. Ví dụ: 20% có nghĩa là chiều rộng của mục sẽ là 20% và tổng chiều rộng của các mục khác sẽ là 80%

1

2

    
    
Item 1
    
    
Item 2
    
    
Item 3
    
    
Item 4
    
    

uốn cong

flex là viết tắt của flex-grow, flex-shrink và flex-basis. Giá trị mặc định của flex là 0 1 0%. Giá trị đầu tiên, tôi. e flex-grow là bắt buộc và hai cái khác là tùy chọn