Bố cục hai cột sử dụng CSS flexbox, với văn bản linh hoạt, hình ảnh và nền màu: Hướng dẫn Thiết kế và Phát triển Web từ Brendan Munnelly

Bạn đang xem: hiển thị flex hai cột

Nội dung & gt;

CSS Flexbox: Bố cục hai cột

Mục tiêu học tập

Vào cuối Hướng dẫn này, bạn sẽ có thể:

  • Tạo và tạo kiểu cho bố cục hai cột đáp ứng bằng cách sử dụng CSS flexbox, với văn bản linh hoạt, hình ảnh và nền màu.

Bạn có thể xem phiên bản hoàn chỉnh của trang web hai cột mẫu mà bạn tạo kiểu trong Hướng dẫn này bằng cách nhấp vào liên kết bên dưới. Trang mẫu đã hoàn thành sẽ mở ra trong một tab mới của trình duyệt web của bạn.


flex-two-column.html

Các trang web và tệp mẫu của bạn

Bước đầu tiên của bạn là tải xuống các tệp bạn cần cho Hướng dẫn này.

  1. Tải xuống tệp nén sau vào máy tính của bạn:

    flexbox-samples.zip

  2. Sao chép tệp ZIP vào thư mục trang web của bạn.
  3. Giải nén tệp ZIP.
  4. Các tệp sẽ giải nén vào một thư mục con của thư mục trang web của bạn có tên là flexbox-samples .

    Bạn sẽ thấy 18 tệp: ba tệp HTML, ba tệp CSS và mười hai tệp hình ảnh.

    flex-two-column.html
    flex-ba-cột.html
    flex-four-column.html

    flex-two-column.css
    flex-ba-column.css
    flex-four-column.css

    hướng.png
    blackberry.jpg
    cheesecake.jpg
    pieceofcake.jpg
    hoa.jpg
    heart.jpg
    hook-head.jpg
    sport-1.jpg
    sport-2.jpg
    sport-3.jpg
    sport-4.jpg

  5. Sao chép tất cả các tệp này từ thư mục con flexbox-samples vào thư mục trang web chính của bạn.

Bây giờ, bạn đã sẵn sàng làm việc với các tệp mẫu mà bạn đã tải xuống.

Làm việc với trang web hai cột

Trong Hướng dẫn này, bạn sẽ làm việc với trang web hai cột mẫu, biểu định kiểu hai cột mẫu và hai trong số các tệp hình ảnh mà bạn đã tải xuống.

  1. Trong Visual Studio Code, hãy mở hai tệp sau:

    flex-two-column.html
    flex-two-column.css

  2. Hiển thị trang web flex-two-column.html trong trình duyệt của bạn.

    Bạn có thể thấy rằng:

    • Các đường viền màu đã được thêm vào để làm nổi bật các cạnh của các phần tử mẹ (bằng

      màu đỏ

      ) và các phần tử con (bằng

      màu xanh lam

      ).

    • Tất cả nội dung được đặt trực tiếp vào các cạnh của cửa sổ trình duyệt.

      Đó là do không có phần đệm nào (khoảng cách bên trong) được thêm vào các phần tử vùng chứa chính của container-block .

    • Tất cả nội dung rộng 100%, từ trái sang phải, trên cửa sổ trình duyệt.

      Đó là vì các cột con item-col-2 được mặc định là 100% chiều rộng.

  3. Trong VS Code, hãy hiển thị biểu định kiểu flex-two-column.css .

    Bạn có thể thấy hai kiểu trống cho bộ chọn

    . Container-block

    . Mỗi bên trong một truy vấn phương tiện. Truy vấn đầu tiên dành cho màn hình máy tính để bàn / máy tính xách tay; thứ hai, dành cho điện thoại di động.

  4. Thêm các thuộc tính và giá trị đệm sau vào hai bộ chọn

    . container-block

    .

     
     
    

    @ media

    (

    min-width

    :

    768px

    ) {

    . container-block

    {

    padding

    :

    4% 8%

    }}

    @ media

    (

    max-width

    :

    767px

    ) {

    . container-block

    {

    padding

    :

    11% 8%

    }}
  5. Lưu biểu định kiểu flex-two-column.css và xem trang web trong trình duyệt của bạn.

Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, giờ đây bạn sẽ thấy khoảng cách bên trong các đường viền màu đỏ của ba phần tử chính của khối chứa .

Thiết lập các cột con của flexbox

Nhiệm vụ tiếp theo của bạn là đặt chiều rộng của các cột con .item-col-2 để tạo bố cục hai cột của bạn trên màn hình máy tính để bàn và máy tính xách tay.

  1. Trong VS Code, hãy hiển thị biểu định kiểu flex-two-column.css .

    Bạn có thể thấy rằng, đối với màn hình di động, chiều rộng: 100% đã được đặt cho bộ chọn cột con

    . item-col-2

    .

    Tuy nhiên, chưa có giá trị chiều rộng nào được đặt cho

    . Item-col-2

    cho màn hình máy tính để bàn / máy tính xách tay.

  2. Để tạo bố cục hai cột trên màn hình lớn, hãy sao chép và dán phần sau.
     
    

    @ media

    (

    min-width

    :

    768px

    ) {

    . item-col-2

    {

    width

    :

    47%

    } }
  3. Lưu biểu định kiểu flex-two-column.css và xem trang web trong trình duyệt của bạn.

Như bạn có thể thấy:

  • Trên máy tính để bàn / máy tính xách tay, các cột con item-col-2 hiện có kích thước nhỏ hơn một nửa chiều rộng của vùng chứa mẹ. Đây là những gì bạn muốn.
  • Rất tiếc, các cột con của bạn được xếp chồng lên nhau theo chiều dọc, cái này ở trên cái kia. Thay vào đó, bạn muốn chúng được sắp xếp thành một hàng ngang, từ trái sang phải, trên toàn màn hình.

Thiết lập các phần tử chính của flexbox

Để trình duyệt web hiển thị các cột con item-col-2 ở chiều rộng bạn đã đặt là 47% , bạn cần tạo vùng chứa mẹ của chúng, có tên là container-flexbox , một phần tử flexbox.

  1. Trong VS Code, bạn có thể thấy rằng bộ chọn

    . container-flexbox

    đã được tạo. Nhưng nó không chứa quy tắc phong cách.

  2. Sao chép và dán ba cặp giá trị và thuộc tính liên quan đến flexbox sau đây.
     
    

    . container-flexbox

    {

    display

    :

    flex

    ;

    justify-content

    :

    space-between

    ;

    flex-wrap

    :

    wrap

    ; }
  3. Lưu biểu định kiểu flex-two-column.css và xem trang web trong trình duyệt của bạn.

Giờ đây, các phần tử con của bạn sẽ hiển thị chính xác theo bố cục hai cột trên màn hình máy tính để bàn / máy tính xách tay.

Sử dụng tính năng thay đổi kích thước màn hình của trình duyệt web của bạn để xác nhận bố cục của bạn hiển thị dưới dạng một cột duy nhất trên màn hình có kích thước dành cho thiết bị di động.

Thêm nền màu

Tiếp theo, bạn sẽ thêm nền màu vào bố cục hai cột của mình: đầu tiên, vào vùng chứa mẹ và các cột con của nó; rồi đến cột con.

  • Vùng chứa chính : Trong trang web của bạn, vùng chứa mẹ của bạn có hai lớp: container-block container-flexbox .

    Khi bạn thêm nền màu vào phần tử mẹ, các giá trị đệm của lớp container-block sẽ ngăn nội dung bên trong phần tử mẹ đẩy trực tiếp lên các cạnh của phần tử mẹ.

    Vì vậy, khi thêm nền màu vào vùng chứa chính, bạn cũng không cần thêm bất kỳ phần đệm bổ sung nào vào vùng chứa đó.

  • Cột con : Lớp item-2-col tạo kiểu cho các cột con của bạn bao gồm bất kỳ giá trị đệm nào.

    Vì vậy, để ngăn nội dung bên trong phần tử con đẩy lên bốn cạnh của nó, bạn sẽ cần thêm một số giá trị đệm vào lớp item-2-col trong tệp biểu định kiểu của mình.

Thêm nền màu vào vùng chứa chính

Làm theo các bước sau để thêm nền màu vào hai trong ba phần tử vùng chứa chính trong trang web của bạn.

  1. Trong VS Code, hãy hiển thị trang web flex-two-column.html .
  2. Đối với phần tử mẹ thứ hai trên (khoảng) dòng 37 của trang của bạn, hãy thêm lớp bg-light .
  3. Đối với phần tử mẹ thứ ba trên (khoảng) dòng 59 của trang, hãy thêm lớp bg-dark .

    Hai kiểu màu nền là bg-light (xanh lam nhạt) và bg-dark (màu tím, gradient từ trái sang phải) được cung cấp với mẫu flex -two-column.css tệp biểu định kiểu.

  4. Lưu trang web flex-two-column.html và xem kết quả trong trình duyệt của bạn.

Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, trang web của bạn bây giờ sẽ trông như hình bên dưới.

Thay đổi màu văn bản bên trong phần tử mẹ

Đối với & lt; h3 & gt; tiêu đề phụ và & lt; p & gt; các đoạn bên trong vùng chứa mẹ có nền bg-dark , bạn cần thay đổi màu của văn bản.

Lưu ý về mối quan hệ cha mẹ – con cái tại đây:

  • Các tiêu đề phụ

    & lt; h3 & gt;

    & lt; p & gt;

    đoạn văn bản là con của cột item-col-2 .

  • Các cột item-col-2 là con của các vùng chứa mẹ có ba lớp: container-block , container-flexbox và < b> bg-dark .

Trong flex-two-column.css của bạn bảng định kiểu, bạn có thể nội dung văn bản của các cột con bằng cách nhập như sau:

. container-block.container-flexbox.bg-dark .item-col-2

h3

{

color

:

# fff

}

. container-block.container-flexbox.bg-dark .item-col-2

p

{

color

:

# fff

}

Tuy nhiên, đối với trang web này, chỉ cần nhập như sau:

. container-block.bg-dark .item-col-2

h3

{

color

:

# fff

}

. container-block.bg-dark .item-col-2

p

{

color

:

# fff

}

Hoặc, cách khác:

. container-flexbox.bg-dark .item-col-2

h3

{

color

:

# fff

}

. container-flexbox.bg-dark .item-col-2

p

{

color

:

# fff

}

Cả hai đều sẽ hoạt động.

Nhưng điều gì sẽ xảy ra nếu sau này bạn thêm vào cột con item-col-2 các phần tử văn bản khác với các thẻ HTML khác – chẳng hạn như & lt; h1 & gt ;, & lt; h2 & gt; hoặc & lt; h4 & gt ;?

Giải pháp lý tưởng là sử dụng bộ chọn phổ quát hoặc CSS của * để nhắm mục tiêu văn bản bên trong các cột con item-col-2 – bất kể thẻ HTML cụ thể của chúng là gì. < / p>

Đây là các bước:

  1. Trong biểu định kiểu flex-two-column.css của bạn, ở gần cuối, bạn sẽ thấy dòng nhận xét sau.
     
    

    Thêm mã sau vào bên dưới:

    . container-flexbox.bg-dark .item-col-2

    *

    {

    color

    :

    # fff

    }
  2. Lưu trang web và xem kết quả trong trình duyệt của bạn.

Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, trang web của bạn bây giờ sẽ trông như hình bên dưới.

Thêm nền màu vào cột con

Tiếp theo, bạn sẽ thêm màu nền vào cột con item-col-2 cụ thể bên trong một trong ba vùng chứa mẹ trong trang web của bạn. Hãy làm theo các bước sau.

  1. Trong trang web flex-two-column.html , hãy thêm lớp bg-dark vào item-col-2 đầu tiên cột con bên trong vùng chứa mẹ đầu tiên.
  2. Lưu trang web và xem kết quả trong trình duyệt của bạn.

Như bạn có thể thấy, bạn cần thực hiện thêm hai tác vụ:

  • Thay đổi màu của các tiêu đề phụ và đoạn văn bản bên trong cột con với nền tối.
  • Thêm khoảng cách vào bên trong bốn cạnh của cột con.

Thay đổi màu văn bản bên trong cột con

Đối với & lt; h3 & gt; tiêu đề phụ và & lt; p & gt; các đoạn bên trong cột con có nền bg-dark , bạn cần thay đổi màu của văn bản.

Đây là các bước:

  1. Trong biểu định kiểu flex-two-column.css của bạn, ở gần cuối, bạn có dòng nhận xét sau và quy tắc kiểu CSS áp dụng cho các cột con có vùng chứa mẹ có lớp là bg-dark .
     
    

    . container-flexbox.bg-dark .item-col-2

    *

    {

    color

    :

    # fff

    }
  2. Cập nhật điều này bằng cách thêm quy tắc kiểu mới áp dụng khi phần tử con có lớp bg-dark .
     
    

    . container-flexbox.bg-dark .item-col-2

    *

    {

    color

    :

    # fff

    }

    . container-flexbox .item-col-2.bg-dark

    *

    {

    color

    :

    # fff

    }

    Quy tắc kiểu mới này với bộ chọn CSS * sẽ nhắm mục tiêu văn bản bên trong các cột con item-col-2 có lớp bg-dark – bất kể thẻ HTML cụ thể của chúng là gì.

  3. Lưu trang web và xem kết quả trong trình duyệt của bạn.

Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, trang web của bạn bây giờ sẽ trông như hình bên dưới.

Bạn có thể thấy rằng bạn cần thêm một số phần đệm vào cột con với nền màu.

Giới thiệu về cột con và phần đệm

Theo nguyên tắc chung, bạn sẽ luôn muốn thêm phần đệm vào cột con có nền màu.

Vì vậy, rất hợp lý khi phát triển một bố cục phù hợp với tất cả các bố cục nhiều cột – cho dù chúng có hai, ba, bốn hay thậm chí nhiều cột hơn.

Bạn có thể đạt được điều này bằng cách làm theo hai cách tiếp cận sau:

  • Sử dụng các giá trị phần trăm đệm : Thay vì nhập các giá trị cố định (chẳng hạn như 20px ) cho phần đệm, hãy sử dụng các giá trị phần trăm (chẳng hạn như 2% ) thay vì.

    Kết quả là, bố cục ba cột của bạn sẽ có ít đệm hơn một chút so với bố cục hai cột và bố cục bốn cột của bạn thậm chí còn ít hơn. Đây thường là những gì bạn sẽ muốn.

  • Sử dụng ký tự đại diện (*) với các tên lớp : Trong Hướng dẫn này, bạn đang làm việc với bố cục hai cột trong đó các cột con được tạo kiểu với tên lớp là item-col -2 .

    Trong Hướng dẫn CSS Flexbox: Three Column Layouts CSS Flexbox: Four Column Layouts , các cột con sẽ có tên lớp là item-col-3 item-col-4 .

    Bằng cách sử dụng tên lớp có định dạng nhất quán, bạn có thể áp dụng ký tự đại diện * để tạo bộ chọn CSS phổ quát định kiểu cho tất cả các lớp có tên bao gồm item-col- . < / li>

Bài tập tiếp theo cung cấp một ví dụ về hai cách tiếp cận này trong thực tế.

Thêm đệm vào cột con

Trong các bước tiếp theo này, bạn sẽ áp dụng phần đệm cho một cột con cụ thể trong bố cục của mình.

  1. Trong trang web flex-two-column.html của bạn, hãy thêm lớp item-col-padding mới vào cột con có lớp bg-dark .
  2. Lưu trang web và xem kết quả trong trình duyệt của bạn. Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, trang web của bạn bây giờ sẽ trông như hình dưới đây.

    Phần đệm trong các cột con item-col-2 được tạo bởi hai kiểu sau trong tệp flex-two-column.css .

    Bạn cần các giá trị đệm khác nhau cho màn hình máy tính để bàn / máy tính xách tay (hiển thị ở hoặc chế độ ‘nghiêng’) và màn hình di động (thường được hiển thị ở chế độ ‘thẳng đứng’).

    Giá trị padding-top nhỏ hơn một chút so với giá trị padding-bottom vì các cột con bắt đầu bằng văn bản lớn hơn một chút bên trong

    & lt; h3 & gt ;

    và kết thúc bằng văn bản nhỏ hơn bên trong thẻ

    & lt; p & gt;

    .

  3. Cập nhật hai kiểu cho bộ chọn item-col-padding trong biểu định kiểu của bạn như sau.
     
    

    @ media

    tất cả

    và (

    min-width

    :

    768px

    ) { [

    class

    * =

    "item-col-"

    ].

    item-col -padding

    {

    padding

    :

    1,8% 2% 2,2% 2%

    } }

    @ media

    tất cả

    và (

    max-width

    :

    767px

    ) { [

    class

    * =

    "item-col-"

    ].

    item-col -padding

    {

    padding

    :

    6,5% 7% 7% 7%

    } }

    Các quy tắc kiểu cập nhật này cũng sẽ áp dụng cho các cột con có tên lớp như item-col-3 item-col-4 .

  4. Lưu tệp biểu định kiểu của bạn.

Thêm một khối anh hùng

Cuối cùng, đây là một ví dụ về bố cục flexbox hai cột được sử dụng để tạo cái gọi là khối anh hùng.

  1. Trong VS Code, ở cuối trang web flex-two-column.html , hãy sao chép và dán nội dung sau:
    & lt; 

    div

    class

    =

    "container-block container-flexbox bg- anh hùng "

    & gt; & lt;

    div

    class

    =

    "item-col-2" & gt; & lt;

    h1

    & gt;

    Hook Head

    & lt; /

    h1 & gt; & lt;

    h2

    & gt;

    Tàu hướng dẫn & lt;

    br

    & gt; với giá 800 năm.

    & lt; /

    h2

    & gt; & lt; /

    div

    & gt; & lt; /

    div

    & gt;

    Lưu trang web của bạn.

  2. Trong biểu định kiểu của bạn, hãy sao chép và dán những thứ sau:
     
    

    . bg-hero

    {

    display

    :

    flex

    ;

    flex-direction

    :

    column

    ;

    justify-content

    :

    center

    ;

    background-image

    :

    url

    ('

    hook-head.jpg ');

    background-position

    :

    center center

    ;

    background-size

    :

    cover

    ;

    background-repeat

    :

    no-repeat

    ;

    height

    :

    510px

    ; }

    . bg-hero h1

    ,

    . bg-hero h2

    {

    letter-spacing

    :

    - 2px

    ;

    color

    :

    # fff

    ;

    font-weight

    :

    bold

    ;

    text-shadow

    :

    2px 2px

    # 222

    }

    . bg-hero h1

    {

    font-size

    :

    calc

    (

    80px

    + (

    100

    -

    80

    ) * ((

    100vw

    -

    320px

    ) / (

    1600

    -

    320

    ))); }

    . bg-hero h2

    {

    font-size

    :

    calc

    (

    36px

    + (

    56

    -

    36

    ) * ((

    100vw

    -

    320px

    ) / (

    1600

    -

    320

    ))); }

    @ media

    tất cả

    và (

    min-width

    :

    768px

    ) {

    . bg-hero h1

    {

    margin-bottom

    : < p class = "số mã thông báo"> 1%

    }}

    @ media

    tất cả

    và (

    max-width

    :

    767px

    ) {

    . bg-hero

    {

    background-position

    :

    right center ;

    height

    :

    420px

    }

    . bg-hero h1

    ,

    . bg-hero h2

    {

    text-align

    :

    center

    }

    . bg-hero h1

    {

    margin-bottom

    :

    10% } }

  3. Lưu biểu định kiểu và xem trang web trong trình duyệt web của bạn.

Trên máy tính để bàn / máy tính xách tay và trên màn hình có kích thước dành cho thiết bị di động, trang web của bạn bây giờ sẽ trông như hình bên dưới.

Bây giờ, bạn đã làm việc xong với trang web mẫu và biểu định kiểu này.

Vì vậy, giờ đây bạn có thể xóa khỏi biểu định kiểu của mình hai kiểu đường viền màu đỏ xung quanh vùng chứa chính và đường viền màu xanh lam xung quanh các phần tử con.

Nhấp vào flex-two-column.html để xem mẫu hoàn chỉnh của trang web này trong tab mới của trình duyệt web của bạn.

Tải tệp của bạn lên GitHub

Sau khi hoàn thành các trang web và biểu định kiểu, bạn đã sẵn sàng tải chúng lên tài khoản của mình trên GitHub.

  1. Mở một tab mới trong trình duyệt web của bạn và truy cập GitHub.com . Nếu bạn chưa đăng nhập vào tài khoản GitHub của mình, hãy đăng nhập ngay bây giờ.
  2. Chọn hoặc kéo và thả các tệp sau để tải chúng lên tài khoản GitHub của bạn:

    index.html
    flex-two-column.html
    flex-two-column.css
    hướng dẫn.png
    hook-head.jpg

  3. Cuối cùng, cuộn xuống cuối màn hình GitHub, nhập một tin nhắn ngắn vào hộp Cam kết thay đổi và nhấp vào nút Cam kết thay đổi .

Các trang web và bảng định kiểu của bạn hiện đã được xuất bản trên GitHub tại các địa chỉ web tương tự như sau, trong đó tên người dùng là tên người dùng bạn đã chọn cho tài khoản GitHub của mình:

https://username.github.io/flex-two-columns.html

Có thể mất vài phút để các tệp đã tải lên của bạn xuất hiện trên GitHub.

Quay lại Nội dung .


Xem thêm những thông tin liên quan đến chủ đề hiển thị flex hai cột

Dropdown navigation bar using FLEXBOX with 3D Buttons 🤩🤩 | CSS tutorials with simple codes 2021

  • Tác giả: CODING ground
  • Ngày đăng: 2019-01-11
  • Đánh giá: 4 ⭐ ( 2831 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Learn this simple making of dropdown navigation using CSS3 FLEXBOX…

    By using flexbox you can make ur navigation menu very easily and very fast….
    flexbox gives you the power of making your content organisation in a very simple way.
    CSS flex-box layout is a particular way to specify the layout of HTML pages.

    One of the most defining features of the flex layout is its ability to form-fit, based on its viewing environment. Flex boxes can adjust in size—either decreasing, to avoid unnecessarily monopolizing space, or increasing to make room for contents to be constrained within its boundaries. Moreover, the flex layout is less restrictive in terms of content flow than those, for example, of the block and inline display types, which are generally uni-directional. Indeed, not only can flex directional flow be specified, at the style level, as rightwards, leftwards, upwards, or downwards; individual items within a flex container may also be automatically reordered and rearranged to suit the available layout space.
    In the 2000s the intensive Internet access by mobile agents motivated “liquid layouts” and responsive elements for the growing variety of screen sizes. In the 2010s, the intensive use of popular JavaScript layout frameworks, such as Bootstrap, inspired CSS flex-box and grid layout specifications.
    Following are a few terms associated with the flex layout model

    Flex container
    Parent element that holds all flex items. Using the CSS display property, the container can be defined as either flex or inline-flex.
    Flex item
    Any direct child element held within the flex container is considered a flex item. Any text within the container element is wrapped in an unknown flex item.
    Axes
    Each flex box contains two axes: the main and cross axes. The main axis is the axis on which the items align with each other. The cross axis is perpendicular to the main axis.
    Flex-direction

    Establishes main axis. Possible arguments: row (default), row-reverse, column, column-reverse.
    Justify-content

    Determines how content gets placed on the main axis on the current line. Optional arguments: left, right, center, space-between, space-around.
    Align-items

    Determines the default for how flex items get placed on the cross axis on each line.
    Align-content

    Determines the default for how cross axis lines are aligned.
    Align-self

    Determines how a single item is placed along the cross axis. This overrides any defaults set by align-items.
    Directions
    The main-start/main-end sides determine where to start placing flex items within the flex container, starting from the main-start end and going to the main-end end. The cross-start/cross-end sides determine where flex lines get filled with flex items from cross-start to cross-end.
    Order

    Places elements in groups and determines which order they are to be placed in within the container.
    Flex-flow

    Shorthands flex-direction and flex-wrap to place the flex content.
    Lines
    Flex items can either be placed on a singular line or on multiple lines as defined by the flex-wrap property, which controls both the direction of the cross axis and how lines stack within the container.
    Dimensions
    Main size and cross size are essentially the height and width of the flex container, each dealing with the main and cross axes respectively.
    Designate a flex box
    Designating an element as a flex element is relatively easy. All that is necessary is to set the display property to either flex or inline-flex as follows:

    display: flex;
    Or:

    display: inline-flex;
    By setting the display to one of the two values above, an element becomes a flex container and its children flex items. Setting the display to flex makes the container a block-level element, while setting the display to inline-flex makes the container an inline-level element.[5]

    Align to center
    One of flexbox’s advantages is the ability to easily align items within the container to the center of a page, both vertically and horizontally.

    display: flex;
    align-items: center;
    justify-content: center;
    Align Specific Child Elements Differently from its Siblings
    Using “margin-left” and “margin-right”, specific child elements within a flex container can be aligned differently on the main axis compared to its siblings that are aligned using the “justify-content” setting[6].

    In the following example, all of the flex children are aligned to the start of the flex container, except the last child, which is right aligned, using “margin-left:auto”:

Cách ẩn và hiện lại hàng và cột trong Excel 2007, 2010, 2013, 2016

  • Tác giả: docco.vn
  • Đánh giá: 3 ⭐ ( 9563 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn thủ thuật cách hiện và ẩn hàng và cột trong Microsoft Excel 2007, 2010, 2013, 2016, 2019 miễn phí mới nhất. Click vào nhé

Cách hiện và bỏ ẩn cột trong Excel đơn giản nhất

  • Tác giả: www.dienmayxanh.com
  • Đánh giá: 5 ⭐ ( 1981 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: File Excel mà bạn nhận bị ẩn một vài cột nhưng bạn không biết cách bỏ ẩn? Đừng lo lắng, hãy tham khảo ngay cách hiện và bỏ ẩn cột trong Excel đơn giản nhất.

Mất Dòng 1 2 3 Trong Excel 100% Thành Công, Cách Bỏ Ẩn Và Hiển Thị Các Cột Ẩn Trong Excel

  • Tác giả: thosanlinhhon.vn
  • Đánh giá: 3 ⭐ ( 8009 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài viết này, Học Excel Online sẽ hướng dẫn các bạn cách ẩn các cột trong Excel sau đó là cách hiện thị tất cả hoặc một số cột theo ý muốn của bạn, Cách bỏ ẩn tất cả các cột trong Excel:Cho dù bạn có một hoặc vài cột ẩn trong bảng của mình, bạn có thể dễ dàng hiển thị tất cả chúng cùng một lúc bằng cách sử dụng tùy chọn Excel Unhide

Dàn trang với CSS Flexbox toàn tập

  • Tác giả: thachpham.com
  • Đánh giá: 3 ⭐ ( 9965 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn sử dụng kỹ thuật Flexbox trong CSS3 để chia bố cục nhanh hơn, không cần dùng đến float và clear float.

Hướng dẫn học

  • Tác giả: hocwebchuan.com
  • Đánh giá: 3 ⭐ ( 5624 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.

Ẩn hoặc hiển thị hàng hoặc cột – Lava

  • Tác giả: lava.com.vn
  • Đánh giá: 5 ⭐ ( 2330 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  Câu lệnh lặp While, Cú pháp & Ví dụ - Video & Bản ghi bài học - vòng lặp while là gì

By ads_php