Transcription
Flexbox Cheat SheetBootstrap 4Flexbox IntroductionBelow is flexbox example markup. You could apply flexbox CSS properties manually, but thingscan get cumbersome when you are trying to apply responsive functionality. The benefit of usingBootstrap 4 flexbox utility classes is that you can set flexbox properties and target specificbreakpoints. div class "flex-container" div class "flex-item-a" flex item with a class .flex-item-a /div div flex item /div div flex item /div /div Flex ContainerFlex layout gives the container the ability to alter its items' width/height (and order) to best fill theavailable space of the container.The container has a main axis and cross axis which depends on the flex direction. Each axis has astart and end. For example, if you set the flex direction to column. The main axis is vertical and thecross axis is horizontal. If you set the flex direction to row, the main axis is horizontal and the crossaxis is vertical.The following pages compares vanilla CSS flexbox to Bootstrap 4 flexbox utility classes to help youdecide which approach is best for your situation.CSSBootstrap 4BootstrapCreative.com1.0:v4.0.0:1
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 1: Do you want the container to behave like a blockor inline element?CSSBootstrap 4display:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: isplay#Valuesflexmakes the container act display blockinline-flexmakes the container act display inlineDocs: nable-flex-behaviors.d-flex.d-inline-flex.d-(sm, md, lg, xl)-(flex, inlineflex)BootstrapCreative.com1.0:v4.0.0:2
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 2: Do you want your main axis to be vertical or horizontal?CSSBootstrap 4flex-direction:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: lex-directionrow (default)left to rightrow-reverseright to leftcolumntop to bottomcolumnDocs: x-column-reverse.flex-(sm, md, lg, xl)-(row, rowreverse, column, column-reverse)reverse bottom to topBootstrapCreative.com1.0:v4.0.0:3
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 3: How do you want the extra space to be distributed alongthe main axis?CSSBootstrap 4justify-content:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: ustify-contentflex-start (default)items anchored to the startflex-enditems anchored to the startcenteritems centeredspace-betweenDocs: een.justify-content-around.justify-content-(sm, md, lg, xl)(start, end, center, between, around)items evenly distributed in the line. First item inon the start and last item is at the endspace-aroundstart and end items are not to the edge buthave 1 unit of space on each sidespace-evenlysimilar to space-around, except all space isthe sameBootstrapCreative.com1.0:v4.0.0:4
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 4: How do you want the extra space of LINES of itemsto be distributed along the cross axis?CSSBootstrap 4align-content:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: lign-contentflex-startitems anchored to the startflex-enditems anchored to the endcenteritems centeredspace-betweenDocs: ontent-stretch.align-content-(sm, md, lg, xl)(start, end, center, around, stretch)first line at the start of the container and thelast one is at the endspace-aroundlines are evenly distributed with equal spacearound each linestretch (default)lines stretch to take up the space that is leftBootstrapCreative.com1.0:v4.0.0:5
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 5: How do you want the extra space between itemsto be distributed along the cross axis?CSSBootstrap 4align-items:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: lign-itemsflex-startcross axis align items to startflex-endcross axis align items to endcentercross axis align items centerbaselineDocs: etch.align-items-(sm, md, lg, xl)-(start,end, center, baseline, stretch)align baselinesstretch (default)stretch to fill the containerBootstrapCreative.com1.0:v4.0.0:6
FLEXBOX CONTAINERFlexbox Cheat SheetBootstrap 4Step 6: Do you want the items to wrap if they don't fit on one line?CSSBootstrap 4flex-wrap:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: lex-wrapnowrap (default)all items will try to stay on one lineDocs: rapwrap.flex-nowrapif items don't fit they will wrap and create anew line below.flex-wrap-reversewrap-reverseif items don't fit they will wrap and create anew line above.flex-wrap.flex-(sm, md, lg, xl)-(nowrap,wrap, wrap-reverse)Shorthand propertyThis is a shorthand property that sets the flex-direction and flex-wrap properties. I suggestavoid using this until you learn the core properties because it could make things more confusing.CSSBootstrap 4flex-flow:Since Bootstrap uses classes there is noshorthand property available.Docs: lex-flow flex-direction flex-wrap example: flex-flow: column-reversewrap-reverse; or just .0.0:7
Do you know what knowledge you’re missing?Learn what you need to know before using Bootstrap 4.The problem isn’t what you know but what you don’t.There is nothing more embarrassingthan being unable to answer an interviewquestion or having a coworker bad mouthyour messy code. It is impossible to knoweverything, especially when you are juststarting out.I see a huge knowledge gap right nowfor beginners who are learning Bootstrapbefore learning HTML, CSS, and responsivedesign basics.If that sounds like you, here’s how you canlearn what you need to know BEFORE youstart using Bootstrap in your projects.Get Free Book SampleBootstrapQuickStart.com
Flexbox Cheat SheetBootstrap 4Flex ItemDo you want to override the parent settings and give a specific item their own unique settings? Youwill first need to write a custom class and add it to the item you would like to modify. Flexbox items follow the orders given by their container. By default, flex items all want to appear on the same line Individual flexbox items can be targeted with a unique class and property to override theorders given by their container. The example below uses the class .flex-item-a to makeadjustments to only flex-item-aExample:HTML div class "flex-container" div class "flex-item-a" .flex-item-a /div div class "flex-item-b" .flex-item-b /div div class "flex-item-c" .flex-item-c /div /div CSS.flex-item-a {order: 3;font-weight: bold;}ResultBootstrapCreative.com1.0:v4.0.0:9
FLEXBOX ITEMFlexbox Cheat SheetBootstrap 4Step 1: Do you want to change the order of this item relativeto the other items?CSSBootstrap 4order:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: rder[number]default is 0Docs: order-lg-(1-12).order-xl-(1-12)Step 2: Do you want to have this item take up more space thanthe other items?CSSBootstrap 4flex-grow:No classes availableDocs: lex-grow[number]default is 0BootstrapCreative.com1.0:v4.0.0: 10
FLEXBOX ITEMFlexbox Cheat SheetBootstrap 4Step 3: Do you want this item to take less space thanthe other items?CSSBootstrap 4flex-shrink:No classes availableDocs: lex-shrink[number]default is 0Step 4: Do you want to set the default size of this item before theother item sizes are set?CSSBootstrap 4flex-basis:No classes availableDocs: lex-basis[length]A number followed by px, em, rem, or %.Check the docs for additional keywordsauto (default)look at my width or height propertyBootstrapCreative.com1.0:v4.0.0: 11
FLEXBOX ITEMFlexbox Cheat SheetBootstrap 4Step 5: Do you want to override the align-items valuefor this item?CSSBootstrap 4align-self:Use one or a combination of classes below tospecify what breakpoints you would like theproperties to be applied.Docs: lign-selfautoinherits the parent container's align-itemspropertyflex-startcross-start margin is on the cross start lineflex-endcross-end margin is on the cross end linecentercenters are alignedbaselinebaselines are alignedDocs: lign-self-sm-(start, end, center,baseline, stretch).align-self-md-(start, end, center,baseline, stretch).align-self-lg-(start, end, center,baseline, stretch).align-self-xl-(start, end, center,baseline, stretch)stretch (default)fill the containerBootstrapCreative.com1.0:v4.0.0: 12
FLEXBOX ITEMFlexbox Cheat SheetBootstrap 4Shorthand propertyThis is the shorthand for flex-grow, flex-shrink and flex-basis combined.CSSBootstrap 4flex:Since Bootstrap uses classes there is noshorthand property availableDocs: lexexample:Three values: flex-grow flex-shrink flex-basisflex: 2 2 10%;BootstrapCreative.com1.0:v4.0.0: 13
Flexbox Cheat SheetBootstrap 4Find an error?Or have a comment?Email me: om1.0:v4.0.0: 14
Flexbox Cheat Sheet Bootstrap 4 BootstrapCreative.com 1.0:v4.0.0: 1 Flexbox Introduction Below is flexbox example markup. You could apply flexbox CSS properties manually, but things . for beginners who are learning Bootstrap before learning HTML, CSS, and responsive design basics. If that sounds like you, here's how you can
