# Cookie Jar: Flexbox, DOM, Events

Put your pending and outstanding questions here 👇
Make the question in H2 tag by using '##'

## Do we need to label the containers in flex specifically 'container' in html for flexbox to recognize it?

By default, one of things that happens when you do `display: flex;`, all the direct children will be turned into the `flex items`. You don't need to do anything with the word container.

## can you justify things center-left / center-right (and other positions) by using invisible boxes?

I'm sure we can finagle this somehow similar to how, websites still existed before Flexbox Layout but it seems like you may want to use `grid` for that

## display:flex -Power? over 9000

😂

But seriously, here's what happens when you declare, `display: flex` (not an exhaustive list) by default

- Treats that parent as a flex container
- Treats all direct children as flex items
- Flex items will be laid out horizontally from the left in source order
- Flex items will be sized based on width properties if declared (Remember, it only takes up the space it needs)
- If there is not enough space, they are given permission to shrink horizontally until they all fit

## How do you remove the flex property from children but keep it on the parent?

I'm not sure what you mean by this. Once we declare `display: flex` on the parent, its direct children will be, by default, flex items. Only way to "remove" that is to change the parents' `display` property.

## when telling flex boxes to grow/shrink, which instruction takes priority? Is it based on order in the code or something else?

I believe it is based on the proportion formulas I talked about in class. So, we would actually calculate up all the proportions and it will size based on that.

## Can you go over question 17 on flexboxfroggy.com?

I can go over this on tomorrow's review.

## Is it good practice for anonymous functions or regular function declarations in the addEventListener callback?

Great question: I know in my live codes/code demos, I use a lot of anonymous functions. However, it is better practice to actually use named functions especially if you want to use removeEventListener. Because removeEventListener needs a reference to the callback that was used in defining the listener, the callback has to be named. And it's also good practice to remove an event listener when it not needed anymore.

## is target a property or a prototype method of event?

Property

## In the Nyan cat event listener examples, it seems we used event.target and nyanCat.target interchangeably. Is event a keyword?

So, if we changed it to 'bub.target', it wouldn't work because bub wasn't passed in as an argument. event is actually passed implicitly by the browser which is why it still worked. But be consistent, and that was my fault because I am used to just typing in "event".

## What are the three phases when an event is triggered?

1. Capture Phase: Event flows from document's `root` to `target`
2. Target Phase: Fires event `target`
3. Bubbling/Propagating Phase: Event flows back to document's `root`