CSS flexbox là gì? – hộp flex là gì

Cổng thông tin 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, được 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 là gì

Hộp bố cục linh hoạt CSS , thường được gọi là Hộp linh hoạt 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ô 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 với 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 chứa 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 lại để tránh tràn.
  • Không xác định 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: Hộp linh hoạt Mục linh hoạt

Các mục linh hoạt 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 sự uốn cong -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 kích thước chéo.

Để 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ảng mã = "UTF-8" / & gt;

& lt; meta http-equiv = " X-UA-Tương thích " nội dung = " 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à. Vùng 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);
    màu nền: 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 < code 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 < mã 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 lớp = "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 : < code class = "undefined space"> 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 linh hoạt 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. Điều này 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 tên = "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 bọc" & 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 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: ngay bây giờ ;

}

. 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> : Nó 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 hàng và flex-wrap dưới dạng 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 cách 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 = "trơn"> & 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 : dấu cách đều;

}

ul {

list-style : không có ;

}

. 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ổ đề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 số 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 = "vi" & 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 = "trơn"> & 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- nội dung : flex-start;

    }

    . flexEnd {

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

    }

    < mã 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 | trung tâm | flex-start | flex-end | baseline | ban đầu |
    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 = "vi" & 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 = " biểu đị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 = " đường cơ sở vùng chứa " & 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 ;

    }

    . 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ự mà 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 gán giá trị lớn hơn 0 xuất hiện sau các mục chưa đặt giá trị . Đ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 = "trơn"> & 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 & gt;

    & lt; / < 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à co lại 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 tương ứng là 0 và 1. 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 = "trơn"> & 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 : < code class = "undefined space"> 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 = "trơn"> & 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 < mã class = "trơn"> ( 245 197 221 );

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

    < / code> height : 250px ;

    border < mã 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 : < code class = "undefined space"> 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>

    }

    . initial {

    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 là gì

Flexbox CSS trong 15 phút | Học HTML & CSS

alt

  • Tác giả: HoleTex
  • Ngày đăng: 2021-03-22
  • Đánh giá: 4 ⭐ ( 5680 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexbox CSS trong 15 phút | Học HTML & CSS

    Trong video này, chúng ta sẽ học về flexbox và các thuộc tính của nó trong CSS. Chúng ta có thể sử dụng flexbox để xây dựng các ứng dụng web hiện đại mà không cần sử dụng tới các thuộc tính như float hay position.

    Hiện tại là năm 2021, flexbox đã trở lên rất phổ biến và được hỗ trợ bởi hầu hết các trình duyệt.

    💻 Thông số PC & Gears của mình (Affiliate Links):
    Máy ảnh Canon EOS M50 + Kit 15-45mm - https://shorten.asia/bcFhNcnn (TIKI)
    Microphones Elgato Microphone Wave 3 - https://shorten.asia/jnfeQ479 (TIKI)
    Micro Rode Videomic Gohttps://shorten.asia/wakxwDTE (TIKI)
    Màn hình Dell S2421HN 23.8Inch IPS - https://shorten.asia/7QFa78K4 (TIKI)
    Màn hình MSI OPTIX G27C4 27 VA 165Hz - https://shorten.asia/wYQjECEa (TIKI)

    Tai Nghe Gaming SteelSeries Arctis 7 DTS.X 7.1 - https://shorten.asia/E2T1DkvR (TIKI)
    Chuột SteelSeries Rival 310 - https://shorten.asia/ASkx5jwx (TIKI)
    Ổ cứng HDD Western Digital BLUE 6TB - https://shorten.asia/Q7GmkecR (TIKI)
    CPU Intel Core i5-10400 - https://shorten.asia/yWnkVJtQ (TIKI)
    Ram ADATA DDR4 XPG GAMMIX D10 8GB 3200MHz - https://shorten.asia/2vGSE7VX (TIKI)
    Mainboard ASRock B460M - https://shorten.asia/GfzknMY4 (TIKI)

    📢 Liên hệ với mình tại:
    Facebook: https://www.facebook.com/holetex/​
    Instagram: https://www.instagram.com/holetex/
    Github: https://github.com/holetexvn
    Facebook cá nhân: https://www.facebook.com/minhtung09/
    Email: holetex@outlook.com/

    Nếu các bạn có bất kì câu hỏi hay thắc mắc nào thì hãy để lại cho mình một comment ở phía dưới nhé!

    holetex flexbox css

Flexplate là gì? Tìm hiểu bánh đà hộp số tự động

  • Tác giả: www.xecov.com
  • Đánh giá: 4 ⭐ ( 1991 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexplate là gì? Tìm hiểu bánh đà hộp số tự động Flexplate trên ô tô. Sự khác nhau giữa bánh đà Flexplate và bánh đà hộp số sàn.

Sữa tiệt trùng Flex không Lactose - Giấc Mơ Sữa Việt - Vinamilk eShop

  • Tác giả: giacmosuaviet.com.vn
  • Đánh giá: 3 ⭐ ( 9158 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Sữa tiệt trùng Flex không Lactose được làm từ 100% sữa tươi - 4 hộp 180ml .Mua ngay. Xem nhanh tại Vinamilk eShop - Giấc Mơ Sữa Việt

Thuốc Flexsa - Điều trị thoái hóa các khớp - Hộp 30 gói x 3,7g - Cách dùng

  • Tác giả: webykhoa.vn
  • Đánh giá: 3 ⭐ ( 9638 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Flexsa là thuốc dùng để dự phòng và điều trị các tình trạng thoái hóa các khớp, viêm khớp dạng thấp, viêm xung quanh khớp, loạn dưỡng xương khớp, gãy xương, chấn thương dẫn đến viêm khớp, viêm khớp mạn tính. Vậy thuốc Flexsa được sử dụng như thế nào? Cần lưu ý gì? Hãy để Webykhoa.vn giúp bạn hiểu kĩ hơn về thuốc trong bài viết dưới đây.

Thuộc tính flex-wrap

  • Tác giả: blog.kenhtinhoc.vn
  • Đánh giá: 5 ⭐ ( 3148 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Thuốc Join Flex – Hộp 60 Viên – Điều Trị Thoái Hóa Xương Khớp

  • Tác giả: nhathuocchinhhang.vn
  • Đánh giá: 3 ⭐ ( 3894 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Join Flex Hộp 60 Viên có công dụng điều trị bệnh thoái hóa xương khớp, thoái khớp nguyên phát và thứ phát như thoái khớp gối, háng tay, thoái hóa cột sống, vai.

Flexbox là gì? Các thuộc tính cơ bản và một số thuật ngữ liên quan

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

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  Mảng Java để liệt kê - mảng java để liệt kê chuỗi