Thiết kế web với Flexbox [TOÀN TẬP]

Flexbox là một giải pháp của CSS3 sinh ra để thay thế cho float. Giúp chúng ta dễ dàng thiết kế giao diện website hơn.

Flexbox là sinh ra được coi là cuộc cách mạng của CSS3, vì thế, nếu bạn học lập trình web thì không thể không nắm giữ nó.

Thiết kế web với Flexbox

Flexbox

Bài viết này mình sẽ hướng dẫn đầy đủ về Flexbox, các khái niệm, thuật ngữ, các thuộc tính cũng như ví dụ về cách sử dụng flexbox.

Mục lục:

1. Giới thiệu về Flexbox

2. Các khái niệm và thuật ngữ cơ bản của Flexbox

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

3.1. Thuộc tính display
3.2. Thuộc tính flex-direction
3.3. Thuộc tính flex-wrap
3.4. Thuộc tính flex-flow
3.5. Thuộc tính justify-content
3.6. Thuộc tính align-item
3.7. Thuộc tính align-content
3.8. Thuộc tính order
3.9. Thuộc tính flex-grow
3.10. Thuộc tính flex-shrink
3.11. Thuộc tính flex-basis
3.12. Thuộc tính flex
3.13. Thuộc tính align-self

 

4. Ví dụ sử dụng flexbox
 

Ví dụ 1: Căn giữa hoàn hảo với Flexbox
Ví dụ 2: Responsive với flexbox
Ví dụ 3: Responsive menu với flexbox
Ví dụ 4: Responsive website đơn giản với flexbox


Tổng kết

Codepen.io (vượt captcha) và F5 lại bài viết này.> Lưu ý : Trong bài viết này sẽ có những ví dụ được nhúng từ Codepen. io. Đo đó, để xem được code, bạn cần mở tab khác và vào trang ( vượt captcha ) và F5 lại bài viết này .

1. Giới thiệu về Flexbox

Flexbox Layout Module (Flexible Box) (Theo khuyến nghị của W3C kể từ tháng 10 năm 2017) nhằm mục đích cung cấp một cách bố trí, sắp xếp và phân phối item và không gian hiệu quả hơn trong một container, ngay cả khi kích thước của chúng là động ( Do đó có từ ‘flex’).

Ý tưởng chính đằng sau flex layout là cung cấp cho container khả năng thay đổi chiều rộng / chiều cao (và thứ tự) của item để lấp đầy không gian có sẵn (chủ yếu là để phù hợp với tất cả các loại thiết bị hiển thị và kích thước màn hình).

Một flex container mở rộng các item để lấp đầy không gian trống có sẵn hoặc thu nhỏ chúng để tránh bị tràn ra ngoài.

Quan trọng nhất, flexbox layout có hướng trái ngược với bố cục thông thường.

Mặc dù các bố cục thông thường vẫn hoạt động tốt cho các trang, nhưng chúng thiếu tính linh hoạt để hỗ trợ cho các ứng dụng lớn hoặc phức tạp (đặc biệt là khi thay đổi phương hướng, thay đổi kích thước, kéo dài, thu hẹp, v.v.).

Lưu ý: Flexbox layout phù hợp nhất với các thành phần nhỏ của ứng dụng, trong khi bố trí GRID được dành cho bố cục tỷ lệ lớn hơn.( Flexible Box ) ( Theo khuyến nghị củakể từ tháng 10 năm 2017 ) nhằm mục đích mục tiêu phân phối một cách sắp xếp, sắp xếp và phân phối item và khoảng trống hiệu suất cao hơn trong một container, ngay cả khi kích cỡ của chúng là động ( Do đó có từ ‘ flex ‘ ). Ý tưởng chính đằng saulà phân phối cho container năng lực đổi khác chiều rộng / chiều cao ( và thứ tự ) của item để lấp đầy khoảng trống có sẵn ( hầu hết là để tương thích với toàn bộ những loại thiết bị hiển thị và kích cỡ màn hình hiển thị ). Một flex container lan rộng ra những item để lấp đầy khoảng trống trống có sẵn hoặc thu nhỏ chúng để tránh bị tràn ra ngoài. Quan trọng nhất, flexbox layout có hướng trái ngược với bố cục tổng quan thường thì. Mặc dù những bố cục tổng quan thường thì vẫn hoạt động giải trí tốt cho những trang, nhưng chúng thiếu tính linh động để tương hỗ cho những ứng dụng lớn hoặc phức tạp ( đặc biệt quan trọng là khi biến hóa phương hướng, biến hóa size, lê dài, thu hẹp, v.v. ). Lưu ý : Flexbox layout tương thích nhất với những thành phần nhỏ của ứng dụng, trong khi sắp xếp GRID được dành cho bố cục tổng quan tỷ suất lớn hơn .

2. Các khái niệm và thuật ngữ cơ bản của Flexbox

Vì flexbox là một mô – đun, không phải là một thuộc tính duy nhất, nó liên quan đến rất nhiều thứ bao gồm cả một bộ thuộc tính của nó.

Một số trong số chúng có được thiết lập trên thùng chứa (container) (phần tử cha, được gọi là ‘flex container‘) trong khi những cái khác được đặt là phần tử con (nói là ‘flex items‘).

Nếu bố cục ‘thông thường’ dựa trên cả hai hướng theo khối và hướng dòng nội tuyến, thì bố cục flex dựa trên ‘hướng dòng chảy‘ (flex-flow directions).

Và bạn có thể quy định hướng dòng chảy. Nếu không quy định thì nó là mặc định.

Xem hình minh họa sau:

Các khái niệm, thuật ngữ cơ bản của Flexbox

Các khái niệm, thuật ngữ cơ bản của Flexbox
 

Các item sẽ được bố trí theo main axis (trục chính) (từ main start đến main end) hoặc trục vuông góc với trục chính – cross axis (từ cross start đến cross end).

  • main axis – Trục chính của flex container là trục chính dọc, theo đó các flex item được đặt ra. Lưu ý, nó không nhất thiết phải nằm ngang. Nó được quy định dựa vào thuộc tính flex-direction (xem bên dưới).

  • main startmain end: Các flex item được đặt trong container bắt đầu từ main-start và đến main-end.

  • main size – chiều rộng của container

  • cross axis – Trục vuông góc với trục chính được gọi là cross axis. Hướng của nó phụ thuộc vào hướng trục chính.

  • cross start cross end – Điểm bắt đầu và điểm kết thúc của flex item theo hướng cross axis.

  • cross size – Phụ thuộc vào chiều rộng hoặc chiều cao của flex item.

Flexbox Froggy. Cách chơi đơn giản là đặt những con ếch trên đúng lá sen.Ngoài ra, bạn hoàn toàn có thể nắm giữ những khái niệm cơ bản về Flexbox trải qua một game show rất mê hoặc, đó chính là. Cách chơi đơn thuần là đặt những con ếch trên đúng lá sen .

Ngoài ra còn có Game Flexbox Defense mang tính thử thách rất thú vị cho các bạn vừa chơi vừa rèn luyện.Chơi thử Game Flexbox Froggy – Học Flexbox qua trò chơi ( Có phiên bản tiếng Việt ) Ngoài ra còn có Gamemang tính thử thách rất mê hoặc cho những bạn vừa chơi vừa rèn luyện .

Về cơ bản thì 90% trường hợp chúng ta cũng sẽ chỉ sử dụng những thuộc tính flexbox được học trong 2 game này.

Còn bài viết này thì như một tài liệu tham khảo về hầu hết thuộc tính của Flexbox.

> Ghi chú: Tất cả các kỹ thuật Front end và Back end sẽ được truyền đạt đầy đủ trong KHÓA HỌC PHP FULL STACKKHÓA HỌC JAVA FULL STACK

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

Chúng ta sẽ đi tìm hiểu về từng thuộc tính của Flexbox ngay sau đây.

Trước tiên chúng ta sẽ tìm hiểu về các thuộc tính dành cho container:

Thuộc tính dành cho flexbox container

Thuộc tính dành cho flexbox container

3.1. Thuộc tính display

Thuộc tính display được sử dụng để định nghĩa một flex container. Nội tuyến (inline) hoặc khối (block) tùy thuộc vào giá trị nhất định.

Nó cho phép tạo ra một bối cảnh flex để tiếp tục sắp xếp các flex item.


. container {

    display: flex;

    / * or inline-flex * /

}
 

Lưu ý rằng những cột CSS không có công dụng so với flex container

3.2. Thuộc tính flex-direction

Thuộc tính flex-direction thiết lập trục chính (main-axis), do đó xác định hướng các flex item sẽ được đặt trong flex container.

Thuộc tính flex-direction

Thuộc tính flex-direction

Flexbox là một khái niệm bố cục một hướng. Hãy hiểu là các flex item sẽ chỉ được đặt theo các hàng ngang hoặc cột dọc.


. container {

    flex-direction: row | row-reverse | column | column-reverse;

}
 

Trong đó :

  • row: Là mặc định. Từ trái sang phải

  • row-reverse: Đảo ngược hàng (Từ phải sang trái)

  • column: Cột (Từ trên xuống dưới)

  • column-reverse: Đảo ngược cột (Từ dưới lên trên)

3.3. Thuộc tính flex-wrap

Theo mặc định, tất cả các flex item sẽ cố gắng khớp với một dòng. Bạn có thể thay đổi điều đó và cho phép các item xuống hàng (tách hàng) khi cần thiết với thuộc tính flex-wrap này.

Thuộc tính flex-wrap

Thuộc tính flex-wrap


. container {

    flex-wrap: nowrap | wrap | wrap-reverse;

}
 

Trong đó :

  • nowrap (mặc định): tất cả flex item sẽ được đặt trên một dòng

  • wrap: flex item sẽ tự động tách dòng, từ trên xuống dưới.

  • wrap-reverse: flex item sẽ tách thành nhiều dòng từ dưới lên trên

Như trong ví dụ bên dưới đây :

  • List màu đỏ được thiết lập để nowrap

  • List màu vàng được thiết lập để wrap

  • List màu vàng được thiết lập để wrap-reverse

Chú ý : flex-direction được thiết lập giá trị mặc định : row .

See the Pen Flexbox : Demo thuộc tính flex-wrap by NIIT – ICT TP.HN ( @ niiticthanoi ) on CodePen .


Demo thuộc tính flex-wrap của Flexbox

 

3.4. Thuộc tính flex-flow

Thuộc tính flex-flow là một cách viết tắt cho các thuộc tính flex-directionflex-wrap.

Nó cùng nhau xác định main axis và cross axis của flex container. Giá trị mặc định là row nowrap.


. container {

    flex-flow: flex-direction;

}
 

Hoặc :


. container {

    flex-flow: flex-wrap;

}
 

3.5. Thuộc tính justify-content

Thuộc tính justify-content xác định sự liên kết dọc theo trục chính.

Nó giúp điều chỉnh phần không gian trống còn lại khi tất cả các flex item cùng đặt trên một dòng.

Thuộc tính justify-content

Thuộc tính justify-content
 
Nó cũng triển khai một số ít trấn áp so với sự link của những item khi chúng tràn qua dòng .


. container {

    justify-content:

    flex-start | flex-end |

    center | space-between |

    space-around | space-evenly |

    start | end |

    left | right |

… +
safe | unsafe ;

}
 

Trong đó :

  • flex-start (mặc định): Các item được đặt dồn về phía bắt đầu (theo hướng của flex-direction).

  • flex-end: các mặt hàng được dồn về phía cuối của flex-direction.

  • start: các item được đặt về phía bắt đầu của hướng wirting-mode

  • end: các item được đặt về phía cuối của hướng wirting-mode

  • left: các item được đặt về phía trái, cạnh của container.

  • right: các item được đặt về phía phải, cạnh của container.

  • center: đặt các item dồn vào giữa.

  • space-between: các item được đặt cách đều nhau, item đầu và cuối đặt tại điểm bắt đầu và kết thúc.

  • space-around: Khoảng cách giữa các item đều nhau. Nhưng, item đầu tiên và cuối cùng có khoảng cách so với container chỉ bằng 1 nửa so với khoảng cách của các item với nhau.

  • space-evenly: Khoảng cách giữa các item và container là đều nhau.

Ví dụ, space-between không bao giờ có được sự hỗ trợ từ một phiên bản của Edge, và start / end / left / right không có trên Chrome (Chi tiết xem tại MDN).

An toàn nhất là các giá trị: flex-start, flex-endcenter.

Ngoài ra còn có hai từ khóa bổ sung mà bạn có thể ghép nối với các giá trị này: safe và unsafe.Lưu ý rằng trình duyệt khác nhau sẽ tương hỗ khác nhau. Ví dụ, không khi nào có được sự tương hỗ từ một phiên bản của Edge, vàkhông có trên Chrome ( Chi tiết xem tại ). An toàn nhất là những giá trị : vàNgoài ra còn có hai từ khóa bổ trợ mà bạn hoàn toàn có thể ghép nối với những giá trị này : và

3.6. Thuộc tính align-item

Thuộc tính align-items

Thuộc tính align-items

Thuộc tính align-items xác định hành vi mặc định cho cách các flex item được đặt dọc theo cross axis trên dòng hiện tại.

Hãy hiểu nó như là phiên bản justify-content nhưng dành cho cross axis (vuông góc với trục chính).

.container

 {

    

align-items

:

    

stretch

 | 

flex-start

 |

    

flex-end

 | 

center

 |

    

baseline

 | 

first baseline

 |

    

last baseline

 |

    

start

 | 

end

 |

    

self-start

 | 

self-end

 |

+ … safe | unsafe ;

}
 

  • stretch (mặc định): kéo dài item để lấp đầy container (vẫn tôn trọng min-width / max-width)

  • flex-start / start / self-start: các item được đặt ở đầu cross axis. Sự khác biệt giữa những điều này là về việc tôn trọng các quy tắc flex-direction hoặc quy tắc writing-mode.

  • flex-end / end / self-end: các mục được đặt ở cuối cross axis. Sự khác biệt một lần nữa là về việc tôn trọng các quy tắc flex-direction hoặc quy tắc writing-mode.

  • center: các item được căn giữa trong cross axis

  • baseline: các item được căn chỉnh như căn chỉnh đường cơ sở của chúng

Các từ khóa

safe

unsafe

có thể được sử dụng cùng với tất cả các từ khóa còn lại (mặc dù có một số trình duyệt cần phải lưu ý).

3.7. Thuộc tính align-content

Nếu như thuộc tính justify-content phân phối khoảng trống giữa các item trên main axis thì…

Thuộc tính align-content

Thuộc tính align-content

Thuộc tính align-content phân phối khoảng trống giữa các hàng item, hàng item với cạnh container (theo trục cross axis)

.container

 {

    

align-content

:

    

flex-start

 | 

flex-end

 | 

center

 |

    

space-between

 | 

space-around

 | 

space-evenly

 |

    

stretch

 | 

start

 | 

end

 |

    

baseline

 | first 

baseline

 | last 

baseline

 |

+ … safe | unsafe ;

}
 

Trong đó :

  • flex-start / start: các hàng item được đặt vào đầu container (theo trục cross axis).

    flex-start

    (được hỗ trợ nhiều hơn) tôn trọng

    flex-direction

    trong khi start tôn trọng

    writing-mode

    .

  • flex-end / end: các hàng item được đặt ở cuối container (theo trục cross axis). Kết thúc flex (hỗ trợ nhiều hơn) tôn vinh hướng flex trong khi kết thúc tôn vinh hướng chế độ viết.

  • center: các hàng item nằm giữa container

  • space-between: các hàng item phân bố đều. Dòng đầu tiên ở đầu container trong khi dòng cuối cùng ở cuối container.

  • space-around: các hàng item được phân bổ đều với không gian bằng nhau xung quanh mỗi dòng. (Item đầu và cuối vẫn có khoảng cách tối thiểu với cạnh container)

  • space-evenly: các hàng item được phân bố đều với không gian bằng nhau xung quanh chúng. (cả với cạnh container)

  • Stretch (mặc định): các hàng item được kéo dãn để lấp đầy khoảng trống (theo trục cross axis)

Tiếp đến tất cả chúng ta sẽ khám phá về cách thuộc tình dành cho flex item :

Các thuộc tính dành cho flex item

Các thuộc tính dành cho flex item

3.8. Thuộc tính order

Thuộc tính order

Thuộc tính order
 

Theo mặc định, các flex item được đặt theo thứ tự sắp xếp trong HTML. Tuy nhiên, thuộc tính order có thể kiểm soát thứ tự xuất hiện của chúng trong flex container.

.item

 {

    

order

;

    

/* Mặc định là 0 */

}
 

3.9. Thuộc tính flex-grow

Thuộc tính flex-grow

Thuộc tính flex-grow

Thuộc tính flex-grow phân phối thêm khoảng không gian cho các item nếu cần thiết.

Nó chấp nhận một giá trị đơn vị như là một tỷ lệ. Nó chỉ ra lượng không gian có sẵn bên trong flex container mà item sẽ chiếm.

Nếu tất cả các item có flex-grow được đặt thành 1, thì các item sẽ chiếm mỗi item 1 phần của container.

Nếu một trong những item có giá trị là 2, thì item này sẽ được chia 2 phần và các item khác sẽ được chia mỗi 1 item một phần của container.

.item

 {

    

flex-grow

;

    

/* Mặc định là 0 */

}
 

Số âm là không hợp lệ .

3.10. Thuộc tính flex-shrink

Thuộc tính flex-shrink sử dụng để co lại item nếu thiết yếu .

.item

 {

    

flex-shrink

;

    

/* Mặc định là 1 */

}
 

 Số âm là không hợp lệ .


 

3.11. Thuộc tính flex-basis

Thuộc tính 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 một từ khóa.

  • Từ khóa

    auto

    có nghĩa là ‘nhìn vào thuộc tính width hoặc height’ (tạm thời được thực hiện bởi từ khóa main-size cho đến khi không dùng nữa).

  • Từ khóa

    content

    có nghĩa là ‘kích thước dựa trên nội dung của item – từ khóa này chưa được hỗ trợ tốt, vì vậy thật khó để kiểm tra và khó hơn để biết max-content, min-content và fit-content của nó làm gì.


 

.item

 {

    

flex-basis

 | 

auto

;

    

/* Mặc định là auto */

}
 


 

Nếu thiết lập đến 0, thêm không gian xung quanh nội dung không phải là phần tử. Nếu thiết lập để auto, thêm không gian được phân phối dựa trên flex-grow. Xem này, đồ họa.

 

3.12. Thuộc tính flex

Thuộc tính flex là viết tắt cho sự kết hợp thuộc tính flex-grow, flex-shrink và flex-basis.

Tham số thứ 2 và thứ 3 (flex-shrink và flex-basis) là tùy chọn. Mặc định là

0 1 auto

.item

 {

    

flex

none

 | [ <

‘flex-grow’

> <

‘flex-shrink’

>? || <

‘flex-basis’

>]

}
 

Bạn nên sử dụng thuộc tính tốc ký này thay vì phải thiết lập những thuộc tính riêng không liên quan gì đến nhau. Tốc ký giúp thiết lập những giá trị khác một cách mưu trí hơn .

3.13. Thuộc tính align-self

Thuộc tính align-self

Thuộc tính align-self

Thuộc tính align-self tương tự như align-item nhưng chỉ định cho một item riêng.

Hãy xem giải thích align-items để hiểu được các giá trị của nó.

.item

 {

    

align-self

:

    

auto

 | 

flex-start

 |

    

flex-end

 | 

center

 |

    

baseline

 | 

stretch

;

}
 

* Lưu ý rằng float, clear và vertical-align không có ảnh hưởng tác động đến một flex item .

4. Ví dụ sử dụng flexbox.

Ví dụ 1: Căn giữa hoàn hảo với Flexbox

Hãy bắt đầu với một ví dụ rất đơn giản, giải quyết gần như hàng ngày đề: Căn giữa hoàn hảo.

Không có cách nào đơn giản hơn là sử dụng flexbox.

CSS:

.parent

 {

    

/* Thiết lập bối cảnh flex */

    

display

flex

;

    

/* Hoặc kích thước khác */

    

height

300px

;

}

.child

 {

    

/* Hoặc kích thước khác */

    

width

100px

;

    

/* Hoặc kích thước khác */

    

height

100px

;

    

/* Căn giữa hoàn hảo! */

    

margin

auto

;

}
 

Ví dụ Codepen :

See the Pen Flexbox : Căn giữa tuyệt vời by NIIT – ICT TP.HN ( @ niiticthanoi ) on CodePen .

Ví dụ về căn giữa hoàn hảo với flexbox

 

Ví dụ 2: Responsive với flexbox

Bây giờ hãy sử dụng một số ít thuộc tính khác. Hãy xem xét một list gồm 6 item, toàn bộ đều có size cố định và thắt chặt, nhưng hoàn toàn có thể có kích cỡ tự động hóa .

CSS :

.flex-container

 {

    

/* Đầu tiên, tạo ra bối cảnh flex */

    

display

flex

;

    

/* Sau đó xác định hướng dòng chảy flex-direction 

        và cho phép tách hàng

        Hãy nhớ rằng đây là tương tự:

        flex-direction: row;

        flex-wrap: wrap;

    */

    

flex-flow

row

 

wrap

;

    

/* Sau đó chúng ta phân phối không gian còn lại cho đều nhau */

    

justify-content

space-around

;

}
 

Chúng ta muốn chúng được phân chia đều trên trục ngang để khi tất cả chúng ta biến hóa size trình duyệt, mọi thứ đều có tỷ suất độc lạ mà không cần @ truyền thông .

Ví dụ codepen :

 See the Pen Flexbox : Responsive với Flexbox by NIIT – ICT TP. Hà Nội ( @ niiticthanoi ) on CodePen .

Ví dụ về Responsive với flexbox

Ví dụ 2: Responsive menu với flexbox

Hãy tưởng tượng chúng ta có một menu được căn phải ở trên cùng của trang web của chúng ta.

Nhưng chúng tôi muốn nó được căn vào giữa nếu màn hình trung bình và xếp thành cột đơn trên các thiết bị nhỏ. Quá dễ với flexbox.

CSS:

/* Màn hình lớn*/

.navigation

 {

    

display

flex

;

    

flex-flow

row

 

wrap

;

    

/* Căn chỉnh item về cuối theo trục main axis */

    

justify-content

flex-end

;

}

/* Màn hình trung bình */

@media

 

all

 and (

max-width

800px

) {

    

.navigation

 {

        

/* Căn chỉnh item tập trung vào giữa theo kiểu space-around */

        

justify-content

space-around

;

}
}

/* Màn hình nhỏ */

@ truyền thông all and (max-width: 500 px) {

    . navigation {

        / * Mỗi một item nằm trên một hàng ( sắp xếp thành 1 cột duy nhất ) * /

        flex-direction: column;

}

}
 

Xem hiệu quả trong ví dụ codepen sau :

See the Pen Flexbox : Responsive menu với Flexbox by NIIT – ICT TP.HN ( @ niiticthanoi ) on CodePen .

Ví dụ responsive menu với flexbox

 

Ví dụ 3: Responsive website đơn giản với flexbox

Mục đích sau cuối sử dụng flexbox là tương hỗ tốt cho phong cách thiết kế website responsive. Vậy giờ đây hãy thử phong cách thiết kế responsive một bố cục tổng quan website đơn thuần với flexbox nhé .

CSS :


. wrapper>* {

    flex: 1 100 %;

}

/ * Chúng ta dựa vào thứ tự nguồn cho giải pháp mobile-first

* trong trường hợp này :

* 1. header

* 2. article

* 3. aside 1

* 4. aside 2

* 5. footer

* /

/ * Màn hình trung bình * /

@ truyền thông all and (min-width: 600 px) {

    / * Sidebar nằm trên cùng một hàng * /

    . aside {

        flex: 1 auto;

}
}

/ * Màn hình rộng * /

@ truyền thông all and (min-width: 800 px) {

    / * Chúng ta đảo ngược thứ tự của sidebar tiên phong và main

* và nói rằng main có chiều rộng gấp đôi sidebar

* /

    . main {

        flex: 2 0 px;

}

    . aside-1 {

        order: 1;

}

    . main {

        order: 2;

}

    . aside-2 {

        order: 3;

}

    . footer {

        order: 4;

}

}
 

Hãy xem trong ví dụ codepen bên dưới :

See the Pen Flexbox : Ví dụ responsive website đơn thuần by NIIT – ICT TP.HN ( @ niiticthanoi ) on CodePen .


Ví dụ responsive website đơn thuần với flexbox

 

Tổng kết Flexbox

Flexbox, các khái niệm quan trọng cũng như các thuộc tính của flexbox.

Hơn nữa chúng ta còn thử nghiệm với 4 ví dụ đơn giản về ứng dụng của flexbox.

Nắm vững kỹ năng sử dụng flexbox thì level thiết kế web cũng như lập trình web của bạn sẽ tăng cao hơn rất nhiều, dễ thở hơn.

>  Tham khảo: HỌC FRONT ENDNhư vậy là qua bài này, bạn đã được khám phá kỹ càng về, những khái niệm quan trọng cũng như cácHơn nữa tất cả chúng ta còn thử nghiệm với 4N ắm vững kiến thức và kỹ năng sử dụng flexbox thì level phong cách thiết kế web cũng như lập trình web của bạn sẽ tăng cao hơn rất nhiều, dễ thở hơn .

Chúc bạn học lập trình vui tươi !

HỌC VIỆN ĐÀO TẠO CNTT NIIT – ICT HÀ NỘI

Học Lập trình chất lượng cao ( Since 2002 ). Học trong thực tiễn + Tuyển dụng ngay !

Đc : Tầng 3, 25T2, N05, Nguyễn Thị Thập, CG cầu giấy, TP.HN

SĐT : 02435574074 – 0383.180086

E-Mail : [email protected]

Fanpage: https://facebook.com/NIIT.ICT/

# niit # niithanoi # niiticthanoi # hoclaptrinh # khoahoclaptrinh # hoclaptrinhjava # hoclaptrinhphp # python # java # php