CSS Flexbox

CSS Flexible Box Layout Module

CSS Flexible Box Layout Module

ใน CSS 2.1 เราจะใช้สิ่งที่เรียกว่า “Layout Mode” ในการกำหนดขนาด และจัดตำแหน่งของกล่องต่างๆ ซึ่ง layout mode นี้จะประกอบไปด้วย

block      : ใช้จัดตำแหน่งเนื้อหาให้อยู่ในรูปแบบของ block

inline      : ใช้จัดตำแหน่งเนื้อหาให้อยู่ในรูปแบบของ text

table       : ใช้จัดตำแหน่งเนื้อหาให้อยู่ในรูปแบบตาราง

position  : ใช้จัดตำแหน่งของ elements ต่างๆ ได้อย่างอิสระมากขึ้น

ด้วยความซับซ้อนที่มากขึ้นของ web สมัยใหม่ การใช้ layout mode แบบเดิมๆ อาจทำให้เราเขียนโค้ดได้ไม่ค่อยสะดวกนัก CSS 3 จึงได้เพิ่ม layout mode แบบใหม่ ที่เรียกว่า “Flex Layout” เข้ามา โดย flex layout นี้เอง ที่จะช่วยให้กล่องต่างๆ มีความยืดหยุ่นมากขึ้น (Flexible Box หรือเรียกสั้นๆ ว่า Flexbox)

flex layout จะมีความคล้ายคลึงกับ block layout เพียงแต่ว่ามันจะใช้ property บางอย่าง เช่น float ไม่ได้ ในทางกลับกัน มันจะมี property ใหม่ๆ เพิ่มเข้ามาให้เราใช้งาน โดยความสามารถหลักๆ ของ flex layout มีดังนี้

Orientation : สามารถกำหนดแนวการเรียงของ flexbox ต่างๆ ได้ ไม่ว่าจะเป็น บนลงล่าง ล่างขึ้น  บน ซ้ายไปขวา ขวาไปซ้าย

Sizing             :  สามารถกำหนดขนาดของ flexbox ต่างๆ ให้พอดีกับพื้นที่ว่างที่เหลืออยู่ได้อย่างอัตโนมัติ

Ordering       : สามารถเลือกลำดับการแสดงผลของ flexbox ได้ ลำดับของ flexbox อาจแตกต่างกันไปในแต่ละขนาดของ                                viewport

Alignment    : สามารถกำหนด alignment ของ flexbox ต่างๆ ได้ ไม่ว่าจะเป็น ชิดซ้าย กึ่งกลางหรือชิดขวา ทั้งในแนวนอน                               และแนวตั้ง

Flex container : html element ที่กำหนด property “display” ให้มีค่าเป็น “flex” หรือ “inline-flex”

Flex item           : html elements ใดๆ ก็ตาม ที่เป็น child ของ flex container

ก่อนที่เราจะสามารถใช้ความสามารถต่างๆ flexbox ได้ เราจะต้องสร้าง “flex container” ขึ้นมาก่อน โดยปกติแล้ว เวลาเราจะใช้ layout mode กับ elements ไหน เราก็จะต้องใส่ property “display” เอาไว้ที่ elements นั้นๆ แต่การใช้ flexbox จะเปลี่ยนไปตรงที่ เราจะต้องกำหนด property “display” เอาไว้ที่ element ที่เป็น container แทน ลองดูตัวอย่างโค้ดต่อไปนี้

<div class="flex-container">
    <div>flex item 1</div>
    <div>flex item 2</div>
    <div>flex item 3</div>
</div>

.flex-container{
    display: flex;
}

USAGE

<div class="header">
    <p>Header</p>
</div>
<div class="flex-container">
    <div class="content">
        <p>Main Content</p>
    </div>
    <div class="sidebar primary">
        <p>Primary Sidebar</p>
    </div>
    <div class="sidebar secondary">
        <p>Secondary Sidebar</p>
    </div>
</div>
<div class="footer">
    <p>Footer</p>
</div>

EXAMPLE - Basic HTML

Create layout html (Viewport : 320px X 480px)

.flex-container{
    display: flex;
}

EXAMPLE - Basic CSS

Assign Style Sheet

.flex-container{
    display: flex;
    flex-direction: column; 
    /* ค่า default จะเป็น row */
}

EXAMPLE - Orientation

property “flex-direction: column”

@media screen and (min-width:800px){
    .flex-container{
        flex-direction: row;
    }
}

EXAMPLE - Orientation

property “flex-direction: row” (Viewport : 800px)

@media screen and (min-width:800px){
    .flex-container{
        flex-direction: row;
    }
    .content{
        flex-grow: 1;
    }
    .primary{
        flex-grow: 1;
    }
    .secondary{
        flex-grow: 1;
    }
}

EXAMPLE - Sizing

property “flex-grow: 1” (Viewport : width 800px)

@media screen and (min-width:800px){
    .flex-container{
        flex-direction: row;
    }
    .content{
        flex-grow: 1;
        order: 2;
    }
    .primary{
        flex-grow: 1;
        order: 1;
    }
    .secondary{
        flex-grow: 1;
        order: 3;
    }
}

EXAMPLE - Ordering

property “order: 1,2,3,...” (Viewport : width 800px)

EXAMPLE - Alignment

justify-content : กำหนดการจัดตำแหน่งของ flex items เมื่อเทียบกับทิศทางการไหลของ flexbox เช่น ชิดซ้าย กึ่งกลาง

                                ชิดขวา เป็นต้น

align-items        : กำหนดการจัดตำแหน่งของ flex items เมื่อเทียบกับทิศทางที่ตรงข้ามกับการไหลของ flexbox เช่น

                                บนสุด กึ่งกลาง ล่างสุด เป็นต้น

align-self             : คล้ายกับ align-items แต่จะสามารถกำหนดที่แต่ละ flex item ได้เลย

EXAMPLE - Alignment

<div class="header">
    <p>Header</p>
</div>
<div class="flex-container">
    <div class="box">
        <p>Box 1</p>
    </div>
    <div class="box">
        <p>Box 2</p>
    </div>
    <div class="box">
        <p>Box 3</p>
    </div>
</div>
<div class="footer">
    <p>Footer</p>
</div>

Create layout html & css

.flex-container{
    display: flex;
}

EXAMPLE - Alignment

property “justify-content:  flex-start | center | flex-end "

.flex-container{
    display: flex;
    justify-content: flex-start; /* flex-start | center | flex-end */
}

EXAMPLE - Alignment

property “align-item:  flex-start | center | flex-end "

.flex-container{
    display: flex;
    align-item: flex-start; /* flex-start | center | flex-end */
}

EXAMPLE - Alignment

property “align-self:  flex-start | center | flex-end "

.flex-container{ 
    display: flex;
    justify-content: center;
}
.box:nth-child(1){
    align-self: flex-start;
}
.box:nth-child(2){
    align-self: center;
}
.box:nth-child(3){
    align-self: flex-end;
}

Browser Support

.flex-container{
    display: -webkit-box;      /* 2009 - Chrome, Safari , iOS Safari */
    display: -moz-box;         /* 2009 - Firefox */
    display: -ms-flexbox;      /* early 2012 - IE 10 */
    display: -webkit-flex;     /* 2012 - Chrome */
    display: flex;             /* 2012 - Opera 12.1, Firefox 22+ */
}

Vendor Prefixes

Credit : http://caniuse.com/#feat=flexbox

Conclusion

specifications ของ flexbox ถูกเพิ่มเข้ามาก็เพื่อที่จะทำให้การสร้าง layouts ที่ซับซ้อนเป็นเรื่องที่ง่ายขึ้น การจะใช้ flexbox นั้นไม่ใช่เรื่องยาก แต่การทำให้ flexbox สามารถใช้ได้กับทุก web browsers นั้นเป็นเรื่องที่ยากกว่า เนื่องจาก web browsers ต่างๆ ยังรอบรับ spec คนละเวอร์ชั่นกัน

End

Credit : www.siamhtml.com