Intro to Flexbox

• Who here does front end, backend? Anyone who doesn’t develop for the web?
• This talk is web-specific so feel free to step out if it you don’t find this relevant
• Questions? Please find me after the CoderSpace talk which is immediately after this one

I’m Arelia

What is Flexbox?

• A CSS layout model
• allows child elements of a container to be laid out vertically or horizontally
• allows the child elements to shrink or grow (“flex”) their size based on unused space
• Should be used for components, not whole page layouts (for which you might use the new grid properties)

.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;
  }
}
					

• display flex creates our flex layout
• flex-wrap: wrap lets our content flow into multiple lines when needed
• flex-direction: row sets our items in a row, then in our small-screen media query we set our items into a column and do not allow it to wrap
• This is all set on our parent element

.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;
  }
}
					

• On our child elements, or flex-children, we are using the flex property to dictate the target size for each item and how much they can shrink or grow
• flex: 1 is a shorthand that means elements have a 1:1 size ratio to each other, they should grow/shrink/target the same amount of space
• flex: 1 0 46% means the items can grow and absorb any additional space, cannot shrink (0), and should have a target size of at least 46%

• There is a .logo-grid flex parent around the entire area
• The large box is given about 33% of space and stretches to the height of the small box area
• the small box area has it's own flex-parent wrapper and the small boxes inside are flex children that maintain a uniform height and width

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

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

• Children are the large box and the box that wraps the smaller boxes

.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%
  }
}
						
					

• Tried table and bourbon/neat grid but felt like I had to right new declarations to override the built in rules and my code was messy and ultimately it wouldn’t give me equal width/height boxes regardless of the amount of text dont want to use grid because i want to reclaim more of the margin space for my content, in this case i need the space, but I don't want to guess and check for how much margin and box size i need, flexbox can just rearrange margins while I focus on content size

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)

• Much of the flexibility can be achieved with just the properties applied to the parent
• (At this point it helps to go to the CSS Tricks flexbox article and go down the line of properties)

Getting Started

Understand which is the main axis and cross axis

Demo

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

Chicago HTML5 Meetup

Tuesday, June 14 @ 6:00pm

Enova

Lunch and Learn – Teaching in the Cloud

Room 621

Thank You