วิธีใช้ Flexbox เพื่อสร้างเลย์เอาต์การออกแบบการ์ด CSS ที่ทันสมัย

ต้องขอบคุณ Flexbox ซึ่งเป็นโหมดเลย์เอาต์ใหม่ใน CSS3 เราจึงนำการ์ดทั้งหมดมาเรียงเป็นแถวได้อย่างแท้จริง การออกแบบการ์ดได้รับความนิยมเพิ่มขึ้นในช่วงไม่กี่ปีที่ผ่านมา อย่างที่คุณอาจสังเกตเห็นว่าไซต์โซเชียลมีเดียมีการ์ดจริงๆ Pinterest และ Dribbble ใช้เลย์เอาต์การ์ดเพื่อแสดงข้อมูลและภาพ และถ้าคุณชอบดีไซน์ Material การ์ดของ Google จะได้รับการอธิบายไว้อย่างดีในไลบรารีรูปแบบ

โดยส่วนตัวแล้วฉันชอบเลย์เอาต์ของการ์ดเพราะอ่านง่ายและเลื่อนดูได้ พวกเขานำเสนอ "ชุดข้อมูล" ที่สมบูรณ์แบบในลักษณะที่ง่ายต่อการเรียกดู เลื่อน และสแกนทั้งหมดในคราวเดียว

วิธีสร้างเลย์เอาต์การ์ด

หากคุณเคยลองแถวของเนื้อหาที่มีความสูงเท่ากัน คุณจะรู้ว่าการสร้างเนื้อหานั้นไม่ใช่เรื่องง่ายเสมอไป คุณอาจจะต้องเล่นซอบ้างเพื่อให้มันใช้งานได้ในอดีต ต้องขอบคุณ Flexbox ที่ทำให้วันเหล่านั้นล้าหลังคุณมาก ทั้งนี้ขึ้นอยู่กับระดับของการสนับสนุนเบราว์เซอร์ที่คุณต้องการ คุณอาจต้องใส่ทางเลือกสำรอง แต่การรองรับเบราว์เซอร์สำหรับคุณลักษณะนี้ค่อนข้างน่าเชื่อถือในทุกวันนี้ เพื่อความปลอดภัย อย่าลืมตรวจสอบ Flexbox บน Can I use ที่เชื่อถือได้ และจำไว้ว่าคุณไม่ควรทำการเปลี่ยนแปลงบนเว็บไซต์จริงของคุณ ลองทดลองกับ Local แทน ซึ่งเป็นแอปพัฒนา WordPress ในพื้นที่ฟรี

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

Flexbox และความเก่งกาจ

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

วิธีสร้างเลย์เอาต์

เราจะสร้างเลย์เอาต์การ์ด Flexbox ที่มีคอนเทนเนอร์แนวนอนสี่แถวบนหน้าจอขนาดใหญ่ สองคอลัมน์ตรงกลาง และคอลัมน์เดียวสำหรับอุปกรณ์ขนาดเล็ก

ด้านล่างนี้คือข้อมูลโค้ดสำหรับสร้างเลย์เอาต์พื้นฐานสำหรับแสดงการ์ดสี่ใบ ฉันไม่ได้รวมเนื้อหาในการ์ดด้านใน (เนื่องจากตัวอย่างโค้ดยาวเกินไป) ดังนั้นอย่าลืมใส่เนื้อหาเริ่มต้นในนั้น (และมีจำนวนเนื้อหาแตกต่างกันระหว่างการ์ดทั้งสี่ใบ) นอกจากนี้ยังมีการ์ดหนึ่งแถวสี่ใบที่แสดงไว้ที่นี่เพื่อเริ่มต้น แต่คุณสามารถเพิ่มได้อีกหากคุณต้องการดูพฤติกรรมที่มีเนื้อหาหลายแถว รหัสทั้งหมดสามารถพบได้ใน Codepen

ในการแสดงการออกแบบเลย์เอาต์ของเราในรูปแบบตาราง เราจะต้องเริ่มต้นจากภายนอกและเข้าไปข้างใน สิ่งสำคัญคือต้องแน่ใจว่าคุณอ้างอิงคอนเทนเนอร์ที่ถูกต้อง มิฉะนั้น สิ่งต่างๆ จะเลอะเทอะเล็กน้อย

ส่วนที่มีคลาสของ .cards คือสิ่งที่เราจะกำหนดเป้าหมายก่อน คุณสมบัติการแสดงผลของคอนเทนเนอร์คือสิ่งที่เราต้องเปลี่ยนเป็น flex

นี่คือ HTML ที่คุณต้องการเริ่มต้นด้วย:

<div class="centered">

            <section class="cards">
                
                <article class="card">
                   <p>content for card one</p>
                </article><!-- /card-one -->

 	<article class="card">
                   <p>content for card two</p>
            </article><!-- /card-two -->

<article class="card">
                  <p>content for card three</p>
            </article><!-- /card-three -->

<article class="card">
                   <p>content for card four</p>
            </article><!-- /card-four -->

	</section>
</div>

นี่คือ CSS ที่จะเริ่มต้นด้วย:

.cards {
   display: flex;
   justify-content: space-between;
}

คุณสมบัติยืดหยุ่น

ก่อนที่จะเจาะลึกเกินไป คุณควรทราบพื้นฐานของคุณสมบัติ flex ก่อน คุณสมบัติ flex ระบุความยาวของรายการ โดยสัมพันธ์กับรายการแบบยืดหยุ่นที่เหลือภายในคอนเทนเนอร์เดียวกัน คุณสมบัติ flex เป็นชวเลขสำหรับคุณสมบัติ flex-grow , flex-shrink และคุณสมบัติ flex-basis ค่าเริ่มต้นคือ 0 1 auto; . ในความคิดของฉัน วิธีที่ดีที่สุดในการทำความเข้าใจ Flexbox อย่างถ่องแท้คือเล่นกับค่าต่างๆ และดูว่าเกิดอะไรขึ้น

คุณสมบัติ flex-grow ของรายการ flex ระบุจำนวนเนื้อที่ภายในคอนเทนเนอร์ flex ที่ไอเท็มควรใช้

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

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

เราเริ่มต้นด้วย display: flex; และ justify-content: space-between; และ ณ จุดนี้ สิ่งที่คาดเดาไม่ได้เล็กน้อย กำลังใช้ Flexbox อยู่ แม้ว่าจะยังไม่ชัดเจนในตอนนี้ ด้วยการประกาศนี้ ไอเท็ม flex แต่ละรายการจะถูกวางเรียงต่อกันในแถวแนวนอน

ดูสิ่งนี้ใน Codepen

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

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

โดยค่าเริ่มต้น รายการแบบยืดหยุ่นทั้งหมดจะพยายามใส่ให้พอดีกับบรรทัดเดียว การเพิ่ม flex-wrap: wrap; ทำให้รายการถูกห่อไว้ข้างใต้กันเนื่องจากค่าเริ่มต้นคือความกว้างเต็ม

ดูสิ่งนี้ใน Codepen

ความกว้างเต็มความกว้างนั้นยอดเยี่ยมสำหรับอุปกรณ์ขนาดเล็ก ดังนั้น พึงระลึกไว้เสมอว่าในขณะที่เราวางแผนสำหรับหน้าจอที่ใหญ่ขึ้นก่อนที่จะจัดการกับจุดพักต่างๆ เมื่อเราเปลี่ยนความกว้าง การ์ดจะเริ่มดูสม่ำเสมอยิ่งขึ้น

เราจำเป็นต้องเพิ่มคลาส .card ในตอนนี้เพื่อจัดรูปแบบการ์ดแต่ละใบของเรา นี้สามารถไปขวาภายใต้รูปแบบ . .cards

.cards {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}

.card {
	flex: 0 1 24%;
}

จำไว้ก่อนหน้านี้ คุณสมบัติ flex เป็นชวเลข: flex-grow คือ 0, flex-shrink คือ 1 และ width คือ 24% การเพิ่มความกว้างที่ระบุจะทำให้เรามีแถวสี่แถวที่มีช่องว่างระหว่างกัน

ดูสิ่งนี้ใน Codepen

เราตั้งค่าคุณสมบัติ justify-content เพื่อวัตถุประสงค์ในการเว้นวรรค รายการแรกแสดงซ้ายสุด รายการที่สองและสามแสดงตรงกลาง และรายการที่สี่แสดงยากขวา เนื่องจากความกว้างของการ์ดเท่ากับ 24% จึงมีพื้นที่เหลืออยู่เนื่องจากคอลัมน์สี่คอลัมน์ของเราที่ 24% ไม่รวม 100% เราเหลืออีก 4% ที่แน่นอน 4% นี้วางเท่ากันระหว่างแต่ละรายการ ดังนั้นเราจึงมีช่องว่างระหว่างการ์ดประมาณ 1.33%

ดูสิ่งนี้ใน Codepen

เราสามารถแม่นยำยิ่งขึ้นด้วยการใช้ calc การเปลี่ยนค่า flex-basis เพื่อใช้ calc จะมีลักษณะดังนี้:

.card {
	flex: 0 1 calc(25% - 1em);
}

สิ่งที่ยอดเยี่ยมของสิ่งนี้คือเบราว์เซอร์จะคว้าพื้นที่ 25% และลบ 1em ออกจากมัน ซึ่งทำให้การ์ดมีขนาดเล็กลงเล็กน้อย

เป็นวิธีที่เนียนในการปรับพื้นที่ว่าง 1em ถูกแจกจ่ายอย่างเท่าเทียมกันระหว่างไอเท็ม และเราจบลงด้วยเลย์เอาต์ที่สมบูรณ์แบบ

จนถึงตอนนี้ เราไม่ได้พูดถึงความสูงมากนัก ฉันได้เพิ่มการ์ดอีกแถวหนึ่งเพื่อแสดงให้เห็นว่าความสูงทำงานอย่างไร ขึ้นอยู่กับการ์ดใบไหนที่มีเนื้อหามากที่สุด – ส่วนสูงของการ์ดอื่นจะตามมา ดังนั้นเนื้อหาทุกแถวจะมีความสูงเท่ากัน

นี่เป็นมุมมองที่ "ซูมออก" มาก แต่คุณจะสังเกตได้ว่าแถวแรกค่อนข้างสูงเพราะการ์ดใบที่สองมีข้อความมากกว่าแถวอื่นในแถวนั้น แถวที่สองมีข้อความน้อยกว่า โดยรวมจึงสั้นกว่า

การ์ดสำหรับอุปกรณ์ขนาดเล็ก

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

ในการเริ่มต้นแก้ไขปัญหา จุดสั่งหยุดที่ระบุจะตรวจสอบให้แน่ใจว่าเนื้อหาแสดงอย่างถูกต้องในหน้าจอประเภทต่างๆ ทั้งหมด

ต่อไปนี้คือเบรกพอยต์ที่จะใช้ (โปรดใช้แนวคิดของคุณเองได้ตามสบาย แนวคิดยังคงมีผลบังคับใช้):

@media screen and (min-width: 40em) {
    .cards {
   }

    .card {
    }
}

@media screen and (min-width: 60em) {
    .cards {
   }
    
    .card {
     }
}


@media screen and (min-width: 52em) {
    .centered {
       
    }
}

เป็นความคิดที่ยิ่งใหญ่จนถึงตอนนี้ มาเริ่มกันที่ Mindset สำหรับมือถือก่อน แล้วเริ่มด้วยจุดพัก min-width: 40em

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

ด้วยการเปลี่ยนแปลงเหล่านี้ การ์ดจะแสดงที่ความกว้างเต็มหน้าจอและเรียงซ้อนกันด้านล่างหน้าจอที่เล็กกว่าความกว้างประมาณ 640px หากคุณขยายหน้าต่างเบราว์เซอร์เป็นอย่างอื่นที่สูงกว่านั้น คอลัมน์ที่สี่จะกลับคืนมา นี้เหมาะสมเพราะมี min-width 40em และนี่คือที่ที่เราได้สร้างแถวของไพ่สี่ใบ

สิ่งที่ขาดหายไปนี่คือพื้นกลาง สำหรับช่วงกลาง การมีไพ่สองใบในแถวนั้นอ่านง่ายกว่า มากกว่าที่จะอ่านไพ่สี่ใบ ก่อนที่เราจะหาแถวของการ์ดสองใบ ต้องเพิ่มคิวรีสื่ออื่นเพื่อรองรับหน้าจอที่ใหญ่ที่สุด ซึ่งจะมีแถวของการ์ดสี่ใบ

@media screen and (min-width: 60em) {
    .card {
        flex: 0 1 calc(25% - 1em);
    }
}

แบบสอบถามสื่อใหม่ที่มี min-width 60em คือตำแหน่งที่จะประกาศไพ่สี่ใบ min-width 40em คือตำแหน่งที่จะประกาศแถวของไพ่สองใบ ความมหัศจรรย์กำลังเกิดขึ้นด้วยค่า flex calc ที่ 50% – 1em

@media screen and (min-width: 40em) {
    .cards {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }

    .card {
        flex: 0 1 calc(50% - 1em);
    }
}

ด้วยการเปลี่ยนแปลงง่ายๆ นั้น สิ่งต่างๆ ก็เริ่มได้ผล! ย่อและขยายหน้าต่างเบราว์เซอร์เพื่อให้แน่ใจว่าทุกอย่างถูกต้อง

ดูสิ่งนี้ใน Codepen

หากแถวของไพ่ของคุณถูกต้อง คุณก็พร้อมแล้ว! หากคุณกำลังลองใช้บทช่วยสอนนี้และมีแถวสุดท้ายที่ไม่เท่ากัน ให้อ่านต่อ

เนื้อหาไดนามิกและระยะห่างแถวสุดท้ายของการ์ด

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

เพื่อให้ได้รูปลักษณ์นี้ ต้องใช้วิธีคิดที่ต่างออกไป ฉันขอยืนยันว่าสิ่งนี้ไม่มีประสิทธิภาพ แต่ค่อนข้างง่าย

การจัดรูปแบบ . .cards และ .card ทำได้นอกเหนือจากแบบสอบถามสื่อ:

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

.card {
    flex: 1 0 500px;
    box-sizing: border-box;
    margin: 1rem .25em;
}

แบบสอบถามสื่อเป็นที่ซึ่งกำหนดจำนวนการ์ด:

@media screen and (min-width: 40em) {
    .card {
       max-width: calc(50% -  1em);
    }
}

@media screen and (min-width: 60em) {
    .card {
        max-width: calc(25% - 1em);
    }
}

ดู Codepen เพื่อดูโซลูชันที่แก้ไข

หวังว่านี่จะทำให้คุณเห็นภาพรวมพื้นฐานของแนวคิด Flexbox ที่จะช่วยให้คุณเริ่มต้นได้ Flexbox รองรับเบราว์เซอร์ได้ค่อนข้างดี และเลย์เอาต์การ์ดจะยังคงใช้ในการออกแบบเว็บไซต์ต่อไป และโปรดจำไว้ว่า เลย์เอาต์การ์ดเป็นเพียงจุดเริ่มต้นของวิธีใช้ Flexbox

ถัดไป: ออกแบบเว็บไซต์ WordPress ให้เร็วขึ้น

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

ดาวน์โหลดคู่มือฟรี ที่นี่!

คุณสร้างอะไรอีกบ้างโดยใช้ Flexbox แบ่งปันโครงการของคุณในความคิดเห็น!