Các hàm xử lý chuỗi trong Javascript (cắt / tách / nối chuỗi ..) 
Chia lấy phần dư / chia lấy phần nguyên trong javascript 
Các sự kiện (Event) trong Javascript 
Các cách khai báo biến trong Javascript 
Bắt sự kiện click trong Javascript 
Hướng tạo thanh search bar bằng CSS 
Hàm Array splice() trong Javascript 
Cách khai báo biến trong PHP, các loại biến thường gặp 
Download và cài đặt Vertrigo Server 
Thẻ li trong HTML 
Thẻ article trong HTML5 
Cấu trúc HTML5: Cách tạo template HTML5 đầu tiên 
Cách dùng thẻ img trong HTML và các thuộc tính của img 
Thẻ a trong HTML và các thuộc tính của thẻ a thường dùng Flex Basis trong Tailwind CSS
Tính năng Flex Basis trong Tailwind CSS và tìm hiểu cách nó giúp tối ưu hóa trải nghiệm người dùng của bạn! Đừng bỏ lỡ bài viết này nếu bạn muốn trở thành một front-end chuyên nghiệp.
Flex Basis là một trong những thuộc tính quan trọng trong Tailwind CSS, cho phép bạn thiết lập độ rộng ban đầu của một phần tử trong một bố cục flexbox. Khi sử dụng flexbox để xây dựng bố cục trang web, việc thiết lập kích thước của các phần tử trong bố cục có thể trở nên phức tạp.
Tuy nhiên, với Flex Basis, bạn có thể dễ dàng xác định độ rộng ban đầu của một phần tử trong một bố cục flexbox một cách nhanh chóng và dễ dàng. Thuộc tính này cũng hỗ trợ đa dạng các đơn vị đo lường, từ pixel đến phần trăm, giúp bạn có thể tùy chỉnh kích thước cho phù hợp với yêu cầu của dự án của mình.
Trong bài viết này, chúng ta sẽ tìm hiểu sâu hơn về cách sử dụng Flex Basis trong Tailwind CSS để xây dựng các bố cục tuyệt vời cho trang web của bạn.
Bài viết này được đăng tại [free tuts .net]
1. Flex Basis trong Tailwind CSS là gì?
Flex basis là một công cụ rất linh hoạt có thể được sử dụng để tạo ra một loạt các bố cục và thiết kế khác nhau. Bằng cách điều khiển kích thước ban đầu của các mục flex, các nhà thiết kế web có thể đảm bảo rằng thiết kế của họ trông tuyệt vời và hoạt động hoàn hảo trên tất cả các thiết bị, bất kể kích thước màn hình hoặc độ phân giải của chúng.
Ngoài tính linh hoạt, flex basis cũng rất dễ sử dụng. Nó có thể được áp dụng cho bất kỳ phần tử nào trên trang web chỉ với vài dòng mã, làm cho nó trở thành một công cụ rất truy cập cho các nhà thiết kế web ở mọi cấp độ kinh nghiệm.
Tổng thể, flex basis là một công cụ cần thiết cho bất kỳ nhà thiết kế web nào muốn tạo ra các trang web đáp ứng và hấp dẫn về mặt trực quan. Với tính dễ sử dụng và tính linh hoạt của nó, nó chắc chắn sẽ trở thành một công cụ cốt lõi trong thiết kế web hiện đại trong nhiều năm tới.
2. Các thuộc tính của Flex Basis trong Tailwind CSS
Tailwind CSS cung cấp một số giá trị sẵn có cho class Flex Basis, được liệt kê trong bảng dưới đây:
|
Class
|
Properties
|
|---|---|
| basis-0 | flex-basis: 0px; |
| basis-1 | flex-basis: 0.25rem; /* 4px */ |
| basis-2 | flex-basis: 0.5rem; /* 8px */ |
| basis-3 | flex-basis: 0.75rem; /* 12px */ |
| basis-4 | flex-basis: 1rem; /* 16px */ |
| basis-5 | flex-basis: 1.25rem; /* 20px */ |
| basis-6 | flex-basis: 1.5rem; /* 24px */ |
| basis-7 | flex-basis: 1.75rem; /* 28px */ |
| basis-8 | flex-basis: 2rem; /* 32px */ |
| basis-9 | flex-basis: 2.25rem; /* 36px */ |
| basis-10 | flex-basis: 2.5rem; /* 40px */ |
| basis-11 | flex-basis: 2.75rem; /* 44px */ |
| basis-12 | flex-basis: 3rem; /* 48px */ |
| basis-14 | flex-basis: 3.5rem; /* 56px */ |
| basis-16 | flex-basis: 4rem; /* 64px */ |
| basis-20 | flex-basis: 5rem; /* 80px */ |
| basis-24 | flex-basis: 6rem; /* 96px */ |
| basis-28 | flex-basis: 7rem; /* 112px */ |
| basis-32 | flex-basis: 8rem; /* 128px */ |
| basis-36 | flex-basis: 9rem; /* 144px */ |
| basis-40 | flex-basis: 10rem; /* 160px */ |
| basis-44 | flex-basis: 11rem; /* 176px */ |
| basis-48 | flex-basis: 12rem; /* 192px */ |
| basis-52 | flex-basis: 13rem; /* 208px */ |
| basis-56 | flex-basis: 14rem; /* 224px */ |
| basis-60 | flex-basis: 15rem; /* 240px */ |
| basis-64 | flex-basis: 16rem; /* 256px */ |
| basis-72 | flex-basis: 18rem; /* 288px */ |
| basis-80 | flex-basis: 20rem; /* 320px */ |
| basis-96 | flex-basis: 24rem; /* 384px */ |
| basis-auto | flex-basis: auto; |
| basis-px | flex-basis: 1px; |
| basis-0.5 | flex-basis: 0.125rem; /* 2px */ |
| basis-1.5 | flex-basis: 0.375rem; /* 6px */ |
| basis-2.5 | flex-basis: 0.625rem; /* 10px */ |
| basis-3.5 | flex-basis: 0.875rem; /* 14px */ |
| basis-1/2 | flex-basis: 50%; |
| basis-1/3 | flex-basis: 33.333333%; |
| basis-2/3 | flex-basis: 66.666667%; |
| basis-1/4 | flex-basis: 25%; |
| basis-2/4 | flex-basis: 50%; |
| basis-3/4 | flex-basis: 75%; |
| basis-1/5 | flex-basis: 20%; |
| basis-2/5 | flex-basis: 40%; |
| basis-3/5 | flex-basis: 60%; |
| basis-4/5 | flex-basis: 80%; |
| basis-1/6 | flex-basis: 16.666667%; |
| basis-2/6 | flex-basis: 33.333333%; |
| basis-3/6 | flex-basis: 50%; |
| basis-4/6 | flex-basis: 66.666667%; |
| basis-5/6 | flex-basis: 83.333333%; |
| basis-1/12 | flex-basis: 8.333333%; |
| basis-2/12 | flex-basis: 16.666667%; |
| basis-3/12 | flex-basis: 25%; |
| basis-4/12 | flex-basis: 33.333333%; |
| basis-5/12 | flex-basis: 41.666667%; |
| basis-6/12 | flex-basis: 50%; |
| basis-7/12 | flex-basis: 58.333333%; |
| basis-8/12 | flex-basis: 66.666667%; |
| basis-9/12 | flex-basis: 75%; |
| basis-10/12 | flex-basis: 83.333333%; |
| basis-11/12 | flex-basis: 91.666667%; |
| basis-full | flex-basis: 100%; |
3. Sử dụng Flex Basis trong Tailwind CSS
Khi làm việc với flexbox, việc thiết lập kích thước ban đầu của các mục flex là rất quan trọng. Điều này là nơi mà các tiện ích basis-{size} trở nên hữu ích. Bằng cách sử dụng các tiện ích này, bạn có thể nhanh chóng và dễ dàng thiết lập kích thước ban đầu của các mục flex của mình, giúp tạo ra một bố cục hiệu quả và đáp ứng tốt hơn.
Khi thiết lập flex basis, cần xem xét kích thước và kích thước của nội dung của bạn. Bạn muốn đảm bảo rằng các mục flex của bạn có kích thước phù hợp để chứa nội dung, đồng thời để lại đủ không gian cho bất kỳ yếu tố hoặc thành phần bổ sung nào có thể được thêm vào sau này. Bằng cách dành thời gian để thiết lập flex basis một cách đúng đắn, bạn có thể tạo ra một bố cục linh hoạt và có thể thích nghi tốt hơn, phù hợp với nhu cầu và mục tiêu của bạn.
Ví dụ minh họa:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts - Tìm hiểu về Flex Basis trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="flex flex-row">
<div class="basis-1/4">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
</div>
</body>
</html>Kết quả
Hình ảnh sử dụng class flex basis
Ngoài ra, bạn có thể tự mình thử với nhiều ví dụ nữa để thấy được sự khác biệt của chúng.
4. Áp dụng có điều kiện với Flex Basis trong Tailwind CSS
Tailwind không chỉ cho phép bạn áp dụng các lớp cho một phần tử mà còn cho phép bạn áp dụng các lớp có điều kiện cho các trạng thái khác nhau sử dụng các phần tử. Điều này giúp bạn có thể tạo kiểu cho một phần tử khác nhau tùy thuộc vào trạng thái nó đang ở. Một trong những trạng thái phổ biến nhất là trạng thái hover. Ví dụ, bạn có thể sử dụng biến thể hover:basis-1/2 để áp dụng tiện ích basis-1/2 chỉ khi phần tử đang được di chuột qua.
Các thuộc tính của Tailwind cho phép bạn dễ dàng áp dụng các kiểu khác nhau cho các phần tử tùy thuộc vào trạng thái của chúng, giúp cho nó trở thành một công cụ mạnh mẽ trong bộ công cụ thiết kế của bạn
Ví dụ:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Freetuts - Tìm hiểu về Flex Basis trong Tailwind CSS</title>
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<div class="container mx-auto">
<div class="flex flex-row">
<div class="basis-1/3 hover:basis-1/2">01</div>
<div class="basis-1/4">02</div>
<div class="basis-1/2">03</div>
</div>
</div>
</body>
</html>Còn đây là kết quả:
Hình ảnh sử dụng class hover:basis-1/2 khi chưa di chuột tới
Hình ảnh sử dụng class hover:basis-1/2 khi di chuột tới
5. Tùy chỉnh giá trị với Flex Basis trong Tailwind CSS
Khi sử dụng Tailwind, bạn thường muốn tùy chỉnh chủ đề để phù hợp với giao diện độc đáo của ứng dụng của bạn. Một cách để làm điều này là thay đổi tỷ lệ mặc định của flex basis. Tỷ lệ mặc định của flex basis là sự kết hợp của tỷ lệ khoảng cách mặc định cũng như một tập hợp các giá trị dựa trên phần trăm.
Cách 1: Định nghĩa giá trị
Đầu tiên để tùy chỉnh các giá trị bên trong class flex basis của Tailwind, điều bắt buộc là bạn phải cài đặt Tailwind CSS vào project mà bạn đang làm. Nếu bạn chưa biết cách cài đặt, bạn có thể đọc lại bài viết hướng dẫn cài đặt Tailwind CSS vào project (Tailwind CLI) của chúng tôi tại đây. Sau khi bạn đã cài đặt thành công, bạn có thể bắt đầu thực hiện.
Để tùy chỉnh tỷ lệ flex basis, bạn có thể thêm các giá trị của riêng mình vào khóa flexBasis của đối tượng theme trong tệp cấu hình Tailwind của bạn với nội dung như sau:
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{html,js}"],
theme: {
extend: {},
},
plugins: [],
}Nếu bạn muốn thêm các giá trị của riêng mình, bạn có thể làm như sau:
module.exports = {
theme: {
extend: {
flexBasis: {
'1/7': '14.2857143%',
'2/7': '28.5714286%',
'3/7': '42.8571429%',
'4/7': '57.1428571%',
'5/7': '71.4285714%',
'6/7': '85.7142857%',
}
}
}
}Bằng cách tùy chỉnh tỷ lệ flexBasis, bạn có thể tạo ra các thiết kế độc đáo phù hợp với các nhu cầu của ứng dụng của bạn. Hoặc có thể cấu hình thêm thuộc tính spacing:
module.exports = {
theme: {
extend: {
spacing: {
'112': '28rem',
'128': '32rem',
}
}
}
}Cách 2: Không cần định nghĩa
Đôi khi, khi thiết kế một trang web hoặc ứng dụng, bạn có thể cần sử dụng một giá trị tùy ý cho thuộc tính flex-basis. Điều này có thể là một giá trị không có ý nghĩa để bao gồm trong chủ đề chung của bạn, nhưng lại quan trọng đối với một phần tử cụ thể.
Trong những trường hợp như vậy, bạn có thể sử dụng dấu ngoặc vuông để tạo một thuộc tính ngay lập tức bằng bất kỳ giá trị tùy ý nào mà bạn cần. Điều này cho phép bạn kiểm soát hơn về bố cục của trang web của bạn và đảm bảo rằng tất cả các phần tử của bạn trông như bạn muốn. Vì vậy, lần sau khi bạn cần sử dụng một giá trị tùy ý cho flex-basis, đừng ngần ngại sử dụng dấu ngoặc vuông và tạo một thuộc tính tùy chỉnh ngay lập tức!
<div class="basis-[14.2857143%]"> <!-- ... --> </div>
6. Kết luận
Flex-basis là một trong những thuộc tính quan trọng của Flexbox, nó giúp bạn xác định kích thước cơ bản của phần tử con. Trong Tailwind CSS, bạn có thể sử dụng lớp flex-basis-{size} để thêm giá trị cho thuộc tính flex-basis. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về Flex Basis trong Tailwind CSS.
