From the UI perspective, layout management in HTML is concerned with the sizing, distribution, and alignment of smaller container elements called items.
Early CSS tends to be inconsistent in its alignment and justification definitions. In general, the layout rules establish a main axis and a cross axis. Justification generally means the positioning along the main axis, while alignment generally means offset positioning in the cross axis. However, for inline contexts, text-align is actually a justification setting, with vertical-align affecting cross axis. Consistency is improved in Flexbox/CSSGrid.
There are several layout contexts with default initial settings that can be overridden through CSS:
display:inline
items that follow one another in a line
display:block
rectangular containers that stack on top of each other
display:table
row and column layout
display:flex
a stackable row- or column-layout manager
display:grid
a row and column addressible layout, more flexible than display:table
Each of these layout types apply to a container element that then arranges child items according to its layout rules. The basic ones are inline and block.
- inline elements have both
widthandheightset by the size of the content, and do not generate line breaks, so they line up horizontally unless overridden. - block elements have a
widththat stretches to the extent of the partent container, with theheightset based on the content. A block by default stacks vertically with its sibling block elements, generating a line break before and after itself.
For layout purposes, line-based content (e.g. text in a paragraph, <span>) tends to use inline, while structural tags tend to use block (e.g. <p>, <div>). It is fair to say that line-based content lives in the context of some kind of block (e.g. <body> or <p>) that provides dimensional constraint through width and height.
NOTE: There are other kinds of display types like display:content (used in the <section> tag) and other specific cases for specific HTML elements, but we're mostly concerned with organizing items inside of a block structure.
Properties of Inline Content
As mentioned, line-based content flows one item after the other like letters, <a>, <span> and so forth. This flow of items defines what's called a line box which grows in width and height to fit the content. There are three important concepts that go with this:
- The line box flows along a horizontal axis which we'll call the main axis which is correlated with
width - The line box also has a vertical axis called the cross axis that is correlated with
height - When the line content wraps, this creates multiple line boxes that are stacked on top of each other
There are two kinds of spacing that inline content is concerned with
- justification is the distribution/spacing of elements along the main axis
- alignment is the positioning/spacing of elements relative to the cross axis
There are a lot of subleties to aligning and justifying items in line-based content which are beyind the scope of this note.
Default Parent Layout Container Declarations
display:block
width:auto; (width of parent)
height:auto; (height of content)
display:table
border-spacing:0;
border-collapse:separate
display:flex
flex-direction: row [row-reverse, column, column-reverse]
justify-content: flex-start [row-reverse, column column-reverse]
align-items: stretch [flex-start, flex-end, center, baseline]
align-content: stretch (multiline)
flex-wrap: nowrap
display:grid
grid-template-rows: none
grid-template-columns: none
grid-auto-flow: row [column, dense, row dense, column dense]
gap: 0
align-items: stretch
justify-items: stretch
align-content: stretch
Axes
flex-direction(Flexbox):
Values:row,row-reverse,column,column-reverse. Defines the main axis direction.grid-auto-flow(Grid):
Values:row,column,dense,row dense,column dense. Controls item placement flow.writing-mode(Block/Inline):
Values:horizontal-tb,vertical-rl,vertical-lr. Determines text and inline content flow direction.
Default Child Item Sizing
flex(Flexbox):
Values:none,auto,1,2, etc. Defines how a flex item grows, shrinks, or uses available space.grid-template-columns/grid-template-rows(Grid):
Values: Length units (e.g.,100px),auto,min-content,max-content,repeat(),fr. Specifies row/column sizes.box-sizing(All Layouts):
Values:content-box,border-box. Controls how width/height include padding and border.
Justification (Main Axis)
justify-content(Flexbox/Grid):
Values:flex-start,flex-end,center,space-between,space-around,space-evenly. Distributes items along the main axis.text-align(Block/Inline):
Values:start,end,center,justify. Aligns inline content within a block container.margin: auto(Block inside Block) Values:auto 00 autoauto autojustify-items(Grid):
Values:start,end,center,stretch. Aligns grid items within their cells along the main axis.
Alignment (Cross Axis)
align-items(Flexbox/Grid):
Values:stretch,flex-start,flex-end,center,baseline. Aligns items along the cross axis for single-line layouts.align-self(Per item, Flexbox/Grid):
Values: Same asalign-items. Allows individual item alignment.align-content(Flexbox/Grid):
Values:stretch,flex-start,flex-end,center,space-between,space-around. Controls multi-line layouts.vertical-align(Inline/Table):
Values:baseline,top,middle,bottom,text-top,text-bottom. Aligns inline elements relative to their line box.
Wrapping and Overflow
flex-wrap(Flexbox):
Values:nowrap,wrap,wrap-reverse. Determines whether items wrap onto multiple lines.overflow(All Layouts):
Values:visible,hidden,scroll,auto,clip. Controls how content exceeding the container is handled.white-space(Inline):
Values:normal,nowrap,pre,pre-wrap,pre-line. Defines how text wraps within inline or block containers.
Explicit and Implicit Layout
grid-template-areas(Grid):
Values: Custom strings (e.g.,"a a b"). Defines named areas in a grid.grid-template(Grid):
Values: Combinesgrid-template-rowsandgrid-template-columns.grid-auto-rows/grid-auto-columns(Grid):
Values: Length units,min-content,max-content,auto. Controls the size of implicitly created rows/columns.table-layout(Table):
Values:auto,fixed. Determines whether column widths adjust based on content.
Responsiveness
media(All Layouts):
Values: Breakpoints likemax-width,min-width,max-height,min-height. Adapts layouts to viewport size.aspect-ratio(All Layouts):
Values: Numeric ratios (e.g.,16/9,1/1). Maintains proportional dimensions.min-width/max-width/min-height/max-height(All Layouts):
Values: Length units (e.g.,100px,50%). Constrains element dimensions.object-fit(Replaced Elements, e.g., Images):
Values:fill,contain,cover,none,scale-down. Adjusts content scaling within its container.