Sử dụng Flexbox cho các cột có chiều cao bằng nhau trong Digital Pro

Trong nhóm Genesis Facebook, một người dùng đã viết:

Tôi hiện đang làm việc trên một trang web sử dụng Digital-Pro và tôi tự hỏi làm cách nào để có thể triển khai một số CSS để đảm bảo các widget văn bản có cùng chiều cao bất kể văn bản là gì?

Trong Demo chủ đề, Khu vực Widget Trang 3: tất cả các widget văn bản được căn chỉnh vì chúng gần như có cùng số ký tự hoặc số từ.

Trong trường hợp của tôi, chúng khá gần nhau về số lượng từ và vẫn chưa được căn chỉnh hoàn toàn.

Chỉ cần thiết lập hiển thị vùng chứa và các mục dưới dạng flex , các mục sẽ có chiều cao bằng nhau. Sau khi hoàn tất, chúng ta có thể định vị các nút hoàn toàn tương đối so với ba widget để chúng xuất hiện ở dưới cùng.

Thực hiện những thay đổi này trong style.css của Digital Pro :

  1. Gần đầu phần truy vấn phương tiện, thêm
@media only screen and (max-width: 860px) {

	#front-page-3 .widget-area a.button {
		padding: 12px 15px;
	}

}
  1. Bên trong truy vấn phương tiện 801px, hãy thêm
#front-page-3 .widget-area {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	-webkit-flex-wrap: wrap;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
}

#front-page-3 .widget-area a.button {
	position: absolute;
	bottom: 0;
	left: 50%;
	-webkit-transform: translate(-50%, 0);
	-moz-transform: translate(-50%, 0);
	-ms-transform: translate(-50%, 0);
	-o-transform: translate(-50%, 0);
	transform: translate(-50%, 0);
}

#front-page-3 .widget:nth-child(2),
#front-page-3 .widget:nth-child(3),
#front-page-3 .widget:nth-child(4) {
	display: -webkit-flex;
	display: -ms-flexbox;
	display: flex;

	position: relative;
	padding-bottom: 50px;
}
  1. Bên trong truy vấn phương tiện 800px, hãy thêm
#front-page-3 .widget-area a.button.small {
	padding: 12px 20px;
}