Table use case -> We want to only use a table to display tabular information
Float use case -> We want to only use float to float images and wrap text and other elements against it.
Flexbox is used to create a page layout in a simple way, across a row or a column.
In this case, we want to use display:flex or display:inline-flex. Though this uses display, it uses a diferent positioning system and ruleset from inline, inline-block, block, and none.
display:flex -> treats the div like a block element, and occupies the whole screen (100%).
display:inline-flex -> treats the div like an inline element, meaning other elements can also live on the same line. you may set a width
In both of these positioning systems, the width of the div is determined by the content size.
To use flexbox, we need to put all of our information into DIVs, then wrap this div in a container that has the display property set to flex.
< div class="container">
< div class="one">1< /div>
< div class="two">2< /div>
< /div>
styles.css
.container{display:flex; gap:10px;}
There is a default HTML flow, which has all the elements fit on a row, and then continue onto the next row.
Flexbox also has a default flow (flex-direction), where items are laid down across a main axis. This means that items are laid down across this axis. This is default set to row, so items are laid out in a row, from left to right.
flex-directon:row -> items will be laid out in a row from left to right.
Flex-direction:column -> Items will be laid out top to bottom.
The cross axis would be perpendicular of the flex-direction. If we set flex-direction:row, then the cross axis is top to bottom.
When thinking about layout, we must consider if the layout is going into the child(item) or the parent(container).
Practice using flexbox froggy -> Link Here
Justify-content -> Distributes the items along the main axis.
Flex-wrap -> Used when we run out of space on a horizontal. Default set to nowrap.
Order -> If you want to rearrange an item, then you can set an order inside of the child. By default, the order is set to 0.
Align-items -> the position of the items along a cross axis. we need to set a height of the container (vh is viewport height) for this to work.
Align-content -> Works like align-items, but only works when flex-wrap is set to wrap.
To center something, use a combination of display:flex, justify-content:center, align-items:center, and height:#vh
Flexbox will automatically shrink itemboxes as the windowscreen changes, but sometimes we don't want that to happen.
minimum/maximum width set -> flex-basis -> height/width property -> content width
maximum width -> This looks at the longest line of text in the container. The maximum width is respected as long as space allows for it.
mimumum width -> This is the longest word in the container.
flex-basis ignores the maximum width.
min-width: This is how small an item can get to.
flex-shrink -> will shrink the items until it gets to the min-width
Max-width: this is as large as the item can grow. Max posibly the item can grow.
flex-grow-> will grow as the page expands.
If we wanted to write it all at once, we could write...
flex: grow shrink basis
flex: 1; is grow 1 shrink 1 basis 0
This can be done to keep the ratios when doing these items.