Ứng dụng và lợi ích của CSS Flexbox (phần 2)

5.1 Thuộc tính cho Flexbox container ( tiếp )

Ở phần 2, mình xin giới thiệu tiếp về các thuộc tính của flex-container và giới thiệu về grid bootstrap theo chiều dọc version Flexbox.

• align-content: Thuộc tính align-content giúp định dạng các items nằm trong container theo chiều dọc của nó.

.flex-container {
  -webkit-align-content: stretch; /* Safari */
  align-content:         stretch;
}

Với thuộc tính này, các row sẽ được sắp xếp sao cho có khoảng trắng ở dưới mỗi row và nó bằng nhau.

.flex-container {
  -webkit-align-content: flex-start; /* Safari */
  align-content:         flex-start;
}

Với thuộc tính này các items sẽ được sắp xếp dồn lên phía trên của container.

.flex-container {
  -webkit-align-content: flex-end; /* Safari */
  align-content:         flex-end;
}

Với flex-end, các items sẽ được dồn xuống phía dưới theo chiều dọc của container.

.flex-container {
  -webkit-align-content: center; /* Safari */
  align-content:         center;
}

Nếu bạn muốn các items luôn nằm giữa thì điều bạn cần đó chính là align-content: center.

.flex-container {
  -webkit-align-content: space-between; /* Safari */
  align-content:         space-between;
}

Còn nếu bạn muốn các items cách đều nhau và 2 item sát 2 viền bên thì điều bạn cần chính là đây.
.

.flex-container {
  -webkit-align-content: space-around; /* Safari */
  align-content:         space-around;
}

Và nếu các bạn muốn, 1 phiên bản theo chiều dọc của grid bootstrap ư, và space-around là điều bạn muốn.

Giá trị mặc định : stretch.

Ở phần tiếp theo, mình sẽ giới thiệu cho các bạn về các thuộc tính Flexbox của flex items, cách tổ chức sắp xếp các items trong flex-container của nó.

Tài liệu tham khảo: https://scotch.io/tutorials/a-visual-guide-to-css3-flexbox-properties