Cổng Khoa học Máy tính dành cho những người yêu thích máy tính. Nó bao gồm các bài báo về khoa học máy tính và lập trình được viết tốt, tư duy tốt và được giải thích tốt, các câu đố và thực hành / lập trình cạnh tranh / các câu hỏi phỏng vấn công ty.

Bạn đang xem : Hộp linh hoạt trong css

Hộp bố cục linh hoạt CSS , thường được biết đến với tên gọi Hộp linh hoạt , phổ biến > là một mô hình bố cục một chiều mạnh mẽ. Nó giúp sắp xếp, căn chỉnh và phân phối các mục (con) một cách hiệu quả bên trong một thùng chứa (cha).

Các tính năng quan trọng:

  • Mô hình bố cục một chiều: Flex là một mô hình bố cục một chiều như nó chỉ có thể xử lý các mục theo chiều ngang dưới dạng hàng hoặc theo chiều dọc dưới dạng cột. Ngược lại, bố cục CSS Grid có thể xử lý các hàng và cột cùng nhau.
  • Tạo bố cục linh hoạt và đáp ứng : Flexbox cung cấp cho flex container khả năng tùy chỉnh các mục bên trong nó, tùy thuộc vào kích thước màn hình khác nhau. Hộp linh hoạt có thể mở rộng các mặt hàng dành cho trẻ em của nó để lấp đầy không gian có sẵn hoặc cũng có thể thu nhỏ chúng để ngăn tràn.
  • Không có hướng: Flexbox không có bất kỳ ràng buộc nào về hướng không giống như Block (thiên về chiều dọc) và Nội tuyến (thiên về chiều ngang).
  • Siêu dễ sử dụng: Dễ dàng căn chỉnh các mục trong Flexbox, không giống như sử dụng float và định vị hơi khó chịu và đôi khi khó sử dụng.

Kiến trúc Flexbox:

Có hai khía cạnh của a Flexbox: Flex container Flex item

Các mục flex có thể được bố trí dọc theo trục chính (bắt đầu từ điểm bắt đầu chính và kết thúc tại đầu chính) hoặc dọc theo trục chéo (bắt đầu từ điểm bắt đầu chéo và kết thúc ở điểm cuối).

  • Trục chính: Các mục linh hoạt được bố trí dọc theo trục, theo chiều ngang hoặc chiều dọc dựa trên phần uốn -chuyển hướng.
  • Trục chéo: Nó vuông góc với trục chính và hướng của nó phụ thuộc vào hướng của trục chính.
  • Chính kích thước: Đây là chiều rộng / chiều cao của vật phẩm uốn tùy thuộc vào kích thước chính.
  • Kích thước chéo: Đó là chiều rộng / chiều cao của vật phẩm uốn tùy thuộc vào trên nhiều thứ nguyên.

Để hiểu các thuộc tính Flexbox khác nhau, chúng ta hãy lấy một ví dụ bằng cách tạo tệp HTML cùng với tệp CSS.

Ví dụ:

HTML

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = "vi" & gt;

& lt; head & gt;

& lt; < / code> meta bộ ký tự = "UTF-8" / & gt;

& lt; meta http-equiv = " X-UA-Tương thích " content = " IE = edge " / & gt;

& lt; meta name = " viewport " content =" width = thiết bị - chiều rộng,

initial-scale = 1 . 0 "/ & gt;

& lt; title & gt; CSS Flexbox & lt; / title & gt;

& lt; liên kết rel < / code> = "stylesheet" href = " style.css " / & gt;

& lt; / head & gt;

& lt; body & gt;

< p class = "line number14 index13 alt1"> & lt; div class = "container" & gt ;

& lt; div class = "item item-1" & gt; 1 & lt; / div & gt;

& lt; div class = "item item-2" & lt; div class = " item item-3 " & gt; 3 & lt ; / div & gt;

& lt; div class = "item item-4" & gt; 4 & lt; / < cá tuyết e class = "keyword"> div & gt;

& lt; / div & gt;

& lt; / body & gt; < / code>

& lt; / html & gt;

 
 

Đây là mã CSS của chúng tôi mà chúng tôi sẽ tạo kiểu flex-container và flex-item.

CSS

. container {

border : 5px solid rgb ( 0 , 0 , 0 );

background-color : rgb ( 245 197 221 );

}

. item {

border : 5px solid rgb ( 0 , 0 , 0 );

background-color : rgb ( 141 , 178 , 226 );

< / code> margin : 10px ;

padding : 20px ;

height : 100px ;

width : 100px ;

< p class = "line number12 index11 alt1"> font-weight : bold ;

font-size : 45px ;

}

 
 

Đầu ra:

Từ kết quả ở trên, nó chúng được căn chỉnh theo chiều dọc, theo mặc định và màn hình mặc định là. Khu vực màu hồng là và các hộp màu xanh lam trong đó là

Thuộc tính cho Vùng chứa chính / Flex:

  • hiển thị: Hãy làm cho vùng chứa linh hoạt bằng cách đặt màn hình của nó linh hoạt bên trong .container của tệp CSS của chúng ta.
 .container {
    hiển thị: flex;
    border: 5px solid rgb (0, 0, 0);
    background-color: rgb (245 197 221);
} 

Ví dụ:

HTML

< code class = "trơn"> & lt;! DOCTYPE html & gt;

& lt; html lang = "en" & gt;

& lt; head & gt;

& lt; meta < / code> bộ ký tự = "UTF-8" / & gt;

& lt; meta http-equiv = "X-UA-Tương thích" nội dung = "IE = edge" / & gt;

& lt; meta tên < code class = "color1"> width = thiết bị - chiều rộng, < / code>

Initial-scale = 1 . 0 "/ & gt;

& lt; title & gt; CSS Flexbox & lt; / title & gt;

& lt; style & gt;

. container {

display: flex;

border: 5px solid rgb (0, 0, 0);

background-color: rgb (245 197 221);

}

. Item { < / p>

border: 5px solid rgb (0, 0, 0); < / code>

background-color: rgb (141, 178, 226 );

margin: 10px;

padding: 20px;

height: 100px;

width: 100px;

font-weight: bold;

font-size: 45px;

}

& lt; / style & gt;

& lt; / head & gt;

& lt; body & gt;

& lt; div class < mã class = "trơn"> = "container" & gt;

& lt; div class = " item item-1 " & gt; 1 & lt; / div & gt;

& lt; div class = "item item-2" & gt; 2 & lt; / div & gt;

& lt; div class = " item item-3 " & gt; 3 & lt; / div & gt;

& lt; div class = " item item-4 " & gt; 4 & lt; / div & gt;

& lt; / div & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

Đầu ra: Như bạn có thể thấy, sau khi áp dụng thuộc tính, các mục đã được căn chỉnh theo chiều ngang vì hướng uốn mặc định của flexbox là hàng.

  • flex-direction : Nó đặt hướng của trục chính của vùng chứa linh hoạt và chỉ định cách các mục sẽ được đặt bên trong vùng chứa.

Cú pháp:

 flex-direction: giá trị thuộc tính 

Giá trị thuộc tính:

  • hàng: Các mục linh hoạt được hiển thị theo chiều ngang dọc theo một hàng .
  • cột: Các mục linh hoạt được hiển thị theo chiều dọc của một cột.
  • đảo ngược hàng: Các mục linh hoạt được hiển thị theo chiều ngang dọc theo một hàng nhưng theo thứ tự ngược lại.
  • đảo ngược cột: Các mục linh hoạt được hiển thị theo chiều dọc của một cột nhưng theo thứ tự ngược lại.

Lưu ý: Disla theo mặc định, hướng y là hàng.

Ví dụ:

HTML

< p class = "ring-load" id = "run-and-edit-loader">

< / p>

& lt;! DOCTYPE html & gt;

& lt; html lang = "vi" & gt;

& lt; head < code class = "trơn"> & gt;

& lt ; meta bộ ký tự = "UTF-8" / & gt;

& lt; meta < code class = "color1"> http-equiv = "X-UA-Tương thích" nội dung = "IE = edge" / & gt;

& lt; meta name = "viewport" thiết bị - width,

Initial-scale = 1 . 0 " / & gt;

& lt; < code class = "keyword"> title & gt; flex-direction & lt; / title & gt;

& lt; liên kết rel = "stylesheet" href = "style_flex-direction.css" < mã lớp = "trơn"> / & gt;

& lt; / head & gt;

& lt; body & gt;

< p class = "line number14 index13 alt1"> & lt; ul class = "container row" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt ;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

< code class = "undefined space"> & lt; li class = "item" & gt ;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

< code class = "undefined space"> & lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; ul class = "container column" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt ;

& lt; / li & gt;

< / code> & lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item " & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 4 & lt; / p < / code> & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; < code class = "keyword"> ul class = "c ontainer row-reverse " & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

< code class = "undefined space"> & lt; p & gt; 4 & lt ; / p & gt;

& lt; / li & gt; < / code>

& lt; / ul & gt;

& lt; ul class = "container column-reverse" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt; < / p>

& lt; li class = " item " & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt; < / p>

& lt; p & gt; 4 & lt; / p & gt;

& lt; / < code class = "keyword"> li & gt;

& lt; / ul & gt;

& lt; / body & gt; < / code>

& lt; / html & gt;

 
 

Mã CSS: < / p>

CSS

< p class = "ring-load" id = "run-and-edit-loader">

< / p>

. container {

background-color : rgb ( 245 197 221 );

margin : 5px ;

padding : 0 ;

float : left ;

height : 270px ;

width border : 2px solid black ;

display : flex;

}

. row {

flex- hướng : row;

}

. column {

flex- hướng : column;

} < / p>

. row-reverse {

flex- hướng : row-reverse;

}

. column-reverse {

flex- hướng : column-reverse;

}

ul {

list-style : không có ;

}

. item {

b ackground-color : rgb ( 141 , 178 , 226 );

< / code> padding : 5px ;

height : 40px ;

width : 40px ;

margin : 2px ;

padding : 2px ;

font-weight : bold ;

border : 2px solid black ;

}

 
 

Đầu ra: < / strong>

  • flex-wrap < / span> : Nó chỉ định xem vùng chứa flex sẽ có một dòng hay có nhiều dòng.

Cú pháp:

 flex-wrap: giá trị thuộc tính 

Giá trị thuộc tính:

  • nowrap (mặc định): Nó chỉ định rằng các mục flex sẽ không bọc và sẽ được trình bày trong một dòng duy nhất. Nó có thể khiến hộp đựng flex bị tràn.
  • wrap: Nó chỉ định rằng các mục flex sẽ bọc nếu cần và sẽ được bố trí thành nhiều dòng.
  • < li> wrap-reverse: Nó giống như kiểu bọc nhưng các mục flex sẽ quấn theo thứ tự ngược lại trong trường hợp này.

  • tên viết tắt: Nó đại diện cho giá trị được chỉ định làm giá trị ban đầu của thuộc tính.
  • inherit: Nó đại diện cho giá trị được tính toán của thuộc tính trên phần tử gốc.

Lưu ý: Chúng tôi đã tăng số lượng mục bên trong vùng chứa để hiểu hiệu ứng flex-wrap tốt hơn.

Ví dụ:

HTML

& lt;! DOCTYPE html & gt;

& lt; html lang = "vi" & gt;

& lt; head & gt;

& lt; meta bộ ký tự = " UTF-8 " / & gt;

& lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" / & gt;

< / code> & lt; meta name = "viewport" content = " width < lớp mã = "trơn"> = thiết bị - width,

Initial-scale = 1 . 0 "/ & gt;

& lt; title & gt; flex-wrap & lt; / title & gt;

< / code> & lt; liên kết rel = "stylesheet" href = "style_flex-wrap.css" / & gt;

& lt; / head & gt;

& lt; body & gt;

< p class = "line number14 index13 alt1"> & lt; ul class = "container no-wrap" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

< / code> & lt; / li & gt;

< p class = "line number18 index17 alt1"> & lt; li class = "item" & gt ;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 6 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 7 & lt; / p & gt;

& lt; / li & gt;

& lt; li class < / code> = "item" & gt;

< p class = "line number37 index36 alt2"> & lt; p & gt; 8 & lt; / p & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; ul class = "container wrap" & gt; < / code>

& lt; li class = " item " & gt;

& lt; p & gt; 1 & lt; / p < code class = "trơn"> & gt;

& lt ; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt; < / p>

& lt; p & gt; 5 & lt; / p & gt ;

& lt; / li & gt;

< / code> & lt; li class = "item" & gt;

& lt; p & gt; 6 & lt; / p & gt;

< code class = "undefined space"> & lt; / li & gt;

& lt; li class = "item " & gt;

& lt; p & gt; 7 & lt; / p & gt;

& lt; / li & gt;

& lt; li lớp = "item" & gt;

& lt; p & gt; 8 & lt; / p & gt; < / code>

& lt; / li & gt;

& lt; / ul & gt;

& lt; ul class = "container wrap-reverse" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / < / code> p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p < / code> & gt;

& lt; / li & gt;

& lt; li lớp = "item" & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / l tôi & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li < / code> class = "item" & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / li & gt;

& lt; li class < mã class = "trơn"> = "item" & gt;

& lt; p & gt; 6 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 7 & lt; / p & gt;

< / code> & lt; / li & gt;

< p class = "line number88 index87 alt1"> & lt; li class = "item" & gt;

& lt; p & gt; 8 & lt; / p & gt;

< code class = "trơn"> & lt; / li & gt;

& lt; / ul & gt;

& lt; / body & gt;

& lt; / html & gt; < / code>

 
  

Mã CSS:

CSS




. container {

background-color : rgb ( 245 197 221 );

margin : 5px ;

padding : 0 ;

float : left ;

width : 250px ;

border : 2px solid black ;

< co de class = "undefined space"> display : flex;

}

. no-wrap {

flex-wrap: nowrap ;

}

. wrap {

flex-wrap: wrap;

}

. wrap-reverse {

< code class = "undefined space"> flex-wrap: wrap-reverse;

}

ul {< / code>

list-style : none ;

}

. item {

background-color : < code class = "value"> rgb ( 141 , 178 , 226 );

padding : 5px ;

height : 40px ;

< code class = "keyword"> width : 40px ;

margin : 2px ;

padding : 2px ;

font-weight : bold ;

border : 2px solid black ;

}

 
 

Đầu ra:

  • flex-flow < / strong> : Đây là cách viết tắt của hướng uốn và quấn uốn. Theo mặc định, flex-direction là row và flex-wrap là nowrap.

Cú pháp:

 flex-flow: flex-direction flex-wrap 

Ví dụ: chúng ta có thể chỉ định flex-direction là một hàng và flex-wrap như một bọc.

 .container {
flex-flow: quấn hàng;
} 

  • justify-content : Nó xác định cách các mục được định vị dọc theo trục chính / chính của dòng hiện tại.

Cú pháp:

 justify-content: giá trị thuộc tính 

Giá trị thuộc tính:

  • < strong> flex-start (mặc định): Các mục linh hoạt được đặt ở đầu vùng chứa.
  • flex-end: Các mục linh hoạt được đặt ở cuối vùng chứa.
  • trung tâm: Các mặt hàng uốn được đặt ở giữa vùng chứa.
  • khoảng trống giữa: Các mặt hàng uốn được phân phối với khoảng cách đều nhau, mục đầu tiên sẽ ở đầu và mục cuối cùng sẽ ở cuối vùng chứa.
  • không gian xung quanh: Các mục linh hoạt được phân phối với khoảng cách đều, với một nửa lượng không gian ở đầu mục và ở cuối mục cuối cùng.
  • đồng đều về không gian: Các mục linh hoạt được phân bổ đồng đều trong vùng chứa căn chỉnh dọc theo trục chính.
  • < strong> initial: Nó đại diện cho giá trị được chỉ định làm giá trị ban đầu của thuộc tính.

Ví dụ:

HTML

& lt;! DOCTYPE html & gt;

& lt; html lang = " vi " & gt;

& lt; head & gt;

& lt; meta bộ ký tự = "UTF-8" / & gt;

& lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" / & gt;

& lt; meta name = "viewport" content = " width = thiết bị -width,

initial-scale = 1 . 0 "/ & gt;

< p class = "line number9 index8 alt2"> & lt; title & gt; justify-content & lt; / title & gt;

& lt; liên kết rel = "stylesheet" < code class = "color1"> href = "style_justify-content.css" / & gt;

& lt; / head & gt;

& lt; body & gt;

< p class = "line number14 index13 alt1"> & lt; ul class = "container flexStart" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; < code class = "keyword"> p & gt; 2 & lt; / p & gt;

& l t; / li & gt;

< code class = "undefined space"> & lt; li class = "item" & gt;

& lt; p < code class = "trơn"> & gt; 3 & lt; / p & gt;

& lt; / li < code class = "trơn"> & gt;

& lt; li class < / code> = "item" & gt;

< p class = "line number25 index24 alt2"> & lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / li & gt; < / p>

& lt; / ul & gt;

& lt; ul class = "container flexEnd" & gt;

& lt; li class = "item" & gt; < / code>

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = < / code> "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 3 & lt; / p < / code> & gt;

< p class = "line number41 index40 alt2"> & lt; / li & gt;

< / code> & lt; li class = "item" & gt;

& lt; p & gt; 4 & lt; / p & gt;

< code class = "undefined space"> & lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / < code class = "keyword"> li & gt;

& lt; / ul & gt;

& lt; ul class = "container ce nter " & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt; < / p>

& lt; li class = "item" < code class = "trơn"> & gt;

& lt ; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; ul class = "container spaceBetween" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / < / code> p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

< code class = "undefined space"> & lt; li class = "item" & gt;

& lt; p < code class = "trơn"> & gt; 4 & lt; / p & gt;

& lt; / li < code class = "trơn"> & gt;

& lt; li class = " item " & gt;

& lt; p & gt ; 5 & lt; / p & gt;

& lt; / li & gt ;

& lt; / ul & gt;

< / code> & lt; ul class = "container spaceAround" & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 1 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt;

& lt; / li & gt;

& lt; < / code> li class = "item" & gt;

< code class = "western"> & lt; p & gt; 3 & lt; / p & gt;

< / code> & lt; / li & gt;

< p class = "line number94 index93 alt1"> & lt; li class = "item" & gt ;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li class < mã class = "trơn"> = "item" & gt;

& lt; p & lt; / li & gt;

& lt; / < / code> ul & gt;

& lt; ul class = " container spaceEvenly " & gt;

& lt; li class = "item" & gt;

& lt; < / code> p & gt; 1 & lt; / p & gt;

& lt; / < / code> li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 2 & lt; / p & gt; < / code>

& lt; / li & gt;

& lt; li class = "item" & gt;

& lt; p & gt; 3 & lt; / p & gt;

& lt; / li & gt;

& lt; li class = " item " & gt;

& lt; p & gt; 4 & lt; / p & gt;

& lt; / li & gt;

& lt; li < / code> class = "item" & gt;

& lt; p & gt; 5 & lt; / p & gt;

& lt; / li & gt;

& lt; / ul & gt;

& lt; / body & gt;

& lt; / html & gt;

 
 

< p> Mã CSS:

CSS

.container {

background-color : rgb ( 245 197 221 );

margin : 5px ;

padding : 0 < code class = "trơn">;

border < / code> : 2px solid đen ;

display : flex;

}

. flexStart {

justify- content : flex-start;

}

. flexEnd {

justify- nội dung : flex-end;

}

. center {

justify- nội dung : center ;

}

. spaceBetween {

justify- content : space-between;

}

. spaceAround {

justify- content : space-around;

< p class = "line number22 index21 alt1"> }

. spaceEvenly {< / code>

justify- nội dung : khoảng trắng;

}

ul {

list-style : không ;

}

. item { < / p>

background-color : rgb ( 141 , 178 , 226 );

wid th : 50px ;

height : 50px ;

margin : 5px ;

line-height : 10px ;

font-weight : bold ;

border : 2px solid black ;

}

 
 

Đầu ra:

  • align-content : Khi có thêm khoảng trống trong dấu chéo- trục, căn chỉnh nội dung căn chỉnh nhiều dòng trong vùng chứa. Nó tương tự như justify-content giúp căn chỉnh các mục riêng lẻ trong trục chính.

Lưu ý: Thuộc tính này chỉ hoạt động khi Flexbox có nhiều dòng.

Cú pháp:

 align-content: giá trị thuộc tính 

Giá trị thuộc tính:

  • flex-start: Các dòng được căn chỉnh về phía đầu của vùng chứa.
  • flex-end: Các dòng được căn chỉnh về phía cuối vùng chứa.
  • giữa: Các đường thẳng hàng về phía giữa vùng chứa.
  • khoảng cách giữa: Các đường được phân bổ đồng đều , mục đầu tiên sẽ ở đầu và mục cuối cùng sẽ ở cuối vùng chứa.
  • không gian xung quanh: Các đường được phân bổ đồng đều, với một nửa lượng khoảng trắng ở đầu mục đầu tiên và ở cuối mục cuối cùng.
  • giãn (mặc định): Dòng giãn ra để chiếm không gian còn lại.
  • < / ul>

    Ví dụ:

    HTML

    & lt; ! DOCTYPE html & gt;

    & lt; html lang = "en" & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự < / code> = "UTF-8" / & gt;

    & lt; meta < / code> http-equiv = "X-UA-Tương thích" nội dung = " IE = edge " / & gt; < / code>

    & lt; meta name = " viewport " < code class = "trơn"> content = " width = device < / code> - width,

    quy mô ban đầu = 1 . 0 "/ & gt ;

    & lt; title & gt; align-content & lt; / title & gt;

    & lt; liên kết rel = "bảng định kiểu" href = "style_align-content.css" < / code> / & gt;

    & lt; / head & gt;

    < / code>

    & lt; body & gt;

    & lt; ul class = " container flexStart " & gt;

    < / code> & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    < code class = "undefined space"> & lt; / li & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt; < / code>

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "undefined space"> & lt; li class = "item" & gt;

    & lt; p < code class = "trơn"> & gt; 4 & lt; / p & gt;

    & lt; / li < code class = "trơn"> & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt ; 5 & lt; / p & gt;

    & lt; / li & gt ;

    & lt; / ul & gt;

    < / code> & lt; ul class = "container flexEnd" & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item " & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class < / code> = "item" & gt;

    < p class = "line number45 index44 alt2"> & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    < code class = "undefined space"> & lt; ul class = "container center" & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p < code class = "trơn"> & gt;

    & lt ; / li & gt;

    & lt; li class = "item" & gt; < / code>

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = < / code> "item" & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; < code class = "keyword"> li class = "item" < / code> & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = " item " & gt; < / p>

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; ul class = "container spaceBetween" & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = " item " < code class = "trơn"> & gt;

    & lt ; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    < / code> & lt; / li & gt;

    < máy tính lass = "line number78 index77 alt1"> & lt; li < code class = "color1"> class = "item" & gt;

    & lt; p & gt; 5 & lt; / p & gt; < / code>

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; ul class = "container spaceAround" < / code> & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / < code class = "keyword"> p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / p & gt ;

    & lt; / li & gt; < / code>

    & lt; li class = "item" & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li < / code> class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    < code class = "trơn"> & lt; ul class = "vùng chứa căng" & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "same"> & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / < / code> p & gt;

    & lt; / li & gt;

    & lt; li class = < / code> "item" & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p < code class = "trơn"> & gt; 4 & lt; / p & gt;

    & lt; / li < code class = "trơn"> & gt;

    & lt ; li class = " item " & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    < code class = "undefined space">

    & lt; / html & gt;

     < / pre> 
     

    Mã CSS:

    CSS

    . container {

    background-color : rgb ( 245 197 221 );

    margin : 5px ;

    float : left ;

    height : 500px ;

    chiều rộng : 50px ; < / p>

    border : < / code> 2px solid black ;

    hiển thị : flex;

    flex-wrap : wrap;

    flex- < code class = "keyword"> hướng : row;

    }

    . flexStart {

    align- content : flex-start;

    }

    . flexEnd {

    < code class = "undefined space"> align- content : flex- end;

    }

    < code class = "trơn">. center {

    align- nội dung : center ;

    }

    .spaceBetween {

    align- content : space-between;

    }

    . spaceAround {

    align- nội dung : space-around;

    }

    . stretch {

    align- nội dung : stretch;

    }

    ul {

    list-style : none ;

    }

    . item {

    background-color : rgb ( 141 , 178 , 226 );

    padding : 5px ; < / p>

    width : < / code> 50px ;

    margin : 5px ;

    line-height : 10px ;

    font-weight : bold ;

    < code class = "undefined space"> border : 2px solid black ;

    }

      
     

    Đầu ra:

    • align-items : Nó xác định cách thức các mục flex sẽ được căn chỉnh dọc theo trục chéo của dòng hiện tại của vùng chứa.

    Cú pháp:

     align-items: stretch | center | flex-start | flex-end | baseline | initial |
    kế thừa; 

    Giá trị thuộc tính:

    • flex-start: Các mục được căn dọc theo đường bắt đầu chéo.
    • flex-end: Các mục được căn dọc theo đường chéo. < / li>
    • center: Các mục được căn giữa theo trục chéo.
    • đường cơ sở: Các mục được căn trong một dòng như vậy vấn đề là các đường cơ sở của chúng có căn chỉnh hay không.
    • giãn (mặc định): Các mục căng ra để lấp đầy vùng chứa.

    Ví dụ:

    HTML

    < br />

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "en" & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự = "UTF-8" / & gt;

    & lt; meta http-equiv = "X-UA-Tương thích" nội dung = "IE = edge" / & gt;

    & lt; meta name = "viewport" thiết bị - width,

    quy mô ban đầu = 1 . 0 "/ & gt;

    & lt; title & gt; align-item & lt; / title & gt;

    & lt; < code class = "keyword"> liên kết rel = " bảng định kiểu " href = " style_align-item.css " / & gt;

    & lt; / head & gt;

    & lt; body & gt;

    < p class = "line number14 index13 alt1"> & lt; ul class = "container flexStart" & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; < code class = "keyword"> p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; < code class = "keyword"> p & gt; 3 & lt; / p & gt;

    & lt; / < code class = "keyword"> li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt; < / p>

    & lt; / ul & gt;

    & lt; ul class = "container flexEnd" & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt ; 2 & lt; / p & gt;

    & lt; / li & gt ;

    & lt; li class = "item" & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt ;

    & lt; / li & gt;

    < / code> & lt; li class = "item" & gt;

    & lt; p & lt; / li & gt;

    & lt; / < / code> ul & gt;

    & lt; ul class = "container center" & gt;

    & lt; li class = "item" < / code> & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    < code class = "undefined space"> & lt; p & gt; 3 & lt ; / p & gt;

    & lt; / li & g t;

    & lt; li class = "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class < / code> = "item" & gt;

    & lt; p & gt; 5 & lt; / p & gt; < / p>

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; ul class = " container baseline " & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 1 & lt; / < code class = "keyword"> p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class < mã class = "trơn"> = "item" & gt;

    & lt; p & lt; / li & gt;

    & lt ; li class = " item " & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; ul < / code> class = "container dãn" & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt ; 1 & lt; / p & gt;

    & lt; / li & gt ;

    & lt; li class = "item" & gt;

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = " item " & gt;

    & lt; p & gt; 3 & lt; / p & gt; < / p>

    & lt; / li & gt;

    & lt; li class = < / code> "item" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt ;

    & lt; / body & gt;

    & lt; / html & gt ;

     
     < / pre> 

    Mã CSS:

    CSS


    < p class = "ring-load" id = "create-url-loader">



    . container {

    background -color : rgb ( 245 197 221 );

    margin : 5px ;

    float : left ;

    height < p class = "line number6 index5 alt1"> width : < code class = "value"> 150px ;

    < / code> border : 2px solid black ;

    display : flex;

    flex- hướng : row;

    }

    . flexStart {

    align-items: flex-start;

    }

    . flexEnd {

    align-items: flex-end;

    }

    . center {

    align-items: center ; < / p>

    }

    . baseline {

    align-items: baseline ;

    }

    .stretch {

    align-items: Stret ;

    }

    ul {

    list-style : không có ;

    }

    . item {

    background-color : rgb ( 141 , 178 , 226 );

    padding : 5px ;

    width : 50px ;

    line-height : 10px ;

    font-weight : bold ;

    border : 2px solid black ;

    }

     
     

    Đầu ra:

    Vui lòng tham khảo Sự khác biệt giữa bài viết align-content và align-items để biết sự khác biệt chi tiết.

    Thuộc tính cho Mặt hàng Con / Linh hoạt:

    • order: Nó chỉ định thứ tự trong đó các phần tử con của vùng chứa flex xuất hiện trong vùng chứa flex.

    Cú pháp:

     order: & lt; integer & gt; 

    Các mục linh hoạt có giá trị đặt hàng mặc định là 0. Đó là lý do tại sao các mục được chỉ định với giá trị lớn hơn 0 xuất hiện sau các mục không có giá trị nào được đặt . Điều ngược lại áp dụng cho các mặt hàng có giá trị nhỏ hơn 0, chúng xuất hiện trước các mặt hàng có giá trị đặt hàng mặc định hoặc giá trị đơn hàng lớn hơn 0.

    Ví dụ:

    HTML

    < p>

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "vi" & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự = "UTF-8" / & gt;

    < code class = "undefined space"> & lt; meta http-equiv = "X-UA-Tương thích" content < mã class = "trơn"> = "IE = edge" / & gt;

    & lt; meta < code class = "color1"> name = "viewport" content = " width = thiết bị -width,

    Initial-scale = < / code> 1 . 0 "/ & gt;

    < code class = "undefined space"> & lt; title & gt; order & lt ; / title & gt;

    & lt; liên kết rel = "stylesheet" href = "style_order.css" / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = < code class = "string"> "container" & gt;

    & lt; li class = "item item-1" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "trơn"> & lt; li class< / p>

    & lt; p & gt; 2 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = < code class = "string"> "item item-3" & gt;

    & lt; p & gt ; 3 & lt; / p & gt;

    & lt; / li & gt ;

    & lt; li class = "item item-4" & gt;

    & lt; p & gt; 4 & lt; / p < / code> & gt;

    & lt; / li & gt;

    & lt; li class = " item item-5 " & gt; < / code>

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS

    < / p>

    . container {

    background-color : < / code> rgb ( 245 197 221 );

    margin : 0 ;

    padding : 0 ; < / p>

    float : < / code> left ;

    height : 200px ;

    width : 400px ;

    border : 2px solid black ;

    hiển thị : flex;

    flex-wrap: wrap;

    flex- hướng : row;

    }

    ul {

    list-style }

    . item {

    background-color : rgb ( 141 , 178 , 226 ); < / code>

    padding : 5px ;

    margin : 5px ;

    width : 50px ;

    height : 50px ;

    < code class = "keyword"> font-weight : bold ; < / code>

    border : 2px solid black ;

    }

    . item - 1 {

    đơn hàng: 3 ;

    }

    . item - 4 {

    thứ tự: - 3 < p class = "code-editor-container">

     
     

    Đầu ra : Vì mục 1 có đơn đặt hàng 3, đơn đặt hàng của nó cao hơn mọi đơn đặt hàng của mọi mặt hàng nên nó được đặt ở cuối và mục 4 được đặt ở đầu như đơn đặt hàng của nó (-3 ) là thứ tự thấp nhất trong số các mặt hàng khác.

    flex : Nó chỉ định các thành phần của độ dài linh hoạt và nó là thuộc tính viết tắt cho:

    • flex-grow : Nó chỉ định mức độ phát triển của mặt hàng so với các mặt hàng khác bên trong vùng chứa đó.
    • flex-co : Nó chỉ định mức độ co lại của mặt hàng so với các mặt hàng khác bên trong hộp đựng đó.
    • < li> flex-base : Nó chỉ định kích thước ban đầu của mặt hàng linh hoạt.

    Cú pháp:

     flex: flex-grow flex-co flex-base | auto | initial | inherit; 

    Ví dụ:

    HTML

    < / p>

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "vi" & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự = "UTF-8" / & gt;

    & lt; meta http-equiv = "X-UA-Tương thích" content = "IE = edge" / & gt;

    & lt; meta name = "viewport"

    content = "width = device-width , initial-scale = 1.0 " / & gt;

    & lt; title & gt; flex & lt; / title & gt;

    & lt; liên kết rel = "stylesheet" href = "style_flex.css" / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = < code class = "string"> "container" & gt;

    & lt; li class = "item item-1" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "same"> & lt; li class = "item item-2" & gt;

    < code class = "undefined space"> & lt; p & gt; 2 & lt ; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-3" < / code> & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-4" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-5" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt; < / p>

    & lt; / ul < code class = "keyword"> body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS

    < p>

    . container {

    background-color : rgb ( 245 197 221 ) ;

    mar gin : 0 ;

    padding : 0 ;

    height : 500px ;

    border : 2px solid black ;

    display : flex;

    }

    ul {

    list-style : none ;

    }

    . item {

    background-color < / code> : rgb ( 141 , 178 , 226 );

    < code class = "keyword"> padding : 5px ;

    margin : 5px ;

    width : 50px ;

    height : 50px ; < / code>

    font-weight : bold ;

    border : 2px solid black ;

    }

    .item - 1 {

    flex: 0 1 < / code> auto ;

    }

    . item - 2 {

    flex : 2 2 auto ;

    }

    . item - 3 {

    flex: 0 1 auto ;

    }

    . item - 4 {

    flex: 0 1 auto ;

    }

    .item - 5 {

    flex: 0 1 auto ;

    }

     
     

    Đầu ra: Như chúng ta có thể thấy rõ ràng, mục 2 có giá trị flex-grow và flex-co lại cao nhất sẽ mở rộng và thu nhỏ nhiều nhất. Nó có giá trị flex-grow và giá trị thu nhỏ là 2, trong khi các mục khác có giá trị flex-grow và flex-co lại là 0 và 1 tương ứng. Cơ sở linh hoạt cho tất cả các mục đã được đặt thành tự động.

    • flex-grow: Nó đặt thuộc tính flex-grow của một mục flex và xác định khả năng phát triển của nó. Giá trị flex-grow mặc định là 0.

    Cú pháp:

     flex-grow: & lt; number & gt; 

    Lưu ý: Các số âm không hợp lệ.

    Ví dụ:

    HTML

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "en" & gt;

    < code class = "undefined space">

    & lt; head & gt;

    & lt; meta bộ ký tự < / code> = "UTF-8" / & gt;

    & lt; meta < / code> http-equiv = "X-UA-Tương thích" content = "IE = edge" / & gt;

    & lt; meta name = "viewport" content = " width = thiết bị - width,

    quy mô ban đầu = 1 . 0 "/ & gt;

    & lt; title & gt; flex-grow & lt; / title & gt;

    & lt; < code class = "keyword"> liên kết rel = "stylesheet" < / code> href = "style_flex-grow.css" / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = < code class = "string"> "container" & gt;

    & lt; li class = "item item-1" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "same"> & lt; li class = "item item-2" & gt;

    < code class = "undefined space"> & lt; p & gt; 2 & lt ; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-3" < / code> & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-4" & gt ;

    & lt; p & gt; 4 & lt; / p & gt;

    < code class = "undefined space"> & lt; / li & gt;

    & lt; li class = "item item-5" < / code> & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS

    . container {

    background-color : rgb ( 245 197 221 ) ;

    margin : 0 ;

    padding : 0 ;

    height : 250px ;

    border : 2px solid black ;

    hiển thị : flex;

    }

    ul {

    list-style : none ;

    }

    . item {

    background-color : rgb ( 141 , 178 , < / code> 226 );

    padding : 5px ;

    margin : 5px ;

    width : 50px ;

    height : 50px ;

    font-weight border : 2px solid black ;

    }

    . item - 1 {

    flex-grow: 0 ;

    }

    . item - 2 {

    flex-grow: 2 ;

    }

    . item - 3 {

    flex-grow: 0 ;

    }

    . item - 4 {

    flex-grow: 0 ;

    }

    .item - 5 {

    < code class = "undefined space"> flex-grow: 0 ;

    }

     
     

    Đầu ra: Như chúng ta có thể thấy rõ, mục 2 với giá trị tăng trưởng linh hoạt nhiều hơn các mục khác mở rộng nhiều hơn bốn mục còn lại.

    • flex-co: Nó đặt thuộc tính flex-co cho một mục flex và d xác định khả năng co lại của một mục uốn. Giá trị flex-grow mặc định là 1.

    Cú pháp:

     flex-grow: & lt; number & gt; 

    Lưu ý: Các số âm không hợp lệ.

    Ví dụ:

    HTML

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "en" & gt;

    < code class = "undefined space">

    & lt; head & gt;

    & lt; meta bộ ký tự = " UTF-8 " / & gt; < / code>

    & lt; meta http-equiv = " X-UA-Tương thích " content = " IE = edge " / & gt;

    & lt ; meta tên = " viewport "

    content = "width = device-width, initial-scale = 1.0" / & gt;

    & lt; < / code> & gt;

    & lt; liên kết rel = "stylesheet" href = "style_flex- co lại.css " / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = < code class = "string"> "container" & gt;

    & lt; li class = "item item-1" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt;

    < code class = "same"> & lt; li class = "item item-2" & gt;

    < code class = "undefined space"> & lt; p & gt; 2 & lt ; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-3" < / code> & gt;

    & lt; p & gt; 3 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-4" & gt ;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "item item-5" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS

    . container {

    background-color : rgb < code class = "trơn"> ( 245 197 221 );

    margin < p class = "line number4 index3 alt1"> padding : < code class = "value"> 0 ;

    < / code> height : 250px ;

    border < code class = "trơn">: 2px solid black ;

    display : flex;

    }

    ul {

    list-style : none ;

    }

    . item {

    background-color : rgb ( 141 , 178 , 226 );

    padding : 5px ;

    margin < p class = "line number16 index15 alt1"> width : < code class = "value"> 50px ;

    < / code> height : 50px ;

    font-weight border : 2px solid black ;

    }

    . item - 1 {

    flex-co: 1 ;

    }

    . item - 2 {

    flex-co: 2 ;

    }

    . item - 3 {

    < p class = "line number28 index27 alt1"> flex-co: 1 ;

    }

    . item - 4 { < / p>

    flex-co: 1 ;

    }

    . item - 5 {

    flex-co: 1 ;

    }

    < p class = "code-editor-container">

     
     

    Đầu ra : Như chúng ta có thể thấy rõ, mục 2 có giá trị uốn cong nhiều hơn các mục khác thu nhỏ nhiều hơn bốn mục còn lại.

    • flex-base: Nó xác định kích thước ban đầu của một mục flex .

    Cú pháp:

     flex-base: content | & lt; 'width' & gt; 

    Ví dụ:

    HTML

    < p>

    & lt;! DOCTYPE html & gt;

    & lt; html lang = " vi " & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự = "UTF-8" / & gt;

    < code class = "undefined space"> & lt; meta http-equiv = "X-UA-Tương thích" content < mã class = "trơn"> = "IE = edge" / & gt;

    & lt; meta < code class = "color1"> name = "viewport"

    content = " width = device-width, initial-scale = 1.0 " / & gt;

    < code class = "undefined space"> & lt; title & gt; flex -basis & lt; / title & gt;

    & lt; liên kết rel < / code> = "stylesheet" href = " style_flex-base.css " / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = "container" & gt;

    & lt; li class = < code class = "string"> "item px" & gt;

    & lt; p & gt; px & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = "phần trăm mục" & gt;

    & lt; p & gt; phần trăm & lt; / p < / code> & gt;

    & lt; / li & gt;

    & lt; li class = "item auto" & gt;

    & lt; p & gt; auto & lt; / p & gt;

    & lt; / li & gt;

    < code class = "undefined space"> & lt; li class = "item initial" & gt;

    < p class = "line number24 index23 alt1"> & lt; p & gt; ban đầu & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = < / code> "item inherit" & gt;

    & lt; p & gt; inherit & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS < / h2>

    < br />

    . container {

    background-color : rgb ( 245 197 221 );

    padding : 0 ;

    margin : 0 ;

    height : 250px ;

    border : 2px solid black ;

    display : flex;

    }

    ul {

    list-style : none ;

    }

    . item {

    background-color < / code> : rgb ( 141 , 178 , 226 );

    padding : 5px ;

    margin width : 50px ;

    height : 50px ;

    font-weight : bold ;

    border : 2px solid black ;

    }

    . px { < / p>

    flex-base: 50px ;

    }

    . phần trăm {

    flex-base: 75% ;

    }

    . auto {

    flex-base: auto ; < / code>

    }

    . ban đầu {

    flex-base : Initial;

    }

    . inherit {

    flex-base: inherit;

    }

     
     

    Đầu ra:

    • align-self : It xác định cách các mục flex riêng lẻ được căn chỉnh dọc theo trục chéo.

    Cú pháp:

     align-self: auto | stretch | center | flex-start | flex-end | baseline |
    ban đầu | inherit; 

    Giá trị thuộc tính:

    • flex-start: Căn chỉnh các mục ở đầu vùng chứa .
    • flex-end: Căn chỉnh các mục ở cuối vùng chứa.
    • center: Căn chỉnh các mục ở giữa vùng chứa.
    • kéo dài: Căn chỉnh các mục cho vừa với vùng chứa.
    • đường cơ sở: Căn chỉnh các mục với đường cơ sở của vùng chứa .
    • auto (mặc định): Mục kế thừa thuộc tính align-items của vùng chứa mẹ.
    • ban đầu: Đặt thành giá trị mặc định.
    • inherit: Mục kế thừa thuộc tính align-self từ phần tử mẹ của nó.

    Ví dụ:

    HTML

    < / p>

    & lt;! DOCTYPE html & gt;

    & lt; html lang = "en" & gt;

    & lt; head & gt;

    & lt; meta bộ ký tự = "UTF-8" / & gt;

    & lt ; meta http-equiv = " X-UA-Tương thích " content = " IE = edge " / & gt;

    & lt; meta name = < / code> "viewport"

    nội dung = "width = device-width, initial-scale = 1.0" / & gt;

    & lt; title & gt; align-self & lt; / title < code class = "trơn"> & gt;

    & lt; liên kết rel = < / code> "stylesheet" href = " style_align-self.css " / & gt; & lt; / head & gt;

    < code class = "undefined space">

    & lt; body & gt;

    & lt; ul class = < code class = "string"> "container" & gt;

    & lt; li class = "item flex-start" & gt;

    & lt; p & gt; 1 & lt; / p & gt;

    & lt; / li & gt ;

    & lt; li class = "item flex-end" & gt;

    & lt; p & gt; 2 & lt; / p < / code> & gt;

    & lt; / li & gt;

    & lt; li class = "item center" & gt;

    & lt; < / code> p & gt; 3 & lt; / p & gt;

    & lt; / < / code> li & gt;

    & lt; li class = "item duỗi" & gt;

    & lt; p & gt; 4 & lt; / p & gt;

    & lt; / li & gt;

    & lt; li class = < / code> "item baseline" & gt;

    & lt; p & gt; 5 & lt; / p & gt;

    & lt; / li & gt;

    & lt; / ul & gt;

    & lt; / body & gt;

    & lt; / html & gt;

     
     

    Mã CSS:

    CSS

    . container {

    background-color : rgb ( 245 197 221 );

    padding : 0 ; < / code>

    margin : 0 ;

    height : 250px ;

    border : 2px solid black ;

    < code class = "trơn">}

    ul {

    list-style : none ;

    }

    . item {

    background-color : rgb ( 141 , 178 , 226 );

    padding : 5px ;

    width : 100px ;

    margin : 5px ;

    line-height : 100px ;

    < code class = "keyword"> font-weight : bold ; < / code>

    border : 2px solid black ;

    }

    . flex-start {

    align-self: flex-start;

    }

    < p class = "line number24 index23 alt1"> . flex-end {

    align-self: flex-end;

    }

    . center {

    align-self: center ;

    }

    . stretch {

    align-self: Stret;

    }

    . baseline {

    < code class = "undefined space"> align-self: baseline ;

    }

     
     

    Đầu ra:

    Các trình duyệt được hỗ trợ:

    < ul>

  • Google Chrome 29.0
  • Firefox 22.0
  • Microsoft Edge 12.0
  • Internet Explorer 11+
  • Opera 48.0
  • Safari 10.0

Ghi chú Cá nhân của tôi


Xem thêm những thông tin liên quan đến chủ đề hộp flex trong css là gì

Các thuộc tính CSS Flexbox cho Flex item

alt

  • Tác giả: Nguyễn Thị Thùy Liên
  • Ngày đăng: 2021-09-24
  • Đánh giá: 4 ⭐ ( 6531 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu các thuộc tính CSS Flexbox cho flex-items giúp xây dựng layout - bố cục cho trang web: align-selft, flex-grow, flex-shrink; flex-basis, flex, order

    Nếu bạn thấy nội dung video giá trị và hữu ích, hãy ủng hộ mình một ly cà phê nhé.
    https://sites.google.com/view/nguyenthithuylien/buy-me-a-coffee

    flexbox css html nguyenthithuylien

Thuộc tính Display Flex trong Css

  • Tác giả: quachquynh.com
  • Đánh giá: 3 ⭐ ( 1573 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Sử Dụng Flex Css Là Gì

  • Tác giả: dnppower.com.vn
  • Đánh giá: 4 ⭐ ( 2909 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Giới thiệu:Flexbox là một kiểu dàn trang (layout mode) mà nó sẽ tự cân đối kích thước của các phần tử bên trong để hiển thị trên mọi thiết bị, Nói theo cách khác, bạn không cần thiết lập kích thước của phần tử, không cần cho nó float, chỉ cần thiết lập nó hiển thị chiều ngang hay chiều dọc, lúc đó các phần tử bên trong có thể hiển thị theo ý muốn

Hướng dẫn học

  • Tác giả: hocwebchuan.com
  • Đánh giá: 5 ⭐ ( 4352 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Display flex là thuộc tính có trong CSS3, 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.

Sử dụng flexbox bố cục trang trong CSS

  • Tác giả: xuanthulab.net
  • Đánh giá: 4 ⭐ ( 2894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Thiết lập kích hoạt flexbox để dàn trang một cách mềm dẻo, thiết lập các cách hiện thị phần tử trong hộp flexbox

Tìm hiểu về Flexbox trong CSS

  • Tác giả: viblo.asia
  • Đánh giá: 3 ⭐ ( 6046 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexbox là gì?

Display flex trong css là gì? hướng dẫn sử dụng

  • Tác giả: wpjuicy.com
  • Đánh giá: 5 ⭐ ( 4491 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Display Flex trong CSS là quy định những thành phần con bên trong thành mẹ sẽ co lại hoặc giãn ra như thế nào. Để hiểu hơn về thành phần này, hãy theo dõi bài

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Giao tiếp giữa máy tính và Arduino thông qua Serial - khám phá Processing - string trong arduino

By ads_php