This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Friday, 5 October 2018

CSS3 Flexbox - Xu hướng dàn trang mới trong thiết kế web


Để thiết kế nên một trang web thì việc sắp xếp bố cục các element là điều đương nhiên bạn cần phải biết. Thông thường để dàn trang các phần tử theo chiều ngang ta thường sẽ sử dụng các thuộc tính như display:inline-block hoặc phổ biến nhất là float. Nhược điểm lớn nhất của float chắc bạn cũng không xa lạ gì nữa đó là nó luôn làm ảnh hưởng tới các thành phần bên dưới nó nên lúc nào ta cũng phải rình rình để clearfix

Công nghệ flexbox được ra đời để cải thiện và giúp cho việc dàn trang trở nên đơn giản hơn bao giờ hết

Flexbox là một cách bố trí mới của CSS3, giống với float, Flexbox quy định vị trí các phần tử trên cùng một hàng hoặc một cột, nhưng đương nhiên là nó xịn hơn float nhiều.

Lí do minh chứng flexbox đang là xu hướng dàn trang trong thiết kế web đó là nó đã được hầu hết các trang lớn như youtube, microsoft, google,... cũng như một framework rất mạnh trong layout - bootstrap 4 sử dụng

Nói như vậy cũng không có nghĩa nó là hoàn hảo, vì là một công nghệ mới nên chắc chắn nó chưa thể support đầy đủ các trình duyệt cũ như float được (ví dụ như tôi duyệt trang bằng IE10 là flexbox phế 😀). Nhưng bây giờ cái gì mở lên là cũng bắt update hết rồi nên bạn vẫn nên sử dụng flexbox để cho việc thiết kế trở nên nhàn hơn

Ok giờ ta bắt đầu !

Để làm việc với flexbox bắt buộc bạn phải xác định được thành phần cha (flex container) và thành phần con (flex items)

Flex container (thành phần cha)

Flex items (thành phần con)

I. Flex container và các thuộc tính


1. Display


Để các flex items có thể sử dụng các thuộc tính flexbox thì bắt buộc container chứa chúng phải có display.
Cú pháp:

.container {
  display: flex; /* or inline-flex */
}

2 giá trị cho thuộc tính này gồm

+ flex: Hiển thị phần tử dưới dạng vùng chứa cấp độ khối (giống như display:block)

.container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex; 
}

+ inline-flex: Hiển thị phần tử dưới dạng vùng chứa flex cấp nội tuyến (giống như display:inline-block)

.container {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -moz-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
}

demo

2. flex-direction



Thuộc tính này quy định việc hiển thị theo trục chính
Cú pháp

.container {
  flex-direction: row | row-reverse | column | column-reverse;
}

Có 4 giá trị bao gồm

+ row: giá trị mặc định, các items được hiển thị theo chiều ngang, như một hàng

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
     -moz-box-orient: horizontal;
     -moz-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
}

+ row-reverse: giống như row, nhưng thứ tự các item bị đảo ngược

.container {
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: row-reverse;
     -moz-box-orient: horizontal;
     -moz-box-direction: reverse;
      -ms-flex-direction: row-reverse;
          flex-direction: row-reverse;
}

+ column: các items được hiển thị theo chiều dọc, dạng cột

.container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

+ column-reverse: giống như column, nhưng thứ tự các item bị đảo ngược

.container {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
  -webkit-flex-direction: column-reverse;
     -moz-box-orient: vertical;
     -moz-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

demo

3. flex-wrap


Mặc định, tất cả các mục flex sẽ cố gắng vừa trên một dòng

Cú pháp

.container{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

Bạn có thể chỉ định các giá trị như sau

+ nowrap : giá trị mặc định., items sẽ không wrap

.container{
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
}

+ wrap : các items sẽ wrap xuống hàng khi cần thiết

.container{
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}

+ wrap-reverse : các items sẽ wrap xuống hàng khi cần thiết và đảo ngược thứ tự

.container{
  -webkit-flex-wrap: wrap-reverse;
      -ms-flex-wrap: wrap-reverse;
          flex-wrap: wrap-reverse;
}

demo

4. flex-flow 


Đây là cách viết rút gọn (shorthand) của flex-direction và flex-wrap

Cú pháp

flex-flow: <flex-direction> || <flex-wrap>

demo

5. justify-content



Đây là một thuộc tính tuyệt vời của flexbox, nó giúp ta có thể dễ dàng hiển thị item như căn phải-trái-giữa đơn giản hơn so với khi sử dụng float rất nhiều

Cú pháp

.container {
  justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly;
}

+ flex-start: Giá trị mặc định, các items được định vị ở đầu vùng chứa

.container {
  -webkit-box-pack: start;
  -webkit-justify-content: flex-start;
     -moz-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
}

+ flex-end: Các items được đặt ở cuối vùng chứa

.container {
  -webkit-box-pack: end;
  -webkit-justify-content: flex-end;
     -moz-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
}

+ center: Các items được đặt ở trung tâm của vùng chứa

.container {
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

+ space-between: Các items được định vị với khoảng trống giữa các dòng

.container {
  -webkit-box-pack: justify;
  -webkit-justify-content: space-between;
     -moz-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

+ space-around: Các items được định vị với khoảng trống trước, giữa và sau dòng

.container {
  -webkit-justify-content: space-around;
      -ms-flex-pack: distribute;
          justify-content: space-around;
}

+ space-evenly: các items được phân phối sao cho khoảng cách giữa hai items (và không gian cho các cạnh) bằng nhau

.container {
  -webkit-box-pack: space-evenly;
  -webkit-justify-content: space-evenly;
     -moz-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

demo

6. align-items



Dùng để căn chỉnh vị trí cho các items bên trong container

Cú pháp

.container {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

+ stretch: Mặc định, các items được kéo dài để vừa với vùng chứa

.container {
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
     -moz-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
}

+ center: Các items được đặt ở trung tâm của vùng chứa

.container {
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

+ flex-start: Các items được định vị ở đầu vùng chứa

.container {
  -webkit-box-align: start;
  -webkit-align-items: flex-start;
     -moz-box-align: start;
      -ms-flex-align: start;
          align-items: flex-start;
}

+ flex-end: Các items được định vị ở cuối vùng chứa

.container {
  -webkit-box-align: end;
  -webkit-align-items: flex-end;
     -moz-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
}

+ baseline: Các items được định vị tại đường cơ sở của vùng chứa

.container {
  -webkit-box-align: baseline;
  -webkit-align-items: baseline;
     -moz-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

demo

7. align-content



Dùng để thay đổi hành vi của thuộc tính flex-wrap. Tự như align-items, nhưng thay vì căn chỉnh theo items, nó sẽ căn chỉnh theo dòng (flex lines)

Cú pháp

.container {
  align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}

+ stretch: Giá trị mặc định. Các dòng kéo dài để chiếm không gian còn lại

.container {
  -webkit-align-content: stretch;
      -ms-flex-line-pack: stretch;
          align-content: stretch;
}

+ center: Các dòng được đẩy về phía giữa của container

.container {
  -webkit-align-content: center;
      -ms-flex-line-pack: center;
          align-content: center;
}

+ flex-start: Các dòng được đẩy về phía đầu của container

.container {
  -webkit-align-content: flex-start;
      -ms-flex-line-pack: start;
          align-content: flex-start;
}

+ flex-end: Các dòng được đẩy về phía cuối của container

.container {
  -webkit-align-content: flex-end;
      -ms-flex-line-pack: end;
          align-content: flex-end;
}

+ space-between: Các dòng được phân bố đều trong container

.container {
  -webkit-align-content: space-between;
      -ms-flex-line-pack: justify;
          align-content: space-between;
}

+ space-around: Các dòng được phân bố đều trong container, với khoảng cách một nửa ở hai đầu

.container {
  -webkit-align-content: space-around;
      -ms-flex-line-pack: distribute;
          align-content: space-around;
}

demo

II. Flex items và các thuộc tính


1. order


Dùng để định lại vị trí xuất hiện của các items, đây là một thuộc tính tuyệt vời giúp bạn dễ dàng đặt vị trí hiển thị items bất chấp mã html được viết theo thứ tự nào

Cú pháp

.item {
  order: <integer>; /* default is 0 */
}

+ integer : giá trị mặc định là 0

.item {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
     -moz-box-ordinal-group: 1;
      -ms-flex-order: 0;
          order: 0;
}

demo

2. flex-grow


Xác định phần tăng trưởng tương đối so với phần còn lại của các items bên trong cùng một vùng chứa

Cú pháp

.item {
  flex-grow: <number>; /* default 0 */
}

+ number: giá trị mặc định là 0

.item {
  -webkit-box-flex: 0;
  -webkit-flex-grow: 0;
     -moz-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

demo

3. flex-shrink


Item sẽ co lại như thế nào so với phần còn lại của các items trong cùng một vùng chứa Cú pháp

.item {
  flex-shrink: <number>; /* default 1 */
}

+ number : mặc định là 1

.item {
  -webkit-flex-shrink: 1;
      -ms-flex-negative: 1;
          flex-shrink: 1;
}

4. flex-basis 


Xác định kích thước mặc định của một phần tử trước khi không gian còn lại được phân phối. Nó có thể là độ dài (ví dụ: 20%, 5rem, v.v.) hoặc từ khóa

Cú pháp

.item {
  flex-basis: <number> | auto; /* default auto */
}

+ number: mặc định là auto, có thể là đơn vị độ dài hoặc phần trăm

.item {
  -webkit-flex-basis: 50%;
      -ms-flex-preferred-size: 50%;
          flex-basis: 50%;
}

demo

5. flex 


Đây là dạng shorthand của flex-grow, flex-shrink và flex-basis. Ta nên dùng thuộc tính này cho dễ nhớ
Cú pháp

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

+ Giá trị mặc định flex: 0 1 auto.

.item {
  -webkit-box-flex: 0;
  -webkit-flex: 0 1 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 1 auto;
          flex: 0 1 auto;
}

demo

6. align-self



Chỉ định căn chỉnh cho item đã chọn bên trong vùng chứa

Cú pháp

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

+ auto : Mặc định

.item {
  -webkit-align-self: auto;
      -ms-flex-item-align: auto;
              -ms-grid-row-align: auto;
          align-self: auto;
}

+ stretch : Phần tử được định vị để vừa với vùng chứa

.item {
  -webkit-align-self: stretch;
      -ms-flex-item-align: stretch;
              -ms-grid-row-align: stretch;
          align-self: stretch;
}

+ center : Phần tử được đặt ở trung tâm của vùng chứa

.item {
  -webkit-align-self: center;
      -ms-flex-item-align: center;
              -ms-grid-row-align: center;
          align-self: center;
}

+ flex-start : Phần tử được đặt ở đầu của vùng chứa

.item {
  -webkit-align-self: flex-start;
      -ms-flex-item-align: start;
          align-self: flex-start;
}

+ flex-end : Phần tử được đặt ở cuối của vùng chứa

.item {
  -webkit-align-self: flex-end;
      -ms-flex-item-align: end;
          align-self: flex-end;
}

+ baseline : Phần tử được đặt ở đường cơ sở của vùng chứa

.item {
  -webkit-align-self: baseline;
      -ms-flex-item-align: baseline;
          align-self: baseline;
}

demo

III. Kết luận


Như vậy tôi đã giới thiệu và demo cho bạn xong toàn bộ những gì liên quan đến flexbox. Đây là một công nghệ rất mới giúp lập trình viên có thể dễ dàng layout hơn rất nhiều. Hi vọng sau khi đọc xong bài viết này bạn có thể tự tin sử dụng flexbox để thiết kế nên những trang web chuyên nghiệp

Good Luck !
Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js