Intro to Flexbox

I’m Arelia

@arelia
Web Developer
CareerBuilder
Instructor
CoderSpace

What is Flexbox?


.resource-grid {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
}

@media only screen and (max-width: 40em) {
  .resource-grid {
    flex-wrap: nowrap;
    flex-direction: column;
  }
}
					

.resource-block {
  flex: 1;
}

@media only screen and (max-width: 64em) {
  .resource-block {
    flex: 1 0 46%;
  }
}

@media only screen and (max-width: 40em) {
  .resource-block {
    flex: 1;
  }
}
					

.logo-grid {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
}

@media only screen and (max-width: 40em) {
  .logo-grid {
    flex-direction: column;
  }
}
						

.logo-grid__testimonial--large {
  min-width: 30%;
  max-width: 33%;
}

@media only screen and (min-width: 40em) {
  .logo-grid__testimonial--large {
    flex-basis: 31.5%;
  }
}
						
						
.logo-grid__mini-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: space-between;
}

.logo-grid__testimonial--mini {
  width: 45.75%;
  flex-grow: 1;
}

@media only screen and (max-width: 64em) {
  .logo-grid__testimonial--mini {
    width:43%
  }
}

@media only screen and (min-width: 40em) {
  .logo-grid__testimonial--mini {
    flex-basis: 43%;
  }
}

@media only screen and (max-width: 40em) {
  .logo-grid__testimonial--mini {
    width:100%
  }
}

What is it good for?

  • Dynamic content
  • Responsive layouts
  • Uniform height/width across elements
  • (Easy) Vertical centering
  • Changing order

Getting Started

Begin with a flex container (the parent element)

Getting Started

Understand which is the main axis and cross axis

Demo

https://github.com/arelia/flex-talk/tree/master/example_files

Flex Parent Properties

Display: flex;

Flex Parent Properties

Flex-direction: row || row-reverse || column || column-reverse;

Flex Parent Properties

Flex-wrap: nowrap || wrap || wrap-reverse;

Flex Parent Properties

Flex-flow: <flex-direction> <flex-wrap>;

Flex Parent Properties

Justify-content: flex-start || flex-end || center || space-between || space-around;

Flex Parent Properties

Align-content: flex-start || flex-end || center || space-between || space-around || stretch;

Flex Parent Properties

Align-items: flex-start || flex-end || center || baseline || stretch;

Flex Child Properties

Order: <integer>;

Flex Child Properties

Flex-grow: <non-negative number>;

Flex Child Properties

Flex-shrink: <non-negative number>;

Flex Child Properties

Flex-basis: <length>;

Flex Child Properties

Flex: <flex-grow> <flex-shrink> <flex-basis>;

Flex Child Properties

Align-self: auto || flex-start || flex-end || center || baseline || stretch;

Resources

CSS Tricks Guide to Flexbox:
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Flexbox Froggy:
http://flexboxfroggy.com/

Guide to Flexbox without Flexbox:
https://kyusuf.com/post/almost-complete-guide-to-flexbox-without-flexbox

Rachel Andrew: https://rachelandrew.co.uk/
Jen Simmons: http://jensimmons.com/

Chicago HTML5 Meetup

Tuesday, June 14 @ 6:00pm

Enova

Lunch and Learn – Teaching in the Cloud

Room 621

Thank You