CSS3: Flex Item

Khóa học qua video:

Các thuộc tính của Flex Items gồm:

order
flex-grow
flex-shrink
flex-basis
flex
align-self

Thuộc tính order

Thuộc tính order dùng để xác định thứ tự của các mục flex.

Ví dụ:

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

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div>
  <div style="order: 1">4</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex-grow

Thuộc tính flex-grow dùng để xác định xem mỗi mục flex sẽ có tốc độ dãn tương đối bao nhiêu so với các mục flex còn lại.

Ví dụ dưới đây cho thấy mục flex thứ 3 sẽ có độ dãn nhanh gấp 8 lần so với các mục flex khác, bạn thay đổi độ rộng của trình duyệt để thấy điều này nhé:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f1;
  }

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

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex-shrink

Thuộc tính flex-shrink dùng để xác định xem một mục flex sẽ co tương đối bao nhiêu so với các mục flex còn lại.

Ví dụ sau thể hiện mục flex thứ 3 sẽ có độ co nhanh gấp 8 lần so với những mục flex khác, bạn thay đổi độ rộng của trình duyệt để thấy điều này nhé:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f1;
  }

  .flex-container>div {
    background-color: DodgerBlue;
    color: white;
    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 style="flex-shrink: 8">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex-basis

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

Ví dụ dưới đây đặt độ dài ban đầu cho mục flex thứ 3 thành 200px:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f1;
  }

  .flex-container > div {
    background-color: DodgerBlue;
    color: white;
    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 style="flex-basis:200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính flex

Thuộc tính flex là thuộc tính viết tắt của các thuộc tính flex-grow, flex-shrink và flex-basis.

Ví dụ dưới đây thiết lập mục flex thứ 3 không dãn, không co và độ dài ban đầu là 200px:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f1;
  }

  .flex-container>div {
    background-color: DodgerBlue;
    color: white;
    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 style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

</body>
</html>

Kết quả:

Thuộc tính align-self

Thuộc tính align-self dùng để quy định việc căn chỉnh cho những mục đã được chọn bên trong flex container.

Thuộc tính align-self sẽ ghi đè những phần căn chỉnh mặc định được thiết lập bởi thuộc tính align-items của flex container.

Ví dụ sau đây sẽ căn chỉnh mục flex thứ 3 nằm giữa container:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    height: 200px;
    background-color: #f1f1f1;
  }

  .flex-container > div {
    background-color: DodgerBlue;
    color: white;
    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 style="align-self: center">3</div>
  <div>4</div>
</div>

</body>
</html>

Kết quả:

Ví dụ sau sẽ căn chỉnh mục flex thứ 2 sẽ nằm ở trên cùng của và mục flex thứ 3 sẽ nằm ở dưới cùng của container:

<!DOCTYPE html>
<html>
<head>
<style>
  .flex-container {
    display: flex;
    height: 200px;
    background-color: #f1f1f1;
  }

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

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

</body>
</html>

Kết quả:

» Tiếp: Flex Responsive

« Trước: Flex Container

Khóa học qua video:

Lập trình Python All Lập trình C# All SQL Server All Lập trình C All Java PHP HTML5-CSS3-JavaScript

Đăng ký Hội viên

Tất cả các video dành cho hội viên