Lesson 4: Layout

Những kiến thức về CSS giúp tổ chức bố cục cho trang Web, phân bố, thiết kế những giao diện phức tạp một cách nhanh chóng. (Box model cũng là một trong những kiến thức của Layout)

display

Thuộc tính display trong CSS xác định cách một phần tử HTML sẽ được hiển thị trong tài liệu. Giá trị của display có thể ảnh hưởng đến cách phần tử được căn chỉnh, kích thước và vị trí trong bố cục trang.

Theo dõi ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .block-element {
            display: block;
        }

        .inline-element {
            display: inline;
        }

        .inline-block-element {
            display: inline-block;
        }

        .none-element {
            display: none;
        }
    </style>
</head>

<body>
    <div class="block-element">Block Element</div>
    <span class="inline-element">Inline Element</span>
    <div class="inline-block-element">Inline-Block Element</div>
    <div class="none-element">This will not be displayed</div>
</body>

</html>

display: block:

Phần tử chiếm toàn bộ chiều rộng của dòng (từ trái sang phải), nghĩa là nó sẽ đẩy các phần tử khác xuống dòng mới. Đây là giá trị mặc định của các phần tử khối (block-level elements) như <div>, <p>, <h1>, v.v.
Có thể cài đặt đầy đủ các thuộc tính: width, height, margin, padding

display: inline:

Phần tử chỉ chiếm kích thước vừa bằng nội dung của nó (fit-content), vì vậy thuộc tính width, height không thể cài đặt với giá trị inline
margin: giá trị inline sẽ chỉ nhận giá trị margin left hoặc margin right

display: inline-block:

Cho phép phần tử nằm trên cùng một dòng với các phần tử khác có chứa inline, nhưng vẫn có thể điều chỉnh kích thước như một block element.
Có thể cài đặt đầy đủ các thuộc tính: width, height, margin, padding

display: none:

Ẩn phần tử ngoài giao diện, trang web sẽ coi như phần tử này không tồn tại, mặc dù trong mã nguồn vẫn có

Các bản design hay giao diện thiết kế hiện nay đều sắp xếp nhiều các phần tử theo bố cục, trên cùng 1 hàng hoặc theo hàng dọc rất nhiều

Ví dụ

Vậy để làm được các hình thái bố cục như trên, các thuộc tính về display chắc chắn không thể thiếu, nhưng điều này sẽ làm tăng tính phức tạp, khó kiểm soát của việc tổ chức mã nguồn.

Từ đó kiến thức về flexbox, grid được sinh ra để hỗ trợ cho việc tạo các bố cục phức tạp có kiểm soát hơn và thống nhất hơn.

flexbox

Tư tưởng của flexbox là tư tưởng 'chỉ huy'

Ý nghĩa rằng, sẽ có một phần tử, sử dụng các thuộc tính gì đó để điều phối các phần tử con thuộc 'phạm vi' của nó theo những quy luật.

Đối với tính chất của flexbox, sẽ giúp giàn các phần tử theo 2 chiều: ngang, dọc màn hình, hay gọi theo lý thuyết là:

main-axis: trục chính, tương ứng với chiều ngang
cross-axis: trục cắt ngang, tương ứng với chiều dọc (chục chính theo chiều nào, thì trục cắt ngang sẽ là chiều còn lại)

Theo dõi hình ảnh phía dưới (Chiều mũi tên, chính là chiều mặc định của flexbox cho 2 trục)

Ta có giao diện như sau:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
        }

        div.box3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box box1">MINDX 1</div>
    <div class="box box2">MINDX 2</div>
    <div class="box box3">MINDX 3</div>
</body>

</html>

Để cho các phần tử này sẽ thống nhất tính chất, ta thực hiện tạo 1 thẻ parent bọc bên ngoài các khối này.

<div class="parent">
 <div class="box box1">MINDX 1</div>
 <div class="box box2">MINDX 2</div>
 <div class="box box3">MINDX 3</div>
</div>

Sử dụng thuộc tính flex với display

div.parent {
    display: flex;
}

Kết quả:

Khoảng tím được gọi là khoảng không gian thừa còn lại của phần tử cha (parent).

Nếu không có tức không có không gian thừa

Sau khi sử dụng flex, cho parent - tức phần tử cha bao bọc, các phần tử con bên trong lập tức được di chuyển theo trục mà flex quy định, luôn di chuyển theo chiều của trục main-axis.

Các thuộc tính sử dụng cho parent khi đã có flex:

flex-direction
Điều chỉnh hướng của trục chính
- row: Sắp xếp theo hàng ngang, từ trái sang phải (mặc định).
- row-reverse: Sắp xếp theo hàng ngang, từ phải sang trái (bị thay đổi thứ tự).
- column: Sắp xếp theo cột, từ trên xuống dưới.
- column-reverse: Sắp xếp theo cột, từ dưới lên trên.
justify-content
Điều chỉnh khoảng cách, vị trí của các phần tử con theo không gian thừa của phần tử cha theo trục chính
- flex-start: Căn về đầu (mặc định).
- flex-end: Căn về cuối (không bị thay đổi thứ tự).
- center: Căn giữa.
- space-between: Khoảng cách giữa các phần tử bằng nhau.
- space-around: Khoảng cách xung quanh các phần tử bằng nhau.
- space-evenly: Khoảng cách của các phần từ và cách lề bằng nhau
align-itemsCài đặt parent flex với height là 500px theo ví dụ trên.
Căn chỉnh các flex item (phần tử con nằm bên trong parent flex) theo chiều, hướng trục cross-axis
- flex-start: Căn về đầu (top) container (mặc định).
- flex-end: Căn về cuối (bottom) container.
- center: Căn giữa.
flex-wrap
Cài đặt cho các phần tử trong container, nếu kích thước vượt quá container có thể xuống hàng
- nowrap: Không xuống hàng.
- wrap: Cho phép xuống hàng mới nếu hết không gian.
- wrap-reverse: Xuống hàng nhưng theo chiều đảo ngược ngược lại thứ tự.

Đối với các thuộc tính flex-wrap, các bạn hãy thử cài đặt thêm các phần tử và trải nghiệm để hiểu rõ hơn!

orderCài đặt vị trí sắp xếp cho phần tử cụ thể, phần tử đầu tiên mặc định là 0

Ví dụ cài đặt:

div.box1 {
            background-color: yellow;
            order: 0;
}

div.box2 {
            background-color: red;
            order: 2;
}

div.box3 {
            background-color: blue;
            order: 1;
}

align-selfCho phép điều chỉnh căn chỉnh của một phần tử cụ thể (flex item), ghi đè align-items của container.

div.box2 {
            background-color: red;
            align-self: center;
}

flex Áp dụng cho phần tử cụ thể (flex item), cho phép linh độ, điều chỉnh kích thước của phần thử con theo khoảng không gian thừa còn lại của phần tử cha flex
Giá trị của flex ta hiểu đơn giản, nó sẽ coi không gian thừa là 100%, vậy ta muốn cài đặt như thế nào ta chỉ việc chia ra con số mà mình mong muốn

Hãy thử cài đặt thuộc tính flex cho từng 1 box, kết hợp nhiều box và đưa ra nhất xét.

Thuộc tính này là tổng hợp của flex-grow, flex-shrink,flex-basis.Hãy tìm hiểu thêm để làm rõ tính chất.

Chơi game để rèn luyện kỹ năng về flexbox:

grid

CSS Grid tạo ra một hệ thống dạng lưới với các hàng và cột, giúp bố trí các phần tử trên trang web một cách rõ ràng và có cấu trúc hơn so với các phương pháp khác như Flexbox.

flex linh động hơn

grid cấu trúc hơn

Tương tự như flex, grid cũng theo tư tưởng 'chỉ huy', tức sẽ có một phần tử cha, bao bọc bên ngoài và điều phối các phần tử con bên trong.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
        }

        div.box3 {
            background-color: blue;
        }

        div.box4 {
            background-color: green;
        }

        div.parent {
            display: grid;
            grid-template-columns: 200px 200px;
            grid-template-rows: 200px 200px;
            grid-gap: 50px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box box1">MINDX 1</div>
        <div class="box box2">MINDX 2</div>
        <div class="box box3">MINDX 3</div>
        <div class="box box4">MINDX 4</div>
    </div>
</body>

</html>

Thuộc tính:

grid-template-columns tạo ra số lượng cột với mỗi cột có kích thước mong muốn, mỗi giá trị đại diện cho một cột, cách nhau bới dấu cách.
grid-template-rows tạo ra số lượng hàng với mỗi hàng có kích thước mong muốn, mỗi giá trị đại diện cho một hàng, cách nhau bới dấu cách.
grid-gap khoảng cách của các hàng, cột trong grid

Trên đây là những kiến thức giúp lập trình viên có thể tạo ra bố cục giao diện một cách nhanh chóng, thống nhất và có sự kiểm soát, hãy tập luyện để thành thạo chúng.

PreviousLesson 3: Box model & position NextLesson 5: Responsive, Tailwind, AI

Last updated 5 months ago

Lesson 4: Layout

display

Theo dõi ví dụ:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .block-element {
            display: block;
        }

        .inline-element {
            display: inline;
        }

        .inline-block-element {
            display: inline-block;
        }

        .none-element {
            display: none;
        }
    </style>
</head>

<body>
    <div class="block-element">Block Element</div>
    <span class="inline-element">Inline Element</span>
    <div class="inline-block-element">Inline-Block Element</div>
    <div class="none-element">This will not be displayed</div>
</body>

</html>

display: block:

Phần tử chiếm toàn bộ chiều rộng của dòng (từ trái sang phải), nghĩa là nó sẽ đẩy các phần tử khác xuống dòng mới. Đây là giá trị mặc định của các phần tử khối (block-level elements) như <div>, <p>, <h1>, v.v.
Có thể cài đặt đầy đủ các thuộc tính: width, height, margin, padding

display: inline:

Phần tử chỉ chiếm kích thước vừa bằng nội dung của nó (fit-content), vì vậy thuộc tính width, height không thể cài đặt với giá trị inline
margin: giá trị inline sẽ chỉ nhận giá trị margin left hoặc margin right

display: inline-block:

Cho phép phần tử nằm trên cùng một dòng với các phần tử khác có chứa inline, nhưng vẫn có thể điều chỉnh kích thước như một block element.
Có thể cài đặt đầy đủ các thuộc tính: width, height, margin, padding

display: none:

Ẩn phần tử ngoài giao diện, trang web sẽ coi như phần tử này không tồn tại, mặc dù trong mã nguồn vẫn có

Các bản design hay giao diện thiết kế hiện nay đều sắp xếp nhiều các phần tử theo bố cục, trên cùng 1 hàng hoặc theo hàng dọc rất nhiều

Ví dụ

Từ đó kiến thức về flexbox, grid được sinh ra để hỗ trợ cho việc tạo các bố cục phức tạp có kiểm soát hơn và thống nhất hơn.

flexbox

Tư tưởng của flexbox là tư tưởng 'chỉ huy'

Ý nghĩa rằng, sẽ có một phần tử, sử dụng các thuộc tính gì đó để điều phối các phần tử con thuộc 'phạm vi' của nó theo những quy luật.

Đối với tính chất của flexbox, sẽ giúp giàn các phần tử theo 2 chiều: ngang, dọc màn hình, hay gọi theo lý thuyết là:

main-axis: trục chính, tương ứng với chiều ngang
cross-axis: trục cắt ngang, tương ứng với chiều dọc (chục chính theo chiều nào, thì trục cắt ngang sẽ là chiều còn lại)

Theo dõi hình ảnh phía dưới (Chiều mũi tên, chính là chiều mặc định của flexbox cho 2 trục)

Ta có giao diện như sau:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
        }

        div.box3 {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="box box1">MINDX 1</div>
    <div class="box box2">MINDX 2</div>
    <div class="box box3">MINDX 3</div>
</body>

</html>

Để cho các phần tử này sẽ thống nhất tính chất, ta thực hiện tạo 1 thẻ parent bọc bên ngoài các khối này.

<div class="parent">
 <div class="box box1">MINDX 1</div>
 <div class="box box2">MINDX 2</div>
 <div class="box box3">MINDX 3</div>
</div>

Sử dụng thuộc tính flex với display

div.parent {
    display: flex;
}

Kết quả:

Khoảng tím được gọi là khoảng không gian thừa còn lại của phần tử cha (parent).

Nếu không có tức không có không gian thừa

Các thuộc tính sử dụng cho parent khi đã có flex:

flex-direction
Điều chỉnh hướng của trục chính
- row: Sắp xếp theo hàng ngang, từ trái sang phải (mặc định).
- row-reverse: Sắp xếp theo hàng ngang, từ phải sang trái (bị thay đổi thứ tự).
- column: Sắp xếp theo cột, từ trên xuống dưới.
- column-reverse: Sắp xếp theo cột, từ dưới lên trên.
justify-content
Điều chỉnh khoảng cách, vị trí của các phần tử con theo không gian thừa của phần tử cha theo trục chính
- flex-start: Căn về đầu (mặc định).
- flex-end: Căn về cuối (không bị thay đổi thứ tự).
- center: Căn giữa.
- space-between: Khoảng cách giữa các phần tử bằng nhau.
- space-around: Khoảng cách xung quanh các phần tử bằng nhau.
- space-evenly: Khoảng cách của các phần từ và cách lề bằng nhau
align-itemsCài đặt parent flex với height là 500px theo ví dụ trên.
Căn chỉnh các flex item (phần tử con nằm bên trong parent flex) theo chiều, hướng trục cross-axis
- flex-start: Căn về đầu (top) container (mặc định).
- flex-end: Căn về cuối (bottom) container.
- center: Căn giữa.
flex-wrap
Cài đặt cho các phần tử trong container, nếu kích thước vượt quá container có thể xuống hàng
- nowrap: Không xuống hàng.
- wrap: Cho phép xuống hàng mới nếu hết không gian.
- wrap-reverse: Xuống hàng nhưng theo chiều đảo ngược ngược lại thứ tự.

Đối với các thuộc tính flex-wrap, các bạn hãy thử cài đặt thêm các phần tử và trải nghiệm để hiểu rõ hơn!

orderCài đặt vị trí sắp xếp cho phần tử cụ thể, phần tử đầu tiên mặc định là 0

Ví dụ cài đặt:

div.box1 {
            background-color: yellow;
            order: 0;
}

div.box2 {
            background-color: red;
            order: 2;
}

div.box3 {
            background-color: blue;
            order: 1;
}

align-selfCho phép điều chỉnh căn chỉnh của một phần tử cụ thể (flex item), ghi đè align-items của container.

div.box2 {
            background-color: red;
            align-self: center;
}

flex Áp dụng cho phần tử cụ thể (flex item), cho phép linh độ, điều chỉnh kích thước của phần thử con theo khoảng không gian thừa còn lại của phần tử cha flex
Giá trị của flex ta hiểu đơn giản, nó sẽ coi không gian thừa là 100%, vậy ta muốn cài đặt như thế nào ta chỉ việc chia ra con số mà mình mong muốn

Hãy thử cài đặt thuộc tính flex cho từng 1 box, kết hợp nhiều box và đưa ra nhất xét.

Thuộc tính này là tổng hợp của flex-grow, flex-shrink,flex-basis.Hãy tìm hiểu thêm để làm rõ tính chất.

Chơi game để rèn luyện kỹ năng về flexbox:

grid

flex linh động hơn

grid cấu trúc hơn

Tương tự như flex, grid cũng theo tư tưởng 'chỉ huy', tức sẽ có một phần tử cha, bao bọc bên ngoài và điều phối các phần tử con bên trong.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Box model & position</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            padding: 50px;
            border: 10px solid black;
            margin: 15px;
        }

        div.box1 {
            background-color: yellow;
        }

        div.box2 {
            background-color: red;
        }

        div.box3 {
            background-color: blue;
        }

        div.box4 {
            background-color: green;
        }

        div.parent {
            display: grid;
            grid-template-columns: 200px 200px;
            grid-template-rows: 200px 200px;
            grid-gap: 50px;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="box box1">MINDX 1</div>
        <div class="box box2">MINDX 2</div>
        <div class="box box3">MINDX 3</div>
        <div class="box box4">MINDX 4</div>
    </div>
</body>

</html>

Thuộc tính:

grid-template-columns tạo ra số lượng cột với mỗi cột có kích thước mong muốn, mỗi giá trị đại diện cho một cột, cách nhau bới dấu cách.
grid-template-rows tạo ra số lượng hàng với mỗi hàng có kích thước mong muốn, mỗi giá trị đại diện cho một hàng, cách nhau bới dấu cách.
grid-gap khoảng cách của các hàng, cột trong grid