Sử dụng bố cục trang Flexbox trong CSS | TopDev

Thuộc tính flex-flow sử dụng để gộp chung hai thuộc tính flex-direction và flex-wrap.

Cú pháp:

Ví dụ:

Theo mặc định, các item bên trong sẽ bắt đầu từ main start đến main end, tuy nhiên, đôi khi container vẫn còn khoảng trống. Vì vậy, bạn có thể sử dụng thuộc tính justify-content để điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container theo dọc theo trục main axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

Các tham số:

Ví dụ: Ở đây main axis nằm ngang

Thay các giá trị vào code để thấy sự khác biệt nhé:

Thuộc tính align-items sử dụng để điều chỉnh vị trí bắt đầu và căn chỉnh các item bên trong container theo dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

Các tham số và ví dụ minh họa

stretch: giá trị mặc định, các phần tử sẽ được kéo dài để lấp đầy container chứa nó, nhưng sẽ ưu tiên giá trị height/width nếu có, khi đó item sẽ không cao full mà chỉ lấy giá trị height/width mà bạn set.

flex-start: item sẽ bắt đầu từ lề cross-start của container.

Ví dụ trường hợp mặc định với main axis nằm ngang, cross axis đứng dọc, flex-direction: row thì các item sẽ bắt đầu từ trên.

flex-end: item sẽ bắt đầu từ lề cross-end của container. Trường hợp mặc định với cross axis đứng dọc, flex-direction: row thì các item sẽ dồn xuống dưới.

center: item sẽ căn giữa theo chiều của cross axis.

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

Đường cơ sở là đường mà tất cả các chữ cái sẽ “ngồi lên”. Bạn có thể sử dụng kích thước font chữ khác nhau để thấy rằng các mục được căn chỉnh theo đường cơ sở baseline:

Code đầy đủ, thay các giá trị để thấy rõ hơn.

Thuộc tính align-content sử dụng để căn chỉnh khoảng cách các item bên trong container theo dọc theo trục cross axis, chiều ngang hoặc chiều dọc tùy thuộc vào flex-direction.

Cú pháp:

Các tham số:

Code đầy đủ:

Theo mặc định, các item sẽ hiển thị theo thứ tự xuất hiện trong HTML, nhưng với thuộc tính order, bạn có thể sắp xếp lại vị trí sắp xếp của các item.

Cú pháp:

Ví dụ:

Thuộc tính flex-grow cho phép các phần tử giãn theo độ rộng của container.

Cú pháp:

Thuộc tính này hơi phức tạp, Quantrimang sẽ minh họa một số trường hợp hay gặp cho bạn dễ hình dung hơn. Ví dụ ta set các item có độ rộng là 100px.

Giá trị mặc định của thuộc tính flex-grow là 0, các item sẽ không tự động co giãn kích thước, để lại nhiều khoảng trống trong container.

Khi ta tăng flex-grow = 1, item sẽ tự động giãn ra đều nhau sao cho vừa với khung container.

Giá trị của flex-grow rất linh động, khi set thuộc tính này cho tất cả các item với cùng một giá trị thì các item sẽ có tỉ lệ như nhau và được dàn đều lấp đầy container. Ví dụ set tất cả các phần tử flex-grow là 1 thì tất cả đều như nhau tỉ lệ 1:1, mà set flex-grow là 100 thì kết qua vẫn sẽ ra tương tự với tỉ lệ 1:1.

Nhưng điều thú vị hơn ở flex-grow là áp dụng nó cho từng item. Ta có giá trị mặc định ở tất cả phần tử là flex-grow = 0, thay đổi riêng giá trị của item2 thành 1, kết quả như sau:

Vậy là ở đây, thiết lập flex-grow là 1 thì item2 sẽ lấy phần trống còn lại của container đắp vào chính nó.

Bây giờ hãy thử cho các phần tử đều là flex-grow: 1, nhưng set riêng phần tử thứ 3 giá trị khác:

Lúc này thì tất cả các item đều được giãn ra lấp đầy phần trống của container, nhưng item3 có flex-grow: 3 sẽ được thừa hưởng nhiều phần trống hơn các item còn lại chỉ có flex-grow: 1, cụ thể là hơn khoảng 3 lần. Và như đã đề cập ở trên, thuộc tính flex-grow làm cho các phần tử tỉ lệ với nhau. Giả sử các item đều có flex-grow: 4 và item3 có thuộc tính flex-grow: 12 thì nó cũng tương tự như là 1 với 3.

Bạn tự thay đổi các giá trị để hiểu rõ hơn nhé.

Thuộc tính flex-shrink ngược lại với thuộc tính flex-grow ở trên, nó không giãn ra mà lại co lại khi chúng ta thay đổi độ rộng của container.

Cú pháp:

Giá trị mặc định trong flex-shrink là 1, cho phép các phần tử co lại bằng nhau khi độ rộng container giảm xuống. Nếu flex-shrink: 0 thì item sẽ không co giãn mà lấy nguyên giá trị của thuộc tính width/height.

Nếu muốn item3 nó co lại nhiều hơn so với các item khác thì tăng giá trị flex-shrink của nó lên.

Resize cửa sổ trình duyệt nhỏ lại thì item3 co lại nhiều hơn:

Thuộc tính flex-basis sử dụng để xác định độ dài ban đầu của một item.

Cú pháp:

Nếu bạn xác định độ dài chung của class item là 100px nhưng tùy chỉnh item3 với flex-basis: 250px thì ta sẽ được như sau:

Thuộc tính flex sử dụng để gộp chung ba thuộc tính flex-grow, flex-shrink và flex-basis.

Cú pháp:

Thay vì phải sử dụng cả 3 thuộc tính:

Thì bạn có thể sử dụng thuộc tính flex một cách ngắn gọn:

Giá trị mặc định của flex là:

Lưu ý:

Thuộc tính align-self có tác dụng tương tự như align-items của phần container nhưng sử dụng riêng cho từng item, bạn có thể dùng nó để đặt lại vị trí cho một số item mà align-items đã quy định.

Align-self cũng có các giá trị giống như align-items đó là: flex-start, flex-end, center, stretch và baseline.

Ví dụ: Ta có 5 item đã được căn ra giữa nhờ align-items:center như sau:

Bạn có thể căn chỉnh các item theo ý thích, item1 nằm ở trên cùng, item3 thì phải kéo giãn dài ra và item5 thì phải nằm dưới cùng, hãy dùng align-self để đặt lại các vị trí.

Sử dụng flexbox để tạo một bộ sưu tập ảnh hiển thị bố cục khác nhau tùy thuộc vào kích thước màn hình:

Bạn tự chạy code, resize màn hình để xem kết quả nhé:

<!DOCTYPE html>

<html>

<head>

<title>

Page Title

</title>

<meta

charset

=

"UTF-8"

>

<meta

name

=

"viewport"

content

=

"width=device-width, initial-scale=1"

>

<style>

*

{

box

-

sizing

:

border

-

box

;

}

/* Style the body */

body

{

font

-

family

:

Arial

;

padding

:

10px

;

background

:

#e9d8f4;

margin

:

0

;

}

/* Header/logo Title */

.

header

{

padding

:

10px

;

text

-

align

:

center

;

background

:

white

;

color

:

#58257b;

}

.

header h1

{

font

-

size

:

40px

;

}

.

header p

{

font

-

size

:

20px

;

}

/* Định dạng navigation bar */

.

navbar

{

display

:

flex

;

background

-

color

:

#58257b;

}

/* Định dạng link điều hướng */

.

navbar a

{

color

:

#f2f2f2;

padding

:

14px

20px

;

text

-

decoration

:

none

;

text

-

align

:

center

;

}

/* Thay đổi màu liên kết khi di chuột qua */

.

navbar a

:

hover

{

background

-

color

:

#db7093;

color

:

white

;

}

/* Column container */

.

row

{

display

:

flex

;

flex

-

wrap

:

wrap

;

}

/* Tạo hai cột không bằng nhau nằm cạnh nhau */

/* Sidebar/Cột trái */

.

side

{

flex

:

30

%;

background

-

color

:

#f1f1f1;

padding

:

20px

;

}

/* Cột chính */

.

main

{

flex

:

70

%;

background

-

color

:

white

;

padding

:

20px

;

}

/* Hình ảnh tượng trưng */

.

fakeimg

{

background

-

color

:

#baa1cc;

width

:

100

%;

padding

:

20px

;

}

/* Footer */

.

footer

{

padding

:

10px

;

text

-

align

:

center

;

background

:

white

;

margin

-

top

:

10px

;

}

/* Bố cục linh hoạt: các cột xếp chồng lên nhau thay vì cạnh nhau khi màn hình

có chiều rộng dưới 600px */

@media

screen

and

(

max

-

width

:

600px

)

{

.

row

,

.

navbar

{

flex

-

direction

:

column

;

}

}

</style>

</head>

<body>

<!-- Header -->

<div

class

=

"header"

>

<h1>

Website Quản Trị Mạng

</h1>

<p>

Kiến thức - Kinh nghiệm - Hỏi đáp

</p>

<p>

Sử dụng

<b>

flexible

</b>

layout.

</p>

</div>

<!-- Navigation Bar -->

<div

class

=

"navbar"

>

<a

href

=

"#"

>

Làng Công nghệ

</a>

<a

href

=

"#"

>

Công nghệ

</a>

<a

href

=

"#"

>

Khoa học

</a>

<a

href

=

"#"

>

Cuộc sống

</a>

</div>

<!-- Nội dung -->

<div

class

=

"row"

>

<div

class

=

"side"

>

<h2>

Giới thiệu

</h2>

<div

class

=

"fakeimg"

style

=

"

height

:

200px

;

"

>

Ảnh

</div>

<p>

Quantrimang.com là mạng xã hội về khoa học công nghệ.

</p>

<h3>

Nổi bật

</h3>

<div

class

=

"fakeimg"

style

=

"

height

:

60px

;

"

>

Ảnh

</div><br>

<div

class

=

"fakeimg"

style

=

"

height

:

60px

;

"

>

Ảnh

</div><br>

<div

class

=

"fakeimg"

style

=

"

height

:

60px

;

"

>

Ảnh

</div>

<h3>

Follow Me

</h3>

<p>

Facebook

</p>

<p>

YouTube

</p>

</div>

<div

class

=

"main"

>

<h2>

Form - Biểu mẫu trong CSS

</h2>

<h5>

Quách Tỉnh, 14/02/2019

</h5>

<div

class

=

"fakeimg"

style

=

"

height

:

200px

;

"

>

Ảnh

</div>

<p>

Form là một phần không thể thiếu trong bất kì loại website nào.

</p>

<p>

Ở bài viết này, Quantrimang.com sẽ hướng dẫn bạn cách xây dựng phần

giao diện hiển thị của một biểu mẫu cơ bản. Giao diện này có thể được làm

khá đẹp mắt với CSS

</p>

<br>

<h2>

Attribute Selector trong CSS

</h2>

<h5>

Quách Tỉnh, 14/02/2019

</h5>

<div

class

=

"fakeimg"

style

=

"

height

:

200px

;

"

>

Ảnh

</div>

<p>

Attribute selector là cách chọn các phần tử bạn muốn định kiểu trong

tài liệu HTML dựa vào thuộc tính của một hay nhiều thẻ HTML nào đó.

</p>

<p>

Attribute selector có thể chọn được các đối tượng mà không cần phải

khai báo thêm các Class hoặc ID vào trong thẻ HTML và vẫn có thể hướng

được đến các thành phần đó, giúp code gọn gàng hơn và mạch lạc hơn.

</p>

</div>

</div>

<!-- Footer -->

<div

class

=

"footer"

>

<h4>

Giấy phép số 362/GP-BTTTT. Bộ TT&TT cấp ngày 30/06/2016.

</h4>

</div>

</body>

</html>