ใช้คุณสมบัติ align-content พร้อมค่า flex-end เพื่อจัด flex lines ชิดด้านท้ายของ cross axis ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: fle

ใช้คุณสมบัติ justify-content พร้อมค่า flex-end เพื่อจัดตำแหน่ง flex items ชิดด้านท้าย (end ของ main axis) ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {           &nbs

ใช้คุณสมบัติ align-items พร้อมค่า flex-start เพื่อจัดตำแหน่ง flex items ชิดด้านบน (start ของ cross axis) ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {            

ใช้คุณสมบัติ display เพื่อระบุประเภทของ box ที่ใช้สำหรับ HTML element ตัวอย่าง: Flex Container <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: flex; &n

คุณสมบัติ flex เป็น shorthand property รวม flex-grow, flex-shrink, และ flex-basis ใน property เดียว ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             dis

ใช้คุณสมบัติ align-content เพื่อจัดตำแหน่ง flex lines ตามแกน cross axis ตัวอย่าง: space-between <!DOCTYPE html> <html>     <head>       <style>          .mycontainer {             display: flex;

ใช้คุณสมบัติ flex-wrap พร้อมค่า nowrap เพื่อป้องกันไม่ให้ flex items wrapping (ค่าเริ่มต้น) ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display: fl

หากต้องการเพิ่มขอบสีให้ปุ่ม ให้ใช้คุณสมบัติ border ใน CSS ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .button {             background-color: yellow;       &nb

ใช้ CSS :hover selector เพื่อสร้างปุ่มที่มีเอฟเฟกต์เมื่อ hover ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .btn {             background-color: yellow;       &

ใช้คุณสมบัติ transition-duration เพื่อตั้งค่าความเร็วของ hover effect และใช้ :hover selector สำหรับ hover state ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .btn {            

ใช้คุณสมบัติ border ร่วมกับ float: left เพื่อสร้าง button group ที่มีขอบ ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .btn {             color: black;       &nb

ใช้คุณสมบัติ flex-wrap พร้อมค่า wrap เพื่อให้ flex items wrapping ไปบรรทัดใหม่เมื่อพื้นที่ไม่พอ ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .mycontainer {             display

ใช้คุณสมบัติ grid-row-gap เพื่อกำหนดช่องว่างระหว่างแถวใน CSS Grid ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .container {             display: grid;       &nb

ใช้ :active pseudo-class ร่วมกับ transform: translateY() และ box-shadow เพื่อสร้างเอฟเฟกต์กดปุ่ม ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .button {             background-

หากต้องการตั้งค่าความกว้างของปุ่ม ให้ใช้คุณสมบัติ width ใน CSS ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .btn {             background-color: yellow;       &

ใช้ opacity และ transition เพื่อสร้างเอฟเฟกต์ fade in เมื่อ hover ปุ่ม ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .btn {             background-color: orange;    

ใช้คุณสมบัติ filter เพื่อสร้างเอฟเฟกต์กรองภาพ เช่น blur, contrast, brightness ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          img {             height: auto;      

ใช้คุณสมบัติ transform ใน CSS เพื่อพลิกภาพ ตัวอย่างพลิกแนวนอนเมื่อ hover ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .myimg:hover {             transform: scaleX(-1);  

ใช้คุณสมบัติ object-fit ใน CSS เพื่อปรับขนาดรูปภาพหรือวิดีโอให้พอดีกับ container ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .myimg {             width:250px;     &

ใช้คุณสมบัติ object-fit ใน CSS เพื่อปรับขนาดรูปภาพหรือวิดีโอให้พอดีกับ container ตัวอย่าง <!DOCTYPE html> <html>    <head>       <style>          .myimg {             width:250px;     &