Flexbox là một công cụ mạnh mẽ trong CSS cho phép chúng ta tổ chức các phần tử trên trang web của mình một cách linh hoạt và dễ dàng. Với Flexbox, chúng ta có thể xác định cách các phần tử con của một phần tử container sắp xếp, căn chỉnh và phân phối. Trong bài viết này, chúng ta sẽ khám phá Flexbox và cách sử dụng các thuộc tính của nó bằng các mã mẫu và ví dụ cụ thể.

1. Flexbox trong CSS là gì?

Flex trong CSS là một phương pháp layout linh hoạt cho phép chúng ta tổ chức các phần tử trên trang web một cách dễ dàng và hiệu quả. Flexbox (viết tắt của Flexible Box) giúp điều chỉnh và phân phối các phần tử con bên trong một phần tử container một cách linh hoạt và tự động, giúp tạo ra các giao diện đáp ứng và dễ bảo trì.

Với Flexbox, chúng ta có thể:

  • Sắp xếp các phần tử theo ý muốn: Bằng cách sử dụng các thuộc tính như flex-direction, justify-content, và align-items, chúng ta có thể xác định cách các phần tử con được sắp xếp và căn chỉnh.
  • Phân phối không gian một cách linh hoạt: Chúng ta có thể sử dụng các thuộc tính như flex-grow, flex-shrink, và flex-basis để kiểm soát việc phân phối không gian giữa các phần tử con.
  • Xử lý các phần tử con có kích thước không đều: Flexbox tự động điều chỉnh kích thước của các phần tử con để chúng phù hợp với kích thước của phần tử container, giúp tránh các vấn đề như tràn nội dung hoặc khoảng trống không mong muốn.
  • Xử lý các giao diện đa chiều: Flexbox hoạt động hiệu quả với các giao diện có cả chiều ngang và chiều dọc, giúp chúng ta tạo ra các giao diện phức tạp với ít code hơn.

Flexbox là một công cụ mạnh mẽ cho việc thiết kế giao diện web, giúp chúng ta tạo ra các trang web linh hoạt và đáp ứng tốt trên mọi thiết bị.

>>>>> Xem thêm bài viết tương tự:

 

2. Flex container trong CSS

Để bắt đầu sử dụng Flexbox, chúng ta cần chọn một phần tử để làm flex container bằng cách thiết lập thuộc tính display thành flex. Dưới đây là một ví dụ đơn giản:

<style>
    .example-content-demo {
        display: flex;
    }

    .example-content-demo > div {
        background-color: #FF4954;
        color: #FFF;
        padding: 10px 20px;
    }

    .example-content-demo > div:not(:first-child) {
        margin-left: 10px;
    }
</style>

<div class="example-content-demo">
    <div>Flex 1</div>
    <div>Flex 2</div>
    <div>Flex 3</div>
    <div>Flex 4</div>
    <div>Flex 5</div>
</div>

Trong ví dụ trên, chúng ta đã tạo một flex container bằng cách thêm thuộc tính display: flex và phần tử có class .example-content-demo. Lúc này chúng ta có thể thấy rằng các phần tử con bên trong nó sẽ được sắp xếp nằm cạnh nhau:

Flex 1
Flex 2
Flex 3
Flex 4
Flex 5

3. Các thuộc tính của flex container

3.1. Thuộc tính flex-direction

flex-direction được sử dụng để xác định hướng của các phần tử con bên trong flex container.

  • Cú pháp:
.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

Giá trị:

  • row (default): Phần tử con được sắp xếp theo hướng từ trái sang phải.
  • row-reverse: Phần tử con được sắp xếp theo hướng từ phải sang trái.
  • column: Phần tử con được sắp xếp theo hướng từ trên xuống dưới.
  • column-reverse: Phần tử con được sắp xếp theo hướng từ dưới lên trên.

3.2. Thuộc tính flex-wrap

flex-wrap được sử dụng để xác định liệu các phần tử con có được phép xuống dòng hay không và nếu có, thì chúng sẽ xuống dòng theo cách nào.

  • Cú pháp:
.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

Giá trị:

  • nowrap (default): Không cho phép các phần tử con xuống dòng.
  • wrap: Cho phép các phần tử con xuống dòng nếu cần.
  • wrap-reverse: Cho phép các phần tử con xuống dòng theo hướng ngược lại.

3.3. Thuộc tính flex-flow

flex-flow là cú pháp viết tắt kết hợp flex-direction và flex-wrap thành một thuộc tính duy nhất.

  • Cú pháp:
.container {
    flex-flow: <flex-direction> <flex-wrap>;
}

3.4. Thuộc tính justify-content

justify-content được sử dụng để xác định cách các phần tử con được căn chỉnh theo trục chính (thường là trục ngang) của flex container.

  • Cú pháp:
.container {
    justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

Giá trị:

  • flex-start (default): Các phần tử con được căn chỉnh về phía đầu của flex container.
  • flex-end: Các phần tử con được căn chỉnh về phía cuối của flex container.
  • center: Các phần tử con được căn chỉnh ở giữa của flex container.
  • space-between: Các phần tử con được phân bố đều với khoảng trống giữa chúng.
  • space-around: Các phần tử con được phân bố đều với khoảng trống xung quanh chúng.
  • space-evenly: Phân phối không gian giữa các phần tử con một cách đồng đều, bao gồm cả phần không gian ở đầu và cuối của container.

3.5. Thuộc tính align-items

`align-items`` được sử dụng để xác định cách các phần tử con được căn chỉnh theo trục chính (thường là trục dọc) của flex container.

-- Cú pháp:

.container {
    align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}

Giá trị:

  • stretch (default): Các phần tử con được kéo ra sao cho đầy đủ chiều cao của container.
  • flex-start: Các phần tử con được căn chỉnh về phía đầu của container.
  • flex-end: Các phần tử con được căn chỉnh về phía cuối của container.
  • center: Các phần tử con được căn chỉnh ở giữa của container.
  • baseline: Các phần tử con được căn chỉnh theo đường cơ sở của chúng.
  • first baseline: Các phần tử con được căn chỉnh dọc theo dòng cơ sở đầu tiên trong container.
  • last baseline: Các phần tử con được căn chỉnh dọc theo dòng cơ sở cuối cùng trong container.
  • start: Các phần tử con được căn chỉnh về phía đầu của container.
  • end: Các phần tử con được căn chỉnh về phía cuối của container.
  • self-start: Các phần tử con được căn chỉnh về phía đầu của chính nó (bên trái hoặc trên, tùy thuộc vào hướng viết của văn bản).
  • self-end: Các phần tử con được căn chỉnh về phía cuối của chính nó (bên phải hoặc dưới, tùy thuộc vào hướng viết của văn bản).
  • safe: Các phần tử con được căn chỉnh một cách an toàn theo hướng viết của văn bản. Nếu văn bản viết từ trái sang phải, safe sẽ tương đương với start. Nếu văn bản viết từ phải sang trái, safe sẽ tương đương với end.
  • unsafe: Các phần tử con được căn chỉnh một cách không an toàn, không quan tâm đến hướng viết của văn bản. Nó thường được sử dụng khi bạn muốn căn chỉnh các phần tử một cách cố định, không bị ảnh hưởng bởi hướng viết của văn bản.

4. Các thuộc tính của flex item

4.1. Thuộc tính order

order được sử dụng để sắp xếp thứ tự các phần tử bên trong flex container.

  • Cú pháp:
.item {
    order: <number>;
}

4.2. Thuộc tính flex-grow

flex-grow được sử dụng để xác định mức độ mà một phần tử con có thể mở rộng để lấp đầy khoảng trống còn lại trong flex container.

.item {
    flex-grow: <number>;
}

4.3. Thuộc tính flex-shrink

flex-shrink được sử dụng để xác định mức độ mà một phần tử con có thể co lại nếu cần.

.item {
    flex-shrink: <number>;
}

4.4. Thuộc tính flex-basis

flex-basis được sử dụng để xác định kích thước ban đầu của một phần tử con trước khi các phép toán co rút hoặc mở rộng được áp dụng.

.item {
    flex-basis: <length> | auto;
}

4.5. Thuộc tính flex

flex là cú pháp viết tắt kết hợp flex-grow, flex-shrink và flex-basis thành một thuộc tính duy nhất.

.item {
    flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

4.6. Thuộc tính align-self

align-self được sử dụng để căn chỉnh của một phần tử con cụ thể trong một container.

  • Cú pháp:
.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

Giá trị:

  • auto: Phần tử con sẽ kế thừa giá trị của thuộc tính align-items của container.
  • flex-start: Phần tử con được căn chỉnh về phía đầu của container.
  • flex-end: Phần tử con được căn chỉnh về phía cuối của container.
  • center: Phần tử con được căn chỉnh ở giữa của container.
  • baseline: Phần tử con được căn chỉnh theo dòng cơ sở của chúng.
  • stretch: Phần tử con sẽ được kéo ra sao cho đầy đủ chiều cao của container.

Tổng kết

Flexbox trong CSS là một công nghệ mạnh mẽ cho phép chúng ta tổ chức và căn chỉnh các phần tử trên trang web một cách linh hoạt và dễ dàng. Bằng cách sử dụng các thuộc tính như display: flex, justify-content, và align-items, chúng ta có thể tạo ra các giao diện linh hoạt và đáp ứng tốt trên mọi thiết bị. Việc hiểu rõ về Flexbox sẽ giúp chúng ta có thể tối ưu hóa quy trình thiết kế và tạo ra trải nghiệm người dùng tốt hơn.

Stringee Communication APIs là giải pháp cung cấp các tính năng giao tiếp như gọi thoại, gọi video, tin nhắn chat, SMS hay tổng đài CSKH cho phép tích hợp trực tiếp vào ứng dụng/website của doanh nghiệp nhanh chóng. Nhờ đó giúp tiết kiệm đến 80% thời gian và chi phí cho doanh nghiệp bởi thông thường nếu tự phát triển các tính năng này có thể mất từ 1 - 3 năm.

Bộ API giao tiếp của Stringee hiện đang được tin dùng bởi các doanh nghiệp ở mọi quy mô, lĩnh vực ngành nghề như TPBank, VOVBacsi24, VNDirect, Shinhan Finance, Ahamove, Logivan, Homedy, Adavigo, bTaskee…

Quý bạn đọc quan tâm xin mời đăng ký NHẬN TƯ VẤN TẠI ĐÂY:

Banner bottom