Hướng dẫn display: flex css - hiển thị: flex css

• Trang chủ
• Hướng dẫn học
• Hướng dẫn học CSS3
• Display flex

display: flex là gì?

CSS3 ra mắt 2 giá trị mới cho thuộc tính display là flex và inline-flex, giúp sắp xếp, bố cục các thành phần khối (block) một cách dễ dàng, linh hoạt hơn trước.

display: flex và display: inline-flex và các thuộc tính đi kèm được sử dụng khá nhiều trong việc xử lý các cấu trúc, nếu như trước đây đôi lúc cần Javascript để hỗ trợ, thì giờ đây display flex sẽ giúp xử lý nhiều cấu trúc phức tạp một cách dễ dàng.

Cấu trúc cơ bản

Cách sử dụng

HTML viết:

    
1
    
2
    
3

CSS viết - khi chưa sử dụng

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ lần lượt áp dụng display: flex và display: inline-flex để hiểu hơn cách hoạt động của các thuộc tính này:

display: flex

.box { 
    border: 1px solid #ccc; 
    min-height: 300px;
    display: flex;
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ lần lượt áp dụng display: flex và display: inline-flex để hiểu hơn cách hoạt động của các thuộc tính này:

display: flex

.box { 
    border: 1px solid #ccc; 
    min-height: 300px;
    display: inline-flex;
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

Hiển thị trình duyệt:

Bây giờ ta sẽ lần lượt áp dụng display: flex và display: inline-flex để hiểu hơn cách hoạt động của các thuộc tính này:

display: flex

Ta thấy display: flex đã giúp cho các thành phần được hiển thị linh hoạt hơn.

.box {
    Viết ở chỗ này ^^
}

display: inline-flex

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

display: flex;justify-content: space-around;

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

.box { 
    border: 1px solid #ccc; 
    min-height: 300px; 
} 
.box div { 
    margin: 5px; 
    text-align: center; 
    background-color: #72C953;
} 
.box div:nth-child(1) { 
    height: 70px; 
    width: 70px; 
    line-height: 70px;
} 
.box div:nth-child(2) { 
    height: 50px; 
    width: 50px; 
    line-height: 50px;
} 
.box div:nth-child(3) { 
    height: 30px; 
    width: 30px; 
    line-height: 30px;
}

display: flex;align-items: flex-end;