Please enable JavaScript.
Coggle requires JavaScript to display documents.
CSS Layouts (Flexbox (https://css-tricks.com/snippets/css/a-guide-to…
CSS Layouts
Flexbox
-
flex-direction : Mono dimentional representation define the main axis, other axis is called the cross axis
-
Flex-grow : default 0, item won't take the whole space
flex-wrap: default nowrap, items will stay on the same line even if no space
justify-content: default flex-start, items in the flex container will start on the left
align-items: default stretch to fill the container, alignement along the cross axis
CSS Grid
-
display: grid, inline-grid
-
grid-template-area: define the place of your elements, beware your items can't be defined into wrappers
grid-area: make the parallel between your grid template and the css class to put on your html element.
-
-
Base
CSS Grid vs Flexbox
CSS Grid Layout is a two-dimensional system, meaning it can handle both columns and rows, unlike flexbox which is largely a one-dimensional system (either in a column or a row).
A core difference between CSS Grid and Flexbox is that — CSS Grid’s approach is layout-first while Flexbox’ approach is content-first.
If you are well aware of your content before making layout, then blindly opt for Flexbox and if not, opt for CSS Grid.
Flexbox layout is most appropriate to the components of an application (as most of them are fundamentally linear), and small-scale layouts, while the Grid layout is intended for larger scale layouts which aren’t linear in their design.
If you only need to define a layout as a row or a column, then you probably need flexbox. If you want to define a grid and fit content into it in two dimensions — you need the grid.
Float & Clear
Float & Clear is familiar. This is a great way to set an image within a larger text article.
However, it’s not a very practical way to set up an entire web page layout. If you’re not careful, it can get buggy pretty quickly, and it’s a little bit of a mess trying to clean it up. This layout method just doesn’t have as many built-in properties as Grid or Flex and cannot create complex layouts.
-
-
OK for text moving, not component, beware margin. Not very useful now
-
-
Position
relative : position in a normal flux, place the component relative to others and move up/side (top/botom), beware superposition as others are not influenced by its layout.
Leaves a space where it should be placed.
absolute : same as fixed but positioned along with its parent.
Doesn't leave a space where it should be placed.
fixed : position along the browser view (top/left...)
Doesn't leave a place where it should be placed.
-
Sticky : define the element as sticky with an offset. The wrapper component is automaticaly defined as the sticky limit. Item follow the scrolling and get sticky when it reach the offset.
-
static : default, element not positioned
overflow
The overflow property specifies what should happen if content overflows an element's box. This property specifies whether to clip content or to add scrollbars when an element's content is too big to fit in a specified area. Note: The overflow property only works for block elements with a specified height.
avoid overflow-x. To fix a scrolling of a wrapper or a table, add a css class with height and overflow:auto.
Flux
-
Display : block => alignement top to botom (div, p, h1, ul ...)
inline => alignement left to right (span, a , img...)
spacing
-
-
box model
-
Content-box, Padding-box, Border-box, Margin-box
box-sizing: content-box by default, exclude all padding/border/margin from width calculation
In this case width 100px, padding10px, border1px means that your component real width will be 100px + 2 10px + 2 1px
-
If you don't want bother this calculation, put box-sizing to border-box, then 100px will be the real size of your content
En plus
-
-
Why 12 column grid: Usually a 12 column grid is used because its easier to break up into other sizes with 6, 4, 3 and 2 columns
-