CSS3: Flex Container
Giải phóng thời gian, khai phóng năng lực
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ả:
Giải phóng thời gian, khai phóng năng lực