Articles
แนะนำ CSS
คุณสมบัติ CSS ที่เกี่ยวข้องกับ Flexbox

คุณสมบัติ CSS ที่เกี่ยวข้องกับ Flexbox

บทความนี้อธิบายคุณสมบัติ CSS ที่เกี่ยวข้องกับ Flexbox

คุณสามารถเรียนรู้วิธีการใช้ Flexbox และ Inline Flexbox

YouTube Video

HTML สำหรับการแสดงตัวอย่าง

css-flex.html 
  1<!DOCTYPE html>
  2<html lang="en">
  3<head>
  4    <meta charset="UTF-8">
  5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6    <title>CSS Properties Example</title>
  7    <link rel="stylesheet" href="css-base.css">
  8    <link rel="stylesheet" href="css-flex.css">
  9</head>
 10<body>
 11    <!-- Header -->
 12    <header>
 13        <h1>CSS Properties For Layout</h1>
 14    </header>
 15
 16    <!-- Main content -->
 17    <main>
 18        <header>
 19            <h2>Layout Related Properties</h2>
 20        </header>
 21        <article>
 22            <h3>flex</h3>
 23            <section>
 24            <header><h4>CSS</h4></header>
 25<pre class="sample">
 26.flex-container {
 27    display: flex;
 28    justify-content: space-between;
 29    align-items: center;
 30    background-color: lightblue;
 31    height: 100px;
 32}
 33
 34.flex-item {
 35    background-color: lightskyblue;
 36    padding: 10px;
 37    margin: 5px;
 38    width: 70px;
 39    height: auto;
 40}
 41</pre>
 42            <header><h4>HTML</h4></header>
 43<pre>
 44&lt;div class="flex-container"&gt;
 45    &lt;div class="flex-item"&gt;1&lt;/div&gt;
 46    &lt;div class="flex-item"&gt;2&lt;/div&gt;
 47    &lt;div class="flex-item"&gt;3&lt;/div&gt;
 48&lt;/div&gt;
 49</pre>
 50            <header><h4>HTML+CSS</h4></header>
 51            <section class="sample-view">
 52                <div class="flex-container">
 53                    <div class="flex-item">Item 1</div>
 54                    <div class="flex-item">Item 2</div>
 55                    <div class="flex-item">Item 3</div>
 56                </div>
 57            </section>
 58          </section>
 59        </article>
 60        <article>
 61          <h3>flex-direction</h3>
 62          <section>
 63            <header><h4>flex-direction: row</h4></header>
 64            <section class="sample-view">
 65                <div class="flex-container" style="flex-direction: row;">
 66                    <div class="flex-item">Item 1</div>
 67                    <div class="flex-item">Item 2</div>
 68                    <div class="flex-item">Item 3</div>
 69                </div>
 70            </section>
 71            <header><h4>flex-direction: row-reverse</h4></header>
 72            <section class="sample-view">
 73                <div class="flex-container" style="flex-direction: row-reverse;">
 74                    <div class="flex-item">Item 1</div>
 75                    <div class="flex-item">Item 2</div>
 76                    <div class="flex-item">Item 3</div>
 77                </div>
 78            </section>
 79            <header><h4>flex-direction: column</h4></header>
 80            <section class="sample-view">
 81                <div class="flex-container" style="flex-direction: column; height: 200px;">
 82                    <div class="flex-item">Item 1</div>
 83                    <div class="flex-item">Item 2</div>
 84                    <div class="flex-item">Item 3</div>
 85                </div>
 86            </section>
 87            <header><h4>flex-direction: column-reverse</h4></header>
 88            <section class="sample-view">
 89                <div class="flex-container" style="flex-direction: column-reverse; height: 200px;">
 90                    <div class="flex-item">Item 1</div>
 91                    <div class="flex-item">Item 2</div>
 92                    <div class="flex-item">Item 3</div>
 93                </div>
 94            </section>
 95          </section>
 96        </article>
 97        <article>
 98          <h3>justify-content</h3>
 99          <section>
100            <header><h4>justify-content: flex-start</h4></header>
101            <section class="sample-view">
102                <div class="flex-container" style="justify-content: flex-start;">
103                    <div class="flex-item">Item 1</div>
104                    <div class="flex-item">Item 2</div>
105                    <div class="flex-item">Item 3</div>
106                </div>
107            </section>
108            <header><h4>justify-content: flex-end</h4></header>
109            <section class="sample-view">
110                <div class="flex-container" style="justify-content: flex-end;">
111                    <div class="flex-item">Item 1</div>
112                    <div class="flex-item">Item 2</div>
113                    <div class="flex-item">Item 3</div>
114                </div>
115            </section>
116            <header><h4>justify-content: center</h4></header>
117            <section class="sample-view">
118                <div class="flex-container" style="justify-content: center;">
119                    <div class="flex-item">Item 1</div>
120                    <div class="flex-item">Item 2</div>
121                    <div class="flex-item">Item 3</div>
122                </div>
123            </section>
124            <header><h4>justify-content: space-between</h4></header>
125            <section class="sample-view">
126                <div class="flex-container" style="justify-content: space-between;">
127                    <div class="flex-item">Item 1</div>
128                    <div class="flex-item">Item 2</div>
129                    <div class="flex-item">Item 3</div>
130                </div>
131            </section>
132            <header><h4>justify-content: space-around</h4></header>
133            <section class="sample-view">
134                <div class="flex-container" style="justify-content: space-around;">
135                    <div class="flex-item">Item 1</div>
136                    <div class="flex-item">Item 2</div>
137                    <div class="flex-item">Item 3</div>
138                </div>
139            </section>
140          </section>
141        </article>
142        <article>
143          <h3>align-items</h3>
144          <section>
145            <header><h4>align-items: flex-start</h4></header>
146            <section class="sample-view">
147                <div class="flex-container" style="align-items: flex-start; height: 150px;">
148                    <div class="flex-item">Item 1</div>
149                    <div class="flex-item">Item 2</div>
150                    <div class="flex-item">Item 3</div>
151                </div>
152            </section>
153            <header><h4>align-items: center</h4></header>
154            <section class="sample-view">
155                <div class="flex-container" style="align-items: center; height: 150px;">
156                    <div class="flex-item">Item 1</div>
157                    <div class="flex-item">Item 2</div>
158                    <div class="flex-item">Item 3</div>
159                </div>
160            </section>
161            <header><h4>align-items: flex-end</h4></header>
162            <section class="sample-view">
163                <div class="flex-container" style="align-items: flex-end; height: 150px;">
164                    <div class="flex-item">Item 1</div>
165                    <div class="flex-item">Item 2</div>
166                    <div class="flex-item">Item 3</div>
167                </div>
168            </section>
169            <header><h4>align-items: stretch</h4></header>
170            <section class="sample-view">
171                <div class="flex-container" style="align-items: stretch; height: 150px;">
172                    <div class="flex-item">Item 1</div>
173                    <div class="flex-item">Item 2</div>
174                    <div class="flex-item">Item 3</div>
175                </div>
176            </section>
177            <header><h4>align-items: baseline</h4></header>
178            <section class="sample-view">
179                <div class="flex-container" style="align-items: baseline; height: 150px;">
180                    <div class="flex-item">Item 1</div>
181                    <div class="flex-item">Item 2</div>
182                    <div class="flex-item">Item 3</div>
183                </div>
184            </section>
185          </section>
186        </article>
187        <article>
188          <h3>flex-wrap</h3>
189          <section>
190            <header><h4>flex-wrap: nowrap</h4></header>
191            <section class="sample-view">
192                <div class="flex-container" style="flex-wrap: nowrap;">
193                    <div class="flex-item">Item 1</div>
194                    <div class="flex-item">Item 2</div>
195                    <div class="flex-item">Item 3</div>
196                    <div class="flex-item">Item 4</div>
197                    <div class="flex-item">Item 5</div>
198                    <div class="flex-item">Item 6</div>
199                    <div class="flex-item">Item 7</div>
200                    <div class="flex-item">Item 8</div>
201                    <div class="flex-item">Item 9</div>
202                </div>
203            </section>
204            <header><h4>flex-direction: wrap</h4></header>
205            <section class="sample-view">
206                <div class="flex-container" style="flex-wrap: wrap; height: 300px;">
207                    <div class="flex-item">Item 1</div>
208                    <div class="flex-item">Item 2</div>
209                    <div class="flex-item">Item 3</div>
210                    <div class="flex-item">Item 4</div>
211                    <div class="flex-item">Item 5</div>
212                    <div class="flex-item">Item 6</div>
213                    <div class="flex-item">Item 7</div>
214                    <div class="flex-item">Item 8</div>
215                    <div class="flex-item">Item 9</div>
216                </div>
217            </section>
218            <header><h4>flex-direction: wrap-reverse</h4></header>
219            <section class="sample-view">
220                <div class="flex-container" style="flex-wrap: wrap-reverse; height: 300px;">
221                    <div class="flex-item">Item 1</div>
222                    <div class="flex-item">Item 2</div>
223                    <div class="flex-item">Item 3</div>
224                    <div class="flex-item">Item 4</div>
225                    <div class="flex-item">Item 5</div>
226                    <div class="flex-item">Item 6</div>
227                    <div class="flex-item">Item 7</div>
228                    <div class="flex-item">Item 8</div>
229                    <div class="flex-item">Item 9</div>
230                </div>
231            </section>
232          </section>
233        </article>
234        <article>
235          <h3>flex-grow</h3>
236          <section>
237            <header><h4>CSS</h4></header>
238<pre class="sample">
239.item1 {
240  flex-grow: 1;
241}
242
243.item2 {
244  flex-grow: 2;
245}
246
247.item3 {
248  flex-grow: 0;
249}</pre>
250            <header><h4>HTML+CSS</h4></header>
251            <section class="sample-view">
252                <div class="flex-container">
253                    <div class="flex-item" style="flex-grow: 1;">Item 1</div>
254                    <div class="flex-item" style="flex-grow: 2;">Item 2</div>
255                    <div class="flex-item" style="flex-grow: 0;">Item 3</div>
256                </div>
257            </section>
258          </section>
259        </article>
260        <article>
261          <h3>flex-shrink</h3>
262          <section>
263            <header><h4>CSS</h4></header>
264<pre class="sample">
265.item1 {
266  flex-shrink: 0;
267}
268.item2 {
269  flex-shrink: 1;
270}
271.item3 {
272  flex-shrink: 1;
273}</pre>
274            <header><h4>HTML+CSS</h4></header>
275            <section class="sample-view">
276                <div class="flex-container" style="width: 200px;">
277                    <div class="flex-item" style="flex-shrink: 0;">Item 1</div>
278                    <div class="flex-item" style="flex-shrink: 1;">Item 2</div>
279                    <div class="flex-item" style="flex-shrink: 1;">Item 3</div>
280                </div>
281            </section>
282          </section>
283        </article>
284        <article>
285          <h3>flex-basis</h3>
286          <section>
287            <header><h4>CSS</h4></header>
288<pre class="sample">
289.item1 {
290  flex-basis: 100px;
291}
292.item2 {
293  flex-basis: 200px;
294}
295.item3 {
296  flex-basis: 25%;
297}</pre>
298            <header><h4>HTML+CSS</h4></header>
299            <section class="sample-view">
300                <div class="flex-container">
301                    <div class="flex-item" style="flex-basis: 100px;">Item 1</div>
302                    <div class="flex-item" style="flex-basis: 200px;">Item 2</div>
303                    <div class="flex-item" style="flex-basis: 25%;">Item 3</div>
304                </div>
305            </section>
306          </section>
307        </article>
308        <article>
309          <h3>align-self</h3>
310          <section>
311            <header><h4>CSS</h4></header>
312<pre class="sample">
313.item1 {
314  align-self: flex-start;
315}
316.item2 {
317  align-self: center;
318}
319.item3 {
320  align-self: flex-end;
321}</pre>
322            <header><h4>HTML+CSS</h4></header>
323            <section class="sample-view">
324                <div class="flex-container" style="height: 150px;">
325                    <div class="flex-item" style="align-self: flex-start;">Item 1</div>
326                    <div class="flex-item" style="align-self: center;">Item 2</div>
327                    <div class="flex-item" style="align-self: flex-end;">Item 3</div>
328                </div>
329            </section>
330          </section>
331        </article>
332        <article>
333          <h3>order</h3>
334          <section>
335            <header><h4>CSS</h4></header>
336<pre class="sample">
337.item1 {
338  order: 3;
339}
340
341.item2 {
342  order: 1;
343}
344
345.item3 {
346  order: 2;
347}</pre>
348            <header><h4>HTML+CSS</h4></header>
349            <section class="sample-view">
350                <div class="flex-container">
351                    <div class="flex-item" style="order: 3;">Item 1</div>
352                    <div class="flex-item" style="order: 1;">Item 2</div>
353                    <div class="flex-item" style="order: 2;">Item 3</div>
354                </div>
355            </section>
356          </section>
357        </article>
358        <article>
359            <h3>inline-flex</h3>
360            <section>
361                <header><h4>display: inline-flex</h4></header>
362                <section class="sample-view">
363                  Here is an example of inline-flex:
364                  <div class="inline-container">
365                      <div class="inline-item">1</div>
366                      <div class="inline-item">2</div>
367                      <div class="inline-item">3</div>
368                  </div>
369                  This text is in the same line as the inline-flex container.
370                </section>
371            </section>
372        </article>
373    </main>
374</body>
375</html>

Flexbox และ Inline Flexbox

flex 

 1.flex-container {
 2    display: flex;
 3    justify-content: space-between;
 4    align-items: center;
 5    height: 100px;
 6}
 7
 8.flex-item {
 9    background-color: lightskyblue;
10    padding: 10px;
11    margin: 5px;
12    width: 70px;
13    height: auto;
14}

flex เป็นคุณสมบัติใน CSS ที่ใช้จัดตำแหน่งและเรียงลำดับองค์ประกอบอย่างมีประสิทธิภาพ และเป็นส่วนหนึ่งของระบบเลย์เอาต์ Flexbox ระบบนี้ออกแบบมาเพื่อการจัดตำแหน่งและกระจายองค์ประกอบลูก (flex items) ในคอนเทนเนอร์ได้ง่ายขึ้น และยืดหยุ่นกว่าการใช้ float หรือ position แบบดั้งเดิม

  • คลาส flex-box กำหนดคุณสมบัติ display เป็น flex เพื่อใช้เลย์เอาต์ Flexbox
  • คุณสมบัติ justify-content ที่ตั้งค่าเป็น space-between จะจัดตำแหน่งองค์ประกอบให้สุดขอบซ้ายและขวา พร้อมกระจายพื้นที่ว่างระหว่างกันอย่างเท่าเทียม
  • คุณสมบัติ align-items ที่ตั้งค่าเป็น center จะจัดกึ่งกลางองค์ประกอบในแนวตั้ง

โครงสร้างพื้นฐานของ Flexbox 

 1<div class="flex-container">
 2  <div class="flex-item">Item 1</div>
 3  <div class="flex-item">Item 2</div>
 4  <div class="flex-item">Item 3</div>
 5</div>
 6
 7<style>
 8.flex-container {
 9  display: flex;
10  /* Other flex properties */
11  flex-direction: row | row-reverse | column | column-reverse;
12  justify-content: flex-start | flex-end | center | space-between | space-around;
13  align-items: stretch | flex-start | flex-end | center | baseline;
14  flex-wrap: nowrap | wrap | wrap-reverse;
15}
16.flex-item {
17  /* Styles applied to individual items */
18  flex-grow: 0 | 1 | 2 | ...;
19  flex-shrink: 0 | 1;
20  flex-basis: auto | 10px | 25% | ...;
21  align-self: stretch | flex-start | flex-end | center | baseline;
22  order: 0 | 1 | 2 | ... | -1 | -2 | ...;
23}
24</style>

Flexbox มีองค์ประกอบหลักสองส่วนคือ: คอนเทนเนอร์แบบยืดหยุ่น (flex container) และไอเทมแบบยืดหยุ่น (flex items)

  1. คอนเทนเนอร์แบบยืดหยุ่น (flex container) เป็นองค์ประกอบแม่ที่ครอบองค์ประกอบลูก ซึ่งกำหนดโดยใช้ display: flex
  2. ไอเทมแบบยืดหยุ่น (flex items) คือลูกที่อยู่ภายในคอนเทนเนอร์แบบยืดหยุ่น หมายถึงลูกโดยตรงของคอนเทนเนอร์
คุณสมบัติของ Flex Container

คุณสมบัติดังต่อไปนี้เกี่ยวข้องกับ Flex Container

  • กำหนด flex ในคุณสมบัติ display เพื่อสร้าง Flex Container องค์ประกอบลูกภายในจะกลายเป็น Flex Items

  • คุณสมบัติ flex-direction ใช้กำหนดทิศทางการจัดวางของ Flex Items สามารถกำหนดค่าได้ดังต่อไปนี้:

    • row: จัดเรียงในแนวนอนจากซ้ายไปขวา นี่คือค่าตั้งต้น
    • row-reverse: จัดแนวนอนจากขวาไปซ้าย
    • column: จัดแนวตั้งจากบนลงล่าง
    • column-reverse: จัดแนวตั้งจากล่างขึ้นบน

  • คุณสมบัติ justify-content กำหนดว่ารายการ flex ควรจัดแนวนอน (บนแกนหลัก) อย่างไร

    • flex-start: จัดชิดจุดเริ่มต้น (ซ้าย)
    • flex-end: จัดชิดจุดสิ้นสุด (ขวา)
    • center: จัดให้อยู่ตรงกลาง
    • space-between: แบ่งพื้นที่ระหว่างรายการอย่างสม่ำเสมอ
    • space-around: แบ่งพื้นที่รอบๆ รายการอย่างสม่ำเสมอ

  • คุณสมบัติ align-items กำหนดว่ารายการควรจัดในแนวตั้ง (บนแกนขวาง) อย่างไร

    • flex-start: จัดชิดด้านบน
    • center: จัดให้ตรงกลางในแนวตั้ง
    • flex-end: จัดชิดด้านล่าง
    • stretch: ขยายเพื่อเติมความสูงของคอนเทนเนอร์
    • baseline: จัดชิดเส้นฐานของข้อความ

  • คุณสมบัติ flex-wrap กำหนดว่ารายการควรเลื่อนบรรทัดใหม่หรือไม่หากเกินความกว้างของคอนเทนเนอร์

    • nowrap: ไม่เลื่อนบรรทัดใหม่ นี่คือค่าตั้งต้น
    • wrap: เลื่อนบรรทัดใหม่
    • wrap-reverse: เลื่อนบรรทัดใหม่แบบย้อนกลับ
คุณสมบัติของรายการ Flex

คุณสมบัติดังต่อไปนี้เกี่ยวข้องกับรายการ flex

  • คุณสมบัติ flex-grow กำหนดอัตราการขยายตัวของรายการ ค่าที่มากขึ้นจะทำให้รายการครอบครองพื้นที่มากขึ้นเมื่อเทียบกับรายการอื่น

    • หากเป็น 0 รายการดังกล่าวจะไม่ขยายตัว นี่คือค่าตั้งต้น
    • หากเป็น 1 หรือมากกว่า อัตราการขยายตัวจะถูกกำหนด

  • คุณสมบัติ flex-shrink ใช้กำหนดอัตราการย่อขนาดของไอเทม ค่าในคุณสมบัตินี้ยิ่งมาก ไอเทมจะย่อขนาดลงมากยิ่งขึ้น

    • ถ้าค่าคือ 1 ไอเทมจะย่อขนาดลงเมื่อพื้นที่ไม่เพียงพอ นี่คือค่าตั้งต้น
    • ถ้าค่าคือ 0 ไอเทมจะไม่ย่อขนาด

  • คุณสมบัติ flex-basis ใช้กำหนดความกว้างหรือความสูงเริ่มต้นของไอเทมแต่ละตัว โดยปกติจะใช้กับขนาดในแกนหลัก ค่าเริ่มต้นคือ auto ซึ่งขึ้นอยู่กับขนาดของเนื้อหา แต่คุณสามารถกำหนดค่าเป็นค่าคงที่ในพิกเซลหรือเปอร์เซ็นต์ได้

  • คุณสมบัติ align-self ใช้กำหนดวิธีการจัดตำแหน่งไอเทม flex แต่ละชิ้นในแกนตั้งฉาก คุณสมบัตินี้สามารถเขียนทับค่าที่กำหนดโดย align-items ได้

  • คุณสมบัติ order ใช้เปลี่ยนลำดับการแสดงผลของไอเทม flex ค่าเริ่มต้นคือ 0 แต่ถ้ากำหนดเป็นค่าบวก ไอเทมจะย้ายไปทีหลัง และถ้ากำหนดเป็นค่าลบ ไอเทมจะย้ายไปก่อนหน้า

ข้อดีของ Flexbox

ข้อดีของ flexbox มีดังนี้:

  • การจัดเลย์เอาต์อย่างยืดหยุ่น: คุณสามารถควบคุมการจัดตำแหน่ง ระยะห่าง และทิศทางขององค์ประกอบได้ตามต้องการ
  • เหมาะสำหรับการออกแบบที่ตอบสนอง: องค์ประกอบลูกจะปรับโดยอัตโนมัติตามขนาดขององค์ประกอบแม่

inline-flex 

 1.inline-container {
 2    display: inline-flex;
 3    border: 2px solid #000;
 4    padding: 10px;
 5    justify-content: space-between;
 6    background-color: lightblue;
 7    width: 150px;
 8    height: 50px;
 9}
10.inline-item {
11    background-color: lightskyblue;
12    padding: 10px;
13    margin: 5px;
14    width: 20px;
15    height: auto;
16}

  • inline-flex เป็นรูปแบบเลย์เอาต์ใน CSS ที่ช่วยให้คุณจัดเนื้อหาโดยใช้ flexbox พร้อมกับจัดองค์ประกอบตามการไหลในบรรทัด มันทำงานคล้ายกับ display: flex แต่ inline-flex ทำให้องค์ประกอบนั้นทำงานเป็นองค์ประกอบแบบอินไลน์

  • ในตัวอย่างนี้ inline-flex ถูกใช้งานกับคลาส container ดังนั้น คลาส container จะทำงานเป็นองค์ประกอบระดับอินไลน์ภายใน <div> ของแม่ ในขณะเดียวกัน องค์ประกอบของคลาส item ซึ่งเป็นองค์ประกอบลูกในคลาส container จะถูกจัดเรียงตามกฎของ flexbox ในตัวอย่างนี้ ใช้ justify-content: space-between ดังนั้นพื้นที่จะถูกจัดสรรให้เท่ากันระหว่างองค์ประกอบลูก

กรณีการใช้งาน inline-flex

inline-flex มีประโยชน์อย่างยิ่งในกรณีต่อไปนี้:

  • เมื่อคุณต้องการใช้การจัดวางแบบ flex กับองค์ประกอบแบบ inline มันจะมีประโยชน์เมื่อคุณต้องการใช้ flexbox สำหรับการจัดตำแหน่งในองค์ประกอบ UI ขนาดเล็ก เช่น ปุ่มหรือไอคอน ตัวอย่างเช่น เมื่อคุณต้องการจัดไอคอนและข้อความให้อยู่ข้างกันและจัดให้อยู่ตรงกลาง

  • เมื่อสร้างโครงร่างที่ซับซ้อนในขณะเดียวกันยังคงรูปแบบการไหลแบบ inline มันถูกใช้เมื่อคุณต้องการใช้ความสามารถของ flexbox เพื่อให้เลย์เอาต์ภายในมีความยืดหยุ่น ในขณะเดียวกันทำให้มันทำงานเหมือนองค์ประกอบแบบ inline ตัวอย่างเช่น เมื่อคุณต้องการจัดเรียงองค์ประกอบหลายๆ อันในแถวเดียวกันและปรับองค์ประกอบย่อยภายใน

คุณสามารถติดตามบทความข้างต้นโดยใช้ Visual Studio Code บนช่อง YouTube ของเรา กรุณาตรวจสอบช่อง YouTube ด้วย

YouTube Video

คุณสมบัติ CSS ที่เกี่ยวข้องกับเลย์เอาต์