CSS3: Flex Container

Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Flex Container

Mục lục bài viết:


Thuộc tính flex-direction

flex-direction định nghĩa hướng mà container muốn ngăn xếp các mục flex.

Ví dụ với flex-direction: column:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-direction: column;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với flex-direction: column-reverse:

Giá trị column-reverse ngăn xếp các mục flex theo chiều dọc (nhưng từ dưới lên trên):

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-direction: column-reverse;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với flex-direction: row:

Giá trị row ngăn xếp các mục flex theo chiều ngang (từ trái sang phải):

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-direction: row;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với flex-direction: row-reverse:

Giá trị row-reverse ngăn xếp các mục flex theo chiều ngang (nhưng từ phải sang trái):

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    flex-direction: row-reverse;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex-wrap

Thuộc tính flex-wrap xác định xem các mục flex nên được gộp hay không.

Ví dụ với giá trị flex-wrap: wrap:

Ví dụ dưới đây có 12 mục flex để thấy rõ hơn khả năng của thuộc tính flex-wrap.

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    flex-wrap: wrap;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị flex-wrap: nowrap:

nowrap quy định cụ thể giá trị trong đó các mục flex sẽ không gộp (đây là mặc định):

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-wrap: nowrap;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị flex-wrap: wrap-reverse:

wrap-reverse quy định cụ thể giá trị các mục flex sẽ gộp nếu cần thiết, theo thứ tự ngược:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-wrap: wrap-reverse;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex-flow

Thuộc tính flex-flow là cách thức thể hiện gộp cho các thuộc tính flex-direction và flex-wrap.

Ví dụ:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    flex-flow: row wrap;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính justify-content

Thuộc tính justify-content được sử dụng để căn (align) các mục flex (căn left và căn center).

Ví dụ đối với justify-content: center:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: center;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ đối với justify-content: flex-start:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: flex-start;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ đối với justify-content: flex-end:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: flex-end;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ đối với justify-content: space-around:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: space-around;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ đối với justify-content: space-between:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: space-between;
    background-color: DodgerBlue;
  }
  
  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính align-items

Thuộc tính align-items được sử dụng để sắp xếp các mục flex.

Trong những ví dụ sau đây ta đặt vùng chứa với độ cao 200 pixel để cho thấy thuộc tính align-items có khả năng căn chỉnh tốt như thế nào.

Ví dụ với giá trị align-items: center:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: center;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị align-items: flex-start:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: flex-start;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị align-items: flex-end:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: flex-end;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị align-items: stretch:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: stretch;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ với giá trị align-items: baseline:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: baseline;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sau đây sử dụng các kích thước phông chữ khác nhau để thấy rõ tác dụng của giá trị baseline.

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 200px;
    align-items: baseline;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div><h1>1</h1></div>
  <div><h6>2</h6></div>
  <div><h3>3</h3></div>
  <div><small>4</small></div>
</div>

</body>
</html>

Kết quả:

Thuộc tính align-content

Thuộc tính align-content được sử dụng để sắp xếp các dòng flex.

Trong những ví dụ dưới đây, ta sử dụng vùng chứa cao 600 pixel, với thuộc tính flex-wrap được đặt thành wrap, để thể hiện thuộc tính align-content tốt hơn.

Ví dụ sử dụng giá trị align-content: space-between:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: space-between;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sử dụng giá trị align-content: space-around:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: space-around;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sử dụng giá trị align-content: stretch:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: stretch;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sử dụng giá trị align-content: center:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: center;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sử dụng giá trị align-content: flex-start:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: flex-start;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sử dụng giá trị align-content: flex-end:

<!DOCTYPE html>
<html>
<head>
  <style>
  .flex-container {
    display: flex;
    height: 600px;
    flex-wrap: wrap;
    align-content: flex-end;
    background-color: DodgerBlue;
  }

  .flex-container > div {
    background-color: #f1f1f1;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
  <div>12</div>
</div>

</body>
</html>

Kết quả:

Căn giữa hoàn hảo

Trong ví dụ sau, ta sẽ giải quyết một vấn đề về kiểu rất phổ biến: căn giữa hoàn hảo.

GIẢI PHÁP: Đặt cả thuộc tính justify-content và thuộc tính align-items thành giá trị center, và mục flex sẽ được căn giữa một cách hoàn hảo:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 300px;
    background-color: DodgerBlue;
  }

  .flex-container>div {
    background-color: #f1f1f1;
    color: white;
    width: 100px;
    height: 100px;
  }
</style>
</head>
<body>

<div class="flex-container">
  <div></div>
</div>

</body>
</html>

Kết quả:

» Tiếp: Flex Item
« Trước: Cách tạo chân đường link
Các khóa học qua video:
Python SQL Server PHP C# Lập trình C Java HTML5-CSS3-JavaScript
Học trên YouTube <76K/tháng. Đăng ký Hội viên
Viết nhanh hơn - Học tốt hơn
Giải phóng thời gian, khai phóng năng lực
Copied !!!