On this Page
- Experimented with different justifications of flexbox
- Tried out
box-sizing: content-boxandborder-box. Applies to flexbox elements as normal. - Tried out CSS Transitons.
transition: height 3s. You then put the changed height in your pseudo element :.flexbox:hover - Used height transitions to create a drop down menu (rather than
display: none;) method. - Did some old stuff: setting anchor elements to block.
1
default (no justify defiined)
default (no justify defiined)
2
the width of containers is set to 20%.
the width of containers is set to 20%.
3
all containers have a width of 20%.
all containers have a width of 20%.
4
the containers have a height of 50vh
the containers have a height of 50vh
5
all flex-items have width & height values in pixels.
all flex-items have width & height values in pixels.
6
all elements on the page have box-sizing:border-box
all elements on the page have box-sizing:border-box
7
all containers are set to flex-wrap:wrap
all containers are set to flex-wrap:wrap
8
9
n2
justify-content: flex-start
justify-content: flex-start
Mouse over to expand
This item, with it's border, expands the height of the box and gives the items in other containers on this row the the horizontal gaps. THe writing also expands it's height.
This item, with it's border, expands the height of the box and gives the items in other containers on this row the the horizontal gaps. THe writing also expands it's height.
3
4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis dignissimos reprehenderit hic iusto sed, nostrum reiciendis omnis, aut a saepe ab consectetur suscipit ut, amet labore, eos.
5
6
7
8
9
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque odit culpa nisi, quia distinctio mollitia rerum accusamus, dolore ipsa iusto perferendis autem necessitatibus tenetur aliquid quos.
n3
flex-end
flex-end
2
3
4
5
6
7
The key to hiding text is overflow:hidden.
The key to hiding text is overflow:hidden.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus temporibus laudantium magnam quidem eius repellendus minima voluptate.
Confusion arose because some text was hidden by the fact the subsequent flex item was on top of the previous and thus hiding it because of layering. However when text was added to the last item it was clear the text was still spilling out.
9
n4
space-between
space-between
2
3
4
5
6
7
8
9
n5
center
center
2
Took out the last div of these containters to prevent the scroll bar activating when they extend past the bottom of the page
3
4
5
6
7
8
Flexbox & Animations
n6
space-around
space-around
2
3
4
5
6
7
8