/* ------------- SOMMAIRE ------------- */ /* @AUTHOR : Nicolas BOUDOT PROPRIÉTÉ : DISPLAY FLEX Styles liés à la propriété display: flex; */ /* 01 - XS Display Flex-wrap Flex-direction Justify-content Align-items Flex Flex-grow Flex-shrink Flex-basis Gap Row Column Order 02 - SM 03 - MD 04 - LG Display Flex-wrap Flex-direction Justify-content Align-items Flex Flex-grow Flex-shrink Flex-basis Gap Row Column Order 05 - XL */ /* @infos : La dernière déclaration d'une suite de déclarations (ex: d-flex {}), est celle de Bootstrap V5 afin de ne pas perdre les traces de nommage de celui-ci. Les autres sont des raccourcis */ /* ----------------- 01 - XS Display ----------------- */ .df, .d-flex { display: flex; } /* ----------------- 01 - XS Flex-wrap ----------------- */ .fww, .fw-wrap, .flex-wrap { flex-wrap: wrap; } /* ----------------- 01 - XS Flex-direction ----------------- */ .fdr, .fd-row, .flex-row { flex-direction: row; } .fdrr, .fd-row-reverse, .flex-row-reverse { flex-direction: row-reverse; } .fdc, .fd-column, .flex-column { flex-direction: column; } .fdcr, .fd-column-reverse, .flex-column-reverse { flex-direction: column-reverse; } /* ----------------- 01 - XS Justify-content ----------------- */ .jcc, .jc-center, .justify-content-center { justify-content: center; } .jcfe, .jc-flex-end, .justify-content-flex-end { justify-content: flex-end; } .jcfs, .jc-flex-start, .justify-content-flex-start { justify-content: flex-start; } .jcsb, .jc-space-between, .justify-content-between { justify-content: space-between; } /* ----------------- 01 - XS Align-items ----------------- */ .aifs, .ai-flex-start, .align-items-start { align-items: flex-start; } .aic, .ai-center, .align-items-center { align-items: center; } .aife, .ai-flex-end, .align-items-end { align-items: flex-end; } /* ----------------- 01 - XS Flex Flex-grow ----------------- */ .fg-0, .flex-grow-0 { flex-grow: 0; } .fg-1, .flex-grow-1 { flex-grow: 1; } /* ----------------- 01 - XS Flex Flex-shrink ----------------- */ .fs-0, .flex-shrink-0 { flex-shrink: 0; } .fs-1, .flex-shrink-1 { flex-shrink: 1; } /* ----------------- 01 - XS Flex Flex-basis ----------------- */ .fb-auto, .flex-basis-auto { flex-basis: auto; } .fb-0, .flex-basis-0 { flex-basis: 0; } .fb-50, .flex-basis-50 { flex-basis: 50%; } .fb-100, .flex-basis-100 { flex-basis: 100%; } /* ----------------- 01 - XS Gap ----------------- */ .gap-5px { gap: .5rem; } .gap-8px { gap: .8rem; } /* ----------------- 01 - XS Gap Row ----------------- */ .rg-3px, .row-gap-3px { row-gap: .3rem; } .rg-5px, .row-gap-5px { row-gap: .5rem; } .rg-10px, .row-gap-10px { row-gap: 1rem; } .rg-12px, .row-gap-12px { row-gap: 1.2rem; } .rg-15px, .row-gap-15px { row-gap: 1.5rem; } .rg-30px, .row-gap-30px { row-gap: 3rem; } .rg-40px, .row-gap-40px { row-gap: 4rem; } .rg-50px, .row-gap-50px { row-gap: 5rem; } .rg-70px, .row-gap-70px { row-gap: 7rem; } /* ----------------- 01 - XS Gap Column ----------------- */ .cg-5px, .column-gap-5px, .column-gap-2 { column-gap: .5rem; } .cg-8px, .column-gap-8px { column-gap: .8rem; } .cg-10px, .column-gap-10px, .column-gap-3 { column-gap: 1rem; } .cg-15px, .column-gap-15px, .column-gap-4 { column-gap: 1.5rem; } .cg-20px, .column-gap-20px { column-gap: 2rem; } .cg-30px, .column-gap-30px { column-gap: 3rem; } .cg-50px, .column-gap-50px { column-gap: 5rem; } .cg-70px, .column-gap-70px { column-gap: 7rem; } /* ----------------- 01 - XS Order ----------------- */ .order-n1, .order-first { order: -1; } .order-0 { order: 0; } /* ----------------- 02 - MD Display ----------------- */ /* ----------------- 02 - MD Flex-wrap ----------------- */ @media (min-width: 768px) { .fw-md-w, .fw-md-wrap, .flex-md-wrap { flex-wrap: wrap; } } /* ----------------- 02 - MD Flex-direction ----------------- */ @media (min-width: 768px) { .fd-md-r, .fd-md-row, .flex-md-row { flex-direction: row; } .fd-md-c, .fd-md-column, .flex-md-column { flex-direction: column; } } /* ----------------- 02 - MD Justify-content ----------------- */ /* ----------------- 02 - MD Align-items ----------------- */ /* ----------------- 02 - MD Flex Flex-grow ----------------- */ /* ----------------- 02 - MD Flex Flex-shrink ----------------- */ /* ----------------- 02 - MD Flex Flex-basis ----------------- */ /* ----------------- 02 - MD Gap ----------------- */ /* ----------------- 02 - MD Gap Row ----------------- */ /* ----------------- 02 - MD Gap Column ----------------- */ /* ----------------- 02 - MD Order ----------------- */ /* ----------------- 03 - LG Display ----------------- */ @media (min-width: 992px) { .d-lg-none { display: none; } .d-lg-inline { display: inline; } } /* ----------------- 03 - LG Flex-wrap ----------------- */ /* ----------------- 03 - LG Flex-direction ----------------- */ @media (min-width: 992px) { .fd-lg-r, .fd-lg-row, .flex-lg-row { flex-direction: row; } .fd-lg-c, .fd-lg-column, .flex-lg-column { flex-direction: column; } } /* ----------------- 03 - LG Justify-content ----------------- */ @media (min-width: 992px) { .jc-lg-c, .jc-lg-center, .justify-content-lg-center { justify-content: center; } .jc-lg-fe, .jc-lg-flex-end, .justify-content-lg-flex-end { justify-content: flex-end; } .jc-lg-fs, .jc-lg-flex-start, .justify-content-lg-flex-start { justify-content: flex-start; } .jc-lg-sb, .jc-lg-space-between, .justify-content-lg-space-between { justify-content: space-between; } } /* ----------------- 03 - LG Align-items ----------------- */ @media (min-width: 992px) { .ai-lg-fs, .ai-lg-flex-start, .align-items-lg-start { align-items: flex-start; } .ai-lg-c, .ai-lg-center, .align-items-lg-center { align-items: center; } .ai-lg-fe, .ai-lg-flex-end, .align-items-lg-end { align-items: flex-end; } } /* ----------------- 03 - LG Flex Flex-grow ----------------- */ @media (min-width: 992px) { .fg-lg-initial, .flex-grow-lg-initial { flex-grow: initial; } } /* ----------------- 03 - LG Flex Flex-shrink ----------------- */ /* ----------------- 03 - LG Flex Flex-basis ----------------- */ /* ----------------- 03 - LG Gap ----------------- */ /* ----------------- 03 - LG Gap Row ----------------- */ @media (min-width: 992px) { .rg-lg-5px, .row-gap-lg-5px { row-gap: .5rem; } .rg-lg-10px, .row-gap-lg-10px { row-gap: 1rem; } .rg-lg-12px, .row-gap-lg-12px { row-gap: 1.2rem; } .rg-lg-15px, .row-gap-lg-15px { row-gap: 1.5rem; } } /* ----------------- 03 - LG Gap Column ----------------- */ @media (min-width: 992px) { .cg-lg-5px, .column-gap-lg-5px, .column-gap-lg-2 { column-gap: .5rem; } .cg-lg-10px, .column-gap-lg-10px, .column-gap-lg-3 { column-gap: 1rem; } .cg-lg-30px, .column-gap-lg-30px { column-gap: 3rem; } } /* ----------------- 03 - LG Order ----------------- */ @media (min-width: 992px) { .order-lg-0 { order: 0; } } /* ----------------- 04 - XL Display ----------------- */ /* ----------------- 04 - XL Flex-wrap ----------------- */ /* ----------------- 04 - XL Flex-direction ----------------- */ @media (min-width: 1200px) { .fd-xl-r, .fd-xl-row, .flex-xl-row { flex-direction: row; } .fd-xl-c, .fd-xl-column, .flex-xl-column { flex-direction: column; } } /* ----------------- 04 - XL Justify-content ----------------- */ /* ----------------- 04 - XL Align-items ----------------- */ /* ----------------- 04 - XL Flex Flex-grow ----------------- */ /* ----------------- 04 - XL Flex Flex-shrink ----------------- */ /* ----------------- 04 - XL Flex Flex-basis ----------------- */ /* ----------------- 04 - XL Gap ----------------- */ /* ----------------- 04 - XL Gap Row ----------------- */ /* ----------------- 04 - XL Gap Column ----------------- */ /* ----------------- 04 - XL Order ----------------- */