Flexbox trong CSS – w3seo sử dụng flex trong CSS, thuộc tính flexbox

Rate this post

Mô-đun Flexible Box, thường được gọi là flexbox, được phong cách thiết kế như một quy mô bố cục tổng quan một chiều và là một giải pháp hoàn toàn có thể cung ứng phân phối khoảng trống giữa những Items trong một giao diện và năng lực chỉnh sửa can đảm và mạnh mẽ. Bài viết này đưa ra một phác thảo về những tính năng chính của flexbox, mà tất cả chúng ta sẽ tò mò chi tiết cụ thể hơn trong phần còn lại của những hướng dẫn này .
Khi tất cả chúng ta miêu tả flexbox là một chiều, chúng tôi đang diễn đạt thực tiễn là flexbox giải quyết và xử lý bố cục tổng quan trong một dimensional tại một thời gian – dưới dạng row hoặc cột. Điều này hoàn toàn có thể tương phản với quy mô hai chiều của CSS Grid Layout, tinh chỉnh và điều khiển những columns và row cùng nhau .

Các bài viết liên quan:

Hai trục của flexbox

Khi thao tác với flexbox, bạn cần tâm lý về hai trục – trục ngang và trục dọc. Trục ngang được xác lập bởi thuộc flex-direction và trục dọc chạy vuông góc với nó. Mọi thứ chúng tôi làm với flexbox đều đề cập đến những trục này, thế cho nên cần hiểu cách chúng hoạt động giải trí ngay từ đầu .
Xem thêm Content-Section element trong html

Trục chính(main axis)

Trục chính được xác lập flex-direction, có bốn giá trị hoàn toàn có thể có :

• row
• row-reverse
• column
• column-reverse

Nếu bạn chọn row hoặc row-reverse, trục chính của bạn sẽ chạy dọc theo row theo inline direction.

Chọn columns hoặc columns-reverse và trục chính của bạn sẽ chạy từ đầu trang đến cuối trang – theo chiều dọc .

Trục ngang(Cross axis)

Cross axis chạy vuông góc với trục chính, do đó nếu flex-direction ( trục chính ) của bạn được đặt thành row hoặc row-reverse, cross axis sẽ chạy xuống những cột .

Nếu trục chính của bạn là columns hoặc columns-reverse thì cross axis chạy dọc theo những hàng .

Hiểu được trục nào là quan trọng khi tất cả chúng ta khởi đầu xem xét việc chỉnh sửa và chỉnh sửa ; flexbox có những thuộc tính chỉnh sửa và căn đều nội dung dọc theo trục này hoặc trục kia .
Xem thêm

Sử dụng Flexbox

Một nghành quan trọng khác của sự hiểu biết là cách flexbox không đưa ra giả định về chính sách ghi của tài liệu. Trước đây, CSS được chú trọng nhiều vào những chính sách viết ngang và từ trái sang phải. Các chiêu thức bố cục tổng quan văn minh gồm có khoanh vùng phạm vi chính sách viết và thế cho nên chúng tôi không còn giả định rằng một dòng văn bản sẽ khởi đầu ở trên cùng bên trái của tài liệu và chạy về phía bên tay phải, với những dòng mới Open bên dưới dòng khác .
Bạn hoàn toàn có thể đọc thêm về mối quan hệ giữa flexbox và đặc tả Chế độ Viết trong một bài viết sau ; tuy nhiên, miêu tả sau đây sẽ giúp lý giải nguyên do tại sao tất cả chúng ta không nói về trái và phải và trên cùng và dưới cùng khi chúng tôi diễn đạt hướng mà những flex items của chúng tôi chảy vào .
Nếu flex-direction là row và tôi đang thao tác bằng tiếng Anh, thì cạnh khởi đầu của trục chính sẽ ở bên trái, cạnh cuối ở bên phải .

Nếu tôi thao tác bằng tiếng Ả Rập, thì cạnh khởi đầu của trục chính của tôi sẽ ở bên phải và cạnh cuối ở bên trái .

Trong cả hai trường hợp, cạnh khởi đầu của trục chữ thập nằm ở trên cùng của flex container và cạnh kết thúc ở dưới cùng, vì cả hai ngôn từ đều có chính sách viết ngang .
Sau một thời hạn, tâm lý về mở màn và kết thúc thay vì trái và phải trở nên tự nhiên và sẽ hữu dụng cho bạn khi giải quyết và xử lý những giải pháp bố cục tổng quan khác như CSS Grid Layout theo cùng một mẫu .

Flex container

Một vùng của tài liệu được bố trí bằng cách sử dụng flexbox được gọi là flex container. Để tạo flex container, chúng tôi đặt giá trị của thuộc tính display container của container thành flex  hoặc inline-flex. Ngay sau khi chúng tôi làm điều này, các phần tử con trực tiếp của container đó sẽ trở thành các flex items. Như với tất cả các thuộc tính trong CSS, một số giá trị initial được xác định, vì vậy khi tạo một flex container, tất cả các flex items được chứa sẽ hoạt động theo cách sau.

• các Items hiển thị trong một row (mặc định của thuộc tính flex-direction là row).
• các Items bắt đầu từ cạnh bắt đầu của trục chính.
• các Items không kéo dài theo chiều chính, nhưng có thể co lại.
• các Items sẽ kéo dài để lấp đầy kích thước của cross axis.
• Thuộc tính flex-basis  được đặt thành tự động.
• Thuộc tính flex-wrap được đặt thành nowrap.

Kết quả của việc này là toàn bộ những Items của bạn sẽ xếp thành một hàng, sử dụng kích cỡ của nội dung làm size của chúng trong trục chính. Nếu có nhiều items hơn hoàn toàn có thể chứa trong box, chúng sẽ không bọc mà thay vào đó sẽ tràn ra ngoài. Nếu 1 số ít items cao hơn những items khác, tổng thể những Items sẽ lê dài theo cross axis để lấp đầy size không thiếu của nó .
Bạn hoàn toàn có thể xem trong ví dụ trực tiếp bên dưới cách này. Hãy thử chỉnh sửa những Items hoặc thêm những Items bổ trợ để kiểm tra hoạt động giải trí initial của flexbox .

          
One
          
Two
          
Three
              
has
              
extra
              
text
          
        
      

 .box {
            display: flex;
          }

Xem thêm Phương pháp resampling

Thay đổi flex-direction

Thêm thuộc tính flex-direction vào tất cả flex container giúp chúng tôi để thay đổi hướng hiển thị các flex items của chúng tôi. Đặt flex-direction: row-reverse sẽ giữ cho các Items hiển thị dọc theo hàng, tuy nhiên dòng bắt đầu và dòng kết thúc được chuyển đổi.

Xem thêm: 5 PHÚT TÌM HIỂU VỀ JAVA SE LÀ GÌ, JAVA CORE LÀ GÌ

Nếu tất cả chúng ta đổi khác flex-direction thành Columns, trục chính sẽ chuyển và những Items của tất cả chúng ta hiện hiển thị trong một cột. Đặt columns-reverse và dòng khởi đầu và dòng kết thúc lại được quy đổi .
Ví dụ trực tiếp bên dưới có flex-direction được đặt thành row-reverse. Hãy thử những giá trị khác – hàng, columns và column-reverse – để xem điều gì xảy ra với nội dung .

     

          
One
          
Two
          
Three
        

 .box {
          display: flex;
          flex-direction: row-reverse;
        }

Multi-line flex containers với flex-wrap

Mặc dù flexbox là quy mô một chiều, hoàn toàn có thể khiến những Items flex của tất cả chúng ta bị quấn thành nhiều dòng. Khi làm như vậy, bạn nên coi mỗi dòng là một flex container mới. Bất kỳ sự phân bổ khoảng trống nào sẽ xảy ra trên đường đó, không tham chiếu đến những đường ở hai bên .
Để gây ra, hãy thêm thuộc tính flex-wrap với giá trị là wrap. Bây giờ, nếu những Items của bạn quá lớn để toàn bộ hiển thị trên một dòng, chúng sẽ quấn vào một dòng khác. Mẫu trực tiếp bên dưới chứa những Items đã được phân phối chiều rộng, tổng chiều rộng của những Items quá rộng so với flex container. Khi flex-wrap được thiết lập để wrap, những Items sẽ wrap. Đặt nó thành nowrap, cũng là giá trị initial và thay vào đó, chúng sẽ thu nhỏ để vừa với container vì chúng đang sử dụng những giá trị flexbox initial được cho phép những Items thu nhỏ. Sử dụng Nowrap sẽ gây ra tràn nếu những Items không hề co lại hoặc không hề co lại đủ nhỏ để vừa .

        
One
        
Two
        
Three
      
    

     .box {
        display: flex;
        flex-wrap: wrap;
    }

Viết tắt flex-flow

Bạn hoàn toàn có thể tích hợp hai thuộc tính flex-direction và flex-wrap thành flex-flow. Giá trị tiên phong được chỉ định là flex-direction và giá trị thứ hai là flex-wrap .
Trong ví dụ trực tiếp bên dưới, hãy thử biến hóa giá trị tiên phong thành một trong những giá trị được cho phép so với hướng flex – hàng, row-reverse, columns hoặc columns-reverse và cũng biến hóa giá trị thứ hai thành wrap và giờ đây .

  

        
One
        
Two
        
Three
      
    

.box {
        display: flex;
        flex-flow: row wrap;
      }

Thuộc tính flex items

Để có nhiều quyền trấn áp hơn so với những flex items, chúng tôi hoàn toàn có thể nhắm items tiêu chúng trực tiếp. Chúng tôi triển khai điều này bằng ba thuộc tính :

• flex-grow
• flex-shrink
• flex-basis

Chúng tôi sẽ xem xét ngắn gọn những thuộc tính này trong phần tổng quan này và bạn hoàn toàn có thể hiểu vừa đủ .
Trước khi hoàn toàn có thể hiểu được những đặc tính này, tất cả chúng ta cần xem xét khái niệm về khoảng trống khả dụng. Những gì chúng tôi đang làm khi chúng tôi đổi khác giá trị của những thuộc tính flex này là đổi khác cách phân phối khoảng trống khả dụng giữa những Items của chúng tôi. Khái niệm về khoảng trống có sẵn này cũng rất quan trọng khi tất cả chúng ta xem xét việc sắp xếp những mẫu sản phẩm .
Nếu tất cả chúng ta có ba items rộng 100 px trong một container rộng 500 px, thì khoảng trống chúng tôi cần để sắp xếp những Items của mình là 300 px. Điều này để lại 200 px khoảng trống khả dụng. Nếu chúng tôi không đổi khác những giá trị initial thì flexbox sẽ đặt khoảng chừng trống đó sau items ở đầu cuối .

Thay vào đó, nếu tất cả chúng ta muốn những Items lớn lên và lấp đầy khoảng trống, thì tất cả chúng ta cần phải có một chiêu thức phân phối khoảng trống còn lại giữa những Items. Đây là những gì những thuộc tính flex mà chúng tôi vận dụng cho chính những Items sẽ thực thi .

Thuộc tính cơ bản flex

flex-basis là thông số kỹ thuật về size items đó trong một vùng khoảng trống có sẵn. Giá trị initial là giá trị mặc định mà trình duyệt hoàn toàn có thể thấy. Trong ví dụ : những items có độ lớp 100 px .
Nếu những Items không có kích cỡ thì size của nội dung được sử dụng làm flex-basis. Đây là nguyên do tại sao khi tất cả chúng ta chỉ khai báo display : flex trên element cha để tạo những Items flex, những Items này đều vận động và di chuyển thành một row và chỉ chiếm nhiều khoảng trống khi chúng cần để hiển thị nội dung của chúng .

Thuộc tính flex-grow

Với thuộc tính flex-grow được đặt thành số nguyên dương, những Items flex hoàn toàn có thể tăng trưởng dọc theo trục chính từ flex-basis của chúng. Điều này sẽ làm cho mặt row bị lê dài và chiếm bất kể khoảng trống có sẵn nào trên trục đó hoặc một tỷ suất của khoảng trống có sẵn nếu những mặt row khác cũng được phép tăng trưởng .
Nếu tất cả chúng ta cho tổng thể những mặt row của mình trong ví dụ trên giá trị flex-grow là 1 thì khoảng trống có sẵn trong container flex sẽ được chia đều giữa những mặt row của tất cả chúng ta và chúng sẽ căng ra để lấp đầy container trên trục chính .
Thuộc tính flex-grow hoàn toàn có thể được sử dụng để phân phối khoảng trống theo tỷ suất. Nếu chúng tôi đặt giá trị flex-grow của items tiên phong là 2 và những Items khác có giá trị là 1, thì 2 phần sẽ được trao cho items tiên phong ( 100 px trong số 200 px trong trường hợp của ví dụ trên ), mỗi items 1 phần hai cái còn lại ( 50 px mỗi cái trong tổng số 200 px ) .

Thuộc tính flex-shrink

Trong đó thuộc tính flex-grow đề cập đến việc thêm khoảng trống trong trục chính, thuộc tính flex-shrink lại trấn áp cách nó được lấy đi. Nếu tất cả chúng ta không có đủ khoảng trống trong container để sắp xếp những Items của mình và flex-shrink được đặt thành một số ít nguyên dương, thì items hoàn toàn có thể trở nên nhỏ hơn flex-basis. Như với flex-grow, những giá trị khác nhau hoàn toàn có thể được chỉ định để làm cho một items co lại nhanh hơn những Items khác – một items có giá trị cao hơn được đặt cho flex-shrink sẽ co lại nhanh hơn so với những mẫu sản phẩm cùng loại có giá trị thấp hơn .
Kích thước tối thiểu của mặt row sẽ được tính đến trong khi đo lường và thống kê lượng co rút thực tiễn sẽ xảy ra, điều đó có nghĩa là flex-shrink có năng lực Open ít nhất quán hơn so với co rút trong hoạt động giải trí. Do đó, chúng tôi sẽ xem xét cụ thể hơn cách thuật toán này hoạt động giải trí trong bài viết Kiểm soát tỷ suất của những Items dọc theo trục chính .

Lưu ý: Các giá trị cho flex-shrink và thu nhỏ này là tỷ lệ. Thông thường, nếu tất cả các Items của mình được đặt thành flex: 1 1 200px và sau đó muốn một items phát triển với tốc độ gấp đôi, chúng tôi sẽ đặt items đó thành flex: 2 1 200px. Tuy nhiên, bạn cũng có thể sử dụng flex: 10 1 200px và flex: 20 1 200px nếu muốn.

Giá trị viết tắt cho các thuộc tính flex

Bạn sẽ rất hiếm khi thấy những thuộc tính flex-grow, flex-shrink và flex-base được sử dụng riêng không liên quan gì đến nhau ; thay vào đó chúng được kết hợp thành viết tắt flex. Viết tắt flex được cho phép bạn đặt ba giá trị theo thứ tự này – flex-grow, flex-shrink, flex-base .
Ví dụ trực tiếp bên dưới được cho phép bạn kiểm tra những giá trị khác nhau của tốc ký flex ; hãy nhớ rằng giá trị tiên phong là flex-grow. Mang lại giá trị dương này có nghĩa là mặt row hoàn toàn có thể tăng trưởng. Thứ hai là flex-shrink – với giá trị dương, những Items hoàn toàn có thể co lại, nhưng chỉ khi tổng giá trị của chúng tràn qua trục chính. Giá trị ở đầu cuối là flex-basis ; đây là giá trị mà những mặt row đang sử dụng làm giá trị cơ bản để tăng trưởng và thu nhỏ từ đó .

 

        
One
        
Two
        
Three
      
    

.box {
        display: flex;
      }

      .one {
        flex: 1 1 auto;
      }

      .two {
        flex: 1 1 auto;
      }

      .three {
        flex: 1 1 auto;
      }

Ngoài ra còn có một số ít giá trị tốc ký được xác lập trước gồm có hầu hết những trường hợp sử dụng. Bạn sẽ thường thấy những thứ này được sử dụng trong những hướng dẫn, và trong nhiều trường hợp, đây là toàn bộ những gì bạn cần để sử dụng. Các giá trị được xác lập trước như sau :

• flex: initial
• flex: auto
• flex: none
• flex:

Setting flex : initial đặt lại items về những giá trị initial của Flexbox. Điều này cũng giống như flex : 0 1 auto. Trong trường hợp này, giá trị của flex-grow là 0, thế cho nên những Items sẽ không lớn hơn size flex-basis của chúng. Giá trị của flex-shrink là 1, thế cho nên những Items hoàn toàn có thể co lại nếu chúng cần thay vì tràn. Giá trị của flex-basis là tự động hóa. những Items sẽ sử dụng bất kể size nào được đặt trên items trong kích cỡ chính hoặc chúng sẽ lấy kích cỡ của chúng từ size nội dung .
Sử dụng flex : auto cũng giống như sử dụng flex : 1 1 auto ; mọi thứ giống như với flex : initial nhưng trong trường hợp này, những Items hoàn toàn có thể tăng trưởng và lấp đầy container cũng như co lại nếu được nhu yếu .
Sử dụng flex : none có gì sẽ tạo ra những Items trọn vẹn không flex. Nó giống như thể bạn đã viết flex : 0 0 auto. những Items không hề tăng trưởng hoặc thu nhỏ nhưng sẽ được sắp xếp bằng cách sử dụng flexbox với cơ sở tự động hóa flex-shrink .
Viết rút gọn bạn thường thấy trong những hướng dẫn là flex : 1 hoặc flex : 2, v.v. Điều này giống như thể bạn đã sử dụng flex : 1 1 0. những Items hoàn toàn có thể tăng trưởng và co lại từ flex-basis là 0 .
Hãy thử những giá trị viết tắt này trong ví dụ trực tiếp bên dưới .

 

        
One
        
Two
        
Three
      

 .box {
        display: flex;
      }

      .one {
        flex: 1;
      }

      .two {
        flex: 1;
      }

      .three {
        flex: 1;
      }
  

Căn chỉnh, hợp lý và phân phối không gian trống giữa các Items

Một tính năng chính của flexbox là năng lực chỉnh sửa và căn đều những Items trên trục chính và cross axis, đồng thời phân phối khoảng trống giữa những Items flex. Lưu ý rằng những thuộc tính này sẽ được đặt trên flex container, không phải trên bản thân những Items .

Thuộc tính align-items sẽ căn chỉnh các Items trên cross axis.

Giá trị initial cho thuộc tính này là co và giãn và đây là nguyên do tại sao những flex items lê dài đến độ cao của flex container theo mặc định. Điều này hoàn toàn có thể được pháp luật bởi độ cao của items cao nhất trong container hoặc bởi size được đặt trên chính container flex .
Thay vào đó, bạn hoàn toàn có thể đặt chỉnh sửa những Items thành flex-start để làm cho những Items xếp row ở đầu container flex, flex-end để chỉnh sửa chúng cho đến cuối hoặc căn giữa để căn giữa chúng. Hãy thử điều này trong ví dụ trực tiếp – tất cả chúng ta đã cung ứng cho thùng flex một chiều cao để bạn hoàn toàn có thể thấy cách những Items hoàn toàn có thể được vận động và di chuyển xung quanh bên trong container. Xem điều gì sẽ xảy ra nếu bạn đặt giá trị của những Items chỉnh sửa thành :

• stretch
• flex-start
• flex-end
• center

.box {
            display: flex;
            align-items: flex-start;
          }

          
One
          
Two
          
Three
              
has
              
extra
              
text
          
        

justify-content

Thuộc tính justify-content được sử dụng để chỉnh sửa những Items trên trục chính, hướng mà flex-direction đã thiết lập luồng. Giá trị initial là flex-start sẽ xếp những Items ở mép mở màn của container, nhưng bạn cũng hoàn toàn có thể đặt giá trị thành flex-end để xếp chúng ở cuối hoặc căn giữa để xếp chúng ở giữa .

Bạn cũng có thể sử dụng giá trị khoảng cách giữa để lấy tất cả không gian trống sau khi các Items đã được sắp xếp và chia đều giữa các Items để có một lượng không gian bằng nhau giữa mỗi items. Để tạo ra một lượng không gian bằng nhau ở bên phải và bên trái của mỗi items, hãy sử dụng giá trị khoảng cách xung quanh. Với không gian xung quanh, các Items có một nửa kích thước không gian ở hai đầu. Hoặc, để làm cho các Items có không gian bằng nhau xung quanh chúng, hãy sử dụng không gian giá trị-đồng đều. Với không gian đồng đều, các Items có không gian kích thước đầy đủ ở hai đầu.

Hãy thử những giá trị sau của justify-content trong ví dụ trực tiếp :

• flex-start
• flex-end
• center
• space-around
• space-between
• space-evenly

Trong bài viết Căn chỉnh những Items trong một Flex Container, tất cả chúng ta sẽ tìm hiểu và khám phá sâu hơn về những thuộc tính này, để hiểu rõ hơn về cách chúng hoạt động giải trí. Tuy nhiên, những ví dụ đơn thuần này sẽ có ích trong phần đông những trường hợp sử dụng .

Kết luận

Sau khi đọc bài viết này, bạn sẽ hiểu những tính năng cơ bản của Flexbox. Trong phần tiếp theo, tất cả chúng ta sẽ xem xét đặc tả này tương quan như thế nào đến những phần khác của CSS .

Source: https://final-blade.com
Category : Kiến thức Internet