Các tiện ích CSS cơ bản của Bootstrap

Phần tử chứa - kích hoạt có tính năng flexbox

Sử dụng các lớp: .d-flex hoặc .d-{breakpoint}-flex như .d-sm-flex, nếu áp dụng kiểu inline-flex thì sử dụng lớp .d-inline-flex hoặc .d-{breakpoint}-inline-flex

        <div class="d-flex">
    <!--Code HTML-->
    </div>    

Phần tử chứa - thiết lập flex-wrap

Như đã biết thuộc tính CSS flex-wrap nhận các giá trị nowrap, wrap, wrap-reverse gọi chúng là {wrap}. Trong Bootstrap các giá trị này thiết lập bàng lớp .flex-{breakpoints}-{wrap} như:

• .flex-nowrap, .flex-wrap, .flex-reverse
• .flex-sm-nowrap, .flex-lg-wrap, .flex-md-reverse ...

Ví dụ .flex-wrap - phần tử con xuống dòng mới khi vượt kích thước phần tử chứa

        <div class="d-flex flex-wrap">
       <div class="bg-primary p-2 m-2">PT1</div>
        <div class="bg-primary p-2 m-2">PT2</div>
        <div class="bg-primary p-2 m-2">PT3</div>
        <div class="bg-primary p-2 m-2">PT4</div>
        <div class="bg-primary p-2 m-2">PT5</div>
        <div class="bg-primary p-2 m-2">PT6</div>
        <div class="bg-primary p-2 m-2">PT7</div>
        <div class="bg-primary p-2 m-2">PT8</div>
        <div class="bg-primary p-2 m-2">PT9</div>
        <div class="bg-primary p-2 m-2">PT10</div>
        <div class="bg-primary p-2 m-2">PT11</div>
        <div class="bg-primary p-2 m-2">PT12</div>
    </div>    

Phần tử chứa - thiết lập hướng chính flex-direction

Như đã biết hướng chính của flexbox nhận các giá trị: row, row-reverse, column, column-reverse gọi chúng là {direction}

Để thiết lập các giá trị này cho phần tử dùng đến các thuộc tính: .flex-{direction} hoặc .flex-{breakpoint}-{direction} như:

• .flex-row, .flex-column, .flex-column-reverse, .flex-row-reverse
• .flex-xs-row, .flex-sm-column, .flex-lg-column-reverse, .flex-md-row-reverse ...

Ví dụ .flex-column - đổi hướng chính thẳng đứng

        <div class="d-flex flex-wrap flex-column">
        <div class="bg-primary p-2 m-2">PT1</div>
        <div class="bg-primary p-2 m-2">PT2</div>
    </div>    

Phần tử chứa - đẩy phần tử con theo hướng chính justify-content

Trong phần CSS flexbox, đã biết thuộc tính justify-content để đẩy các phần tử con về một phía nào đó theo hướng chính, nhận các giá trị flex-start, flex-end, center, space-around, space-between thì trong Bootstrap các giá trị này viết là start, end, center, around, between ký hiệu chúng là {values}

Các thuộc tính thiết lập là: justify-content-{values} hoặc justify-content-{breakpoint}-{values}

Ví dụ hướng chính là nằm ngang, thì .justify-content-end đẩy các phần tử con về cuối hàng

        <div class="d-flex justify-content-end">
        <div class="bg-primary p-4 m-2">PT1</div>
        <div class="bg-primary p-4 m-2">PT2</div>
    </div>    

Phần tử chứa - đẩy phần tử con theo hướng vuông góc align-items

Trong CSS flexbox, khi sư dụng thuộc tính align-items là nhằm đẩy các phần tử con theo hướng VUÔNG GÓC HƯỚNG CHÍNH

Sử dụng các class .align-items-{values} hoặc .align-items-{breakpoints}-{values} trong đó values là các giá trị stretch, center, baseline, around, between

Ví dụ hướng chính nằm ngang, thì align-items-center sẽ điều chỉnh phần tử con nằm giữa box theo phương đứng

        <div class="bg-warning d-flex align-items-center" 
        style="height: 100px">
        <div class="bg-primary p-2 m-2">PT1</div>
        <div class="bg-primary p-2 m-2">PT2</div>
    </div>    

align-items-center đẩy phần tử xuống đáy box theo phương đứng, thử kết hợp với justify-content-center thì nó đẩy thêm nằm giữa theo phương ngang

        <div class="bg-warning d-flex align-items-end justify-content-center"
         style="height: 100px">
        <div class="bg-primary p-2 m-2">PT1</div>
        <div class="bg-primary p-2 m-2">PT2</div>
    </div>    

Phần tử chứa - căn chỉnh chi có nhiều hàng (cột) align-content

Khi phần tử chứa có .flex-wrap, nếu các phần tử con bị chia ra thành nhiều hàng (hoặc cột) thì lúc này có thể sử dụng đến các thuộc tính .align-content-{values} hoặc .align-content-{breakpoint}-{values}

Với {values} là start, end, center, around, stretch

Tác động của các lớp này tương tự như ví dụ trong phần FlexBox

Phần tử con - trôi theo hướng vuông góc align-self

Đây là cách thiết lập cấp độ phần tử con, thiết lập hiệu lực riêng cho phần tử con cụ thể, nó thiết lập nó trôi về phía nào theo hướng vuông góc với chính.

Sử dụng class .align-self-{values} hoặc .align-self-{breakpoints}-{values}

Với values là: start, end, center, baseline, stretch

        <div class="bg-warning d-flex align-items-sm-start" style="height: 100px">
        <div class="bg-primary p-2 m-2 align-self-center">PT1</div>
        <div class="bg-primary p-2 m-2 align-self-end">PT2</div>
        <div class="bg-primary p-2 m-2 align-self-stretch">PT3</div>
        <div class="bg-primary p-2 m-2">PT4</div>
    </div>    

Phần tử con - Fill

Nếu các phần tử con trong .flex có lớp .flex-fill thì nó ép các phần tử con đó theo hướng chính kích thước sẽ bằng nhau

        <div class="d-flex ">
        <div class="bg-primary p-2 m-2 flex-fill ">PT1</div>
        <div class="bg-primary p-2 m-2 flex-fill ">PT2</div>
        <div class="bg-primary p-2 m-2 flex-fill ">PT3</div>
        <div class="bg-primary p-2 m-2 flex-fill ">PT4</div>
    
    </div>

Phần tử con - Grow

Phần tử con kích hoạt với lớp .flex-grow-1 thì kích thước theo hướng chính của nó sẽ mở rộng tối đa kích thước có thể có trong phần tử chữa

        <div class="d-flex">
        <div class="bg-primary p-2 m-2 flex-grow-1">PT1</div>
        <div class="bg-primary p-2 m-2">PT2</div>
        <div class="bg-primary p-2 m-2">PT3</div>
        <div class="bg-primary p-2 m-2">PT4</div>
    </div>

Phần tử con - đẩy phần tử bằng margin

Nếu phần tử chứa có hướng chính nằm ngang, thì phần tử con nào có .mr-auto thì sẽ đẩy các phần tử bên phải nó trôi về phải của phần tử chứa, nếu có .ml-auto thì nó đẩy các phần tử con bên trái nó trôi về bên trái phần tử chứa

Nếu phần tử chứa có hướng chính thẳng đứng (.flex-column) thì phần tử nào có .mb-auto thì nó sẽ đẩy các phần tử dưới nó về đáy của phần tử, nếu có .mt-auto sẽ đẩy phần tủ trên nó về phía trên phần tử chứa.

        <div class="d-flex">
        <div class="bg-primary p-2 m-2">PT1</div>
        <div class="bg-primary p-2 m-2 mr-auto">PT2</div>
        <div class="bg-primary p-2 m-2">PT3</div>
        <div class="bg-primary p-2 m-2">PT4</div>
    </div>

Phần tử con - đổi thứ tự hiện thị

FlexBox có thuộc tính order gán bằng một con số là thứ tự hiện thị phần tử. Đặc tính này cho phép đổi thứ tự hiện thị mà không cần thay code HTML. Mặc định thứ tự hiện thị theo vị trí code HTML cái nào viết code trước thì hiện thị trước, tuy nhiên Bootstrap cho phép điều chỉnh bằng các lớp order-0 đến order-12

        <div class="d-flex">
        <div class="bg-primary p-2 m-2 order-2">PT1</div>
        <div class="bg-primary p-2 m-2 order-3">PT2</div>
        <div class="bg-primary p-2 m-2 order-1">PT3</div>
    </div>