Thành thạo CSS Flexbox trong 5 phút

css

Ở trong bài viết này, bạn sẽ hiểu được cơ bản về CSS Flexbox, đây là skill cần phải có của một web developer và của một designer.

Mình sẽ sử dụng một navbar để làm ví dụ, vì đây là thứ điển hình cho Flexbox.

Now, let’s get started 🙂

Flexbox layout đầu tiên của chúng ta

Có 2 thành phần chính của Flexbox layout đó là containeritems.

Đây là code HTML ví dụ, gồm class container với 3 items.

<nav class="container">
      
Home
Search
Logout
</nav>

 

Bạn thấy là khi build ra thì 3 items này nó sẽ nằm như trong hình:

items

Để chuyển nó về dạng Flexbox layout, ta chỉ cần thêm property cho class container như sau là ok:

.container {
 display: flex;
}

và rồi thì các items này nó sẽ tự xếp dàn thành hàng ngang trông rất đẹp mắt:

layout

Nếu bạn muốn xem code kĩ hơn thì vào đây để xem code của mình nhé.

OK, giờ thì ta cùng xáo trộn mấy cái items này chút xíu nào.

Justify content và Align items

Justify content và align items là hai properties giúp cho chúng ta sắp xếp items bên trong container. Nó điều khiển cách mà các items sẽ dọc theo main axis hay là cross axis.

Trong trường hợp này thì, main axis là chiều ngang, còn cross axis là chiều thẳng đứng.

cross

 

Bây giờ ta sẽ xếp tất cả các items vào giữa theo main axis bằng justify-content.

.container {
 display: flex;
 justify-content: center;
}

center

hoặc là có thể sử dụng space-between, nó sẽ thêm khoảng trống vào giữa mỗi items.

.container {
 display: flex;
 justify-content: space-between;
}

space

dưới đây là các values mà bạn có thể set cho justify-content.

  • flex-start (default)
  • flex-end
  • center
  • space-between
  • space-around
  • space-evenly

Cách điều khiển từng items

Chúng ta có thể điều khiển từng cái items. Chúng ta sẽ thử đặt 2 cái items đầu tiên bên trái và cái items logout bên phải nhé.

Để làm việc này, thì chỉ cần set margin:auto là ok rồi 🙂

.logout {
 margin-left: auto;
}

margin

Nếu bạn muốn items SearchLogout sang bên phải, thì chỉ cần thay dòng property trên thành:

.search {
 margin-left: auto;
}

chỉ cần set cho thằng Search là nó sẽ tự đẩy thằng Logout đi cùng với nó.

push

The flex property

Cho đến nay thì, chúng ta có thể fix cứng width của items. Nhưng nếu muốn nó có thể responsive, thì ta sẽ dùng property có tên là flex. Nó sẽ dễ dàng hơn là fix cứng width bằng percentages.

.container > div {
 flex: 1;
}

flex

Như bạn đã thấy thì khi set value: 1 thì tất cả các items nó sẽ tự kéo dài ra toàn bộ container.

Vậy là ok rồi đấy, hi vọng thông qua bài viết này sẽ giúp bạn hiểu hơn về thằng Flexbox này 🙂 .

Nếu bạn muốn học thêm nhiều hơn về CSS, thì các bạn hay vào trang Udemy, FreecodeCamp hoặc là Scrimba nhé. Những trang này đều được viết bằng Tiếng Anh, sẵn rèn skill ngoại ngữ luôn nhé 🙂 .

Để hiểu tầm quan trọng của Tiếng anh đối với coder thì bạn hãy đọc bài này của mình nhé. Click here.

 

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s