Khởi động flex-grow
|
Đến với bài viết này mình xin chia sẻ cách tạo lớp để chia Hàng và cột không cần sử dụng thông qua Bootstrap. Có nhiều bạn sẽ hỏi, tại sao không cài đặt bootstrap rồi xài , vì đó là một thư viện có sẵn ? . Nên bài viết này mình sẽ chia sẻ phương pháp chia sẻ hàng và cột không thông qua Boostrap Show  1. Giới thiệuTrước hết mình xin tổng hợp lại các cách và phương pháp có thể chia hàng và cột tương tư như bootstrap. Sử dụng Float, Flex, Grid. Bài này mình đề cập đến flex và grid, vì hiện tại có rất nhiều thư viện css đều sử dụng flex để dàn ngang các thành phần. Còn grid thì mấy thấy rất dễ sử dụng nên mình sẽ nói sơ qua về cách sử dụng 2. Use Flex BoxTrước hết các bạn đã tạo class as in bootstrap as. hàng ngang. col-1. col-2. col-3. col-4. col-5. col-6. col-7. col-9. col-10. col-11. col-12 Và mình sẽ thêm css cho từng class như sau
.row_divide {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.col-1 {
flex: 0 1 7%;
max-width: 7%;
width: 100%;
}
.col-2 {
flex: 0 1 14%;
max-width: 14%;
width: 100%;
}
.col-3 {
flex: 0 1 22%;
max-width: 22%;
width: 100%;
}
.col-4 {
flex: 0 1 31%;
max-width: 31%;
width: 100%;
}
.col-5 {
flex: 0 1 40%;
max-width: 40%;
width: 100%;
}
.col-6 {
flex: 0 1 48%;
max-width: 48%;
width: 100%;
}
.col-7 {
flex: 0 1 57%;
max-width: 57%;
width: 100%;
}
.col-8 {
flex: 0 1 65%;
max-width: 65%;
width: 100%;
}
.col-9 {
flex: 0 1 73%;
max-width: 73%;
width: 100%;
}
.col-10 {
flex: 0 1 81%;
max-width: 81%;
width: 100%;
}
.col-11 {
flex: 0 1 90%;
max-width: 90%;
width: 100%;
}
.col-12 {
flex: 0 1 100%;
max-width: 100%;
width: 100%;
}
Đối chiếu với lớp. hàng mình thêm thuộc tính flex-wrap with value is wrap. Điều này sẽ giúp khi các cột trên một hàng có tổng độ dài vượt quá 100% thì sẽ tự động xuống dòng Trong các class trên mình sử dụng 3 thuộc tính flex, max-width và width. Thuộc tính flex có chức năng giúp khi các cột trên một hàng có tổng độ dài vượt quá 100% thì sẽ tự động xuống dòng. Thuộc tính flex-problem có 3 giá trị là flex-grow flex-shrink flex-basis. Flex-grow chỉ là số chia phần của các lớp nằm ngang ở đây mình đặt các giá trị là 0. Flex-shrink is only number for known mối quan hệ khi mà co giãn phần tử. Ở đây mình đặt giá trị là 1 để các phần thử nghiệm co giãn được. Sử dụng cơ sở linh hoạt để quy định độ dài ban đầu của một mục. Ở đây theo từng cột mình đặt giá trị tương ứng với từng độ dài Như vậy là chúng ta đã hoàn thành phần css giờ tiếp theo là phần sử dụng trên html. Như mình đã nói trước đây là cách sử dụng như bootstrap Sử dụng flexbox (Flexible Box Layout), cho phép bố cục giao diện hết sức mềm dẻo, dễ tùy biến, trả lời ứng dụng cao về tính năng Repositive, flexbox được thiết kế như một mô hình bố cục theo chiều, từ đó các phần tử được . Flexbox cho phép bạn trải nghiệm các phần tử con trong một phần tử chứa, sắp đặt thứ tự của chúng, căn chỉnh phân bố không gian xung quanh chúng. Bạn cũng có thể trải nghiệm phần tử theo hướng ngang hay đứng Trong CSS các thuộc tính liên quan đến flexbox bao gồm. flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content, order, align-self, flex-grow, flex-shrink, flex-base, flex Bao gồm phần thiết lập phần tử - kích hoạt flexĐể sử dụng flexbox cần có một phần tử thiết lập chính là phần tử chứa, sau đó là phần tử con bên trong phần tử chứa. Muốn kích hoạt phần tử chứa flexbox có tính năng chỉ cần thiết lập cho nó thuộc tính .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
5 hoặc .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
6. Ví dụ ở dưới lớp thiết lập. containerflex có kích hoạt flexbox, sau đó triển khai HTML áp dụng nóKhi phần tử đã kích hoạt flexbox thì điều khiển các phần tử con bằng các thuộc tính. hướng flex-quấn flex-biện minh nội dung căn chỉnh nội dung căn chỉnh nội dung .containerflex {
display: flex; /* Kích hoạt flexbox cho phần tử chứa */
flex-direction: row; /* Thiết lập hướng chính */
flex-wrap: nowrap; /* Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/
justify-content: flex-end; /* Căn chỉnh nội dung bên trong container có flexbox*/
align-items: stretch; /* Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/
align-content: stretch; /* Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/
padding: 5px;
background: #9C27B0;
min-width: 320px;
min-height: 320px;
margin: auto;
}
.flexitem {
padding: 20px;
background: lightblue;
margin: 1px;
font-weight: bold;
}
CSS phần tử cha (vùng chứa) .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
+ Thêm phần tử - Bớt phần tử Thuộc tính flex-direction Khi kích hoạt linh hoạt cho một phần tử, thì các phần tử chứa trong đó sẽ được bố trí liên tục theo một hướng được gọi là hướng chính. Hướng chính được thiết lập bằng thuộc tính flex-direction - khi đã có hướng chính thì hướng thứ hai được sử dụng đến là hướng góc góc với hướng chính (từ sau gọi là hướng góc góc), flex-direction nó nhận các giá trị
Thuộc tính flex-wrap Nó nhận các giá trị
Thuộc tính justify-content Nó nhận các giá trị để đưa các phần tử trôi về phía nào của hướng chính
Thuộc tính align-content Nó điều chỉnh vị trí các hàng (các cột) trong khung, nó nhận các giá trị như stretch, center, flex-end Chỉ có hiệu lực khi có nhiều hàng hoặc nhiều cột Thuộc tính align-items Nó nhận các giá trị để điều khiển phần tử con theo hướng góc góc chính .containerflex {
display: flex; /* Kích hoạt flexbox cho phần tử chứa */
flex-direction: row; /* Thiết lập hướng chính */
flex-wrap: nowrap; /* Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/
justify-content: flex-end; /* Căn chỉnh nội dung bên trong container có flexbox*/
align-items: stretch; /* Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/
align-content: stretch; /* Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/
padding: 5px;
background: #9C27B0;
min-width: 320px;
min-height: 320px;
margin: auto;
}
.flexitem {
padding: 20px;
background: lightblue;
margin: 1px;
font-weight: bold;
}
5
Set up the element conTính năng liên quan đến .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
6 ngoài thiết lập với các thuộc tính từ phần tử chứa (cha - container), còn có thể thiết lập trực tiếp đến từng phần tử con, xem xét các thuộc tính
Các ví dụ ở phần sau sẽ sử dụng CSS như sau 2 Thuộc tính flex-grow .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
7 gán các giá trị bằng số, nó cho biết phần tử này sử dụng bao nhiêu phần trong thời gian không còn lại (ngoại trừ phần đã sử dụng bởi các phần tử có flex-grow bằng 0) các khung chứa theo hướng chínhThuộc tính flex-shrink Thuộc tính .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
8 nhận giá trị là số, cho biết phần tử có thể co lại bao nhiêu phần khi cần thiếtThuộc tính linh hoạt Thuộc tính gán chiều dài khởi động cho phần tử trong hệ thống flex, ví dụ .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
9Thuộc tính linh hoạt Thuộc tính này là cách viết tổng hợp tất cả các thuộc tính .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
7, .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
8, .containerflex {
display: flex; /* Kích hoạt flexbox cho phần tử chứa */
flex-direction: row; /* Thiết lập hướng chính */
flex-wrap: nowrap; /* Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/
justify-content: flex-end; /* Căn chỉnh nội dung bên trong container có flexbox*/
align-items: stretch; /* Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/
align-content: stretch; /* Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/
padding: 5px;
background: #9C27B0;
min-width: 320px;
min-height: 320px;
margin: auto;
}
.flexitem {
padding: 20px;
background: lightblue;
margin: 1px;
font-weight: bold;
}
52 trên một dòngVí dụ. .containerflex {
display: flex; /* Kích hoạt flexbox cho phần tử chứa */
flex-direction: row; /* Thiết lập hướng chính */
flex-wrap: nowrap; /* Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/
justify-content: flex-end; /* Căn chỉnh nội dung bên trong container có flexbox*/
align-items: stretch; /* Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/
align-content: stretch; /* Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/
padding: 5px;
background: #9C27B0;
min-width: 320px;
min-height: 320px;
margin: auto;
}
.flexitem {
padding: 20px;
background: lightblue;
margin: 1px;
font-weight: bold;
}
53Thuộc tính align-self Căn chỉnh một phần tử trong hệ thống flex, .containerflex {
display: flex; /* Kích hoạt flexbox cho phần tử chứa */
flex-direction: row; /* Thiết lập hướng chính */
flex-wrap: nowrap; /* Thiết lập chế độ wrap, khi các phần tử vượt qua kích thước hướng chính*/
justify-content: flex-end; /* Căn chỉnh nội dung bên trong container có flexbox*/
align-items: stretch; /* Căn chỉnh phần tử con theo hướng vuông góc hướng chính*/
align-content: stretch; /* Căn chỉnh hàng (cột) theo hướng vuông góc (chỉ hiệu lực khi nhiều hàng hoặc cột)*/
padding: 5px;
background: #9C27B0;
min-width: 320px;
min-height: 320px;
margin: auto;
}
.flexitem {
padding: 20px;
background: lightblue;
margin: 1px;
font-weight: bold;
}
54 nhận các giá trị. .containerflex {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
1, 7, 8, 6 |
