Professional Documents
Culture Documents
li { span {
display: inline; display: block;
} }
Position Property
div.relative { div.relative {
position: relative; position: relative;
} }
Common Layout Techniques
Common Layout Techniques
Float
Flexbox
Grid Layout
Responsive Design
Float
Floats
To create a flex
container, set .flex-container {
display: flex;
the display }
property to flex
or inline-flex.
The flex container properties
flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content
The flex-direction Property
Shorthand property
for setting both the .flex-container {
flex-direction and display: flex;
flex-flow: row wrap;
flex-wrap }
properties.
Main Axis Alignment: justify-content property
.flex-container {
To control the display: flex;
alignment of justify-content: center;
items along the }
flex-start • aligns the flex items at the beginning of the container (this is
default)
space-around • displays the flex items with space before, between, and after the
lines
space-between • displays the flex items with space between the lines
Cross Axis Alignment: align-items property
To control the
alignment of items .flex-container {
along the cross display: flex;
align-items: center;
axis, use the align-
items property. }
align-items property
stretch • stretches the flex items to fill the container (this is default)
To create a grid
container, set .grid-container {
the display display: grid;
}
property to grid
or inline-grid.
Defining Grid Rows and Columns
.grid-container {
Use grid-template- display: grid;
rows and grid- grid-template-columns:
80px 200px auto 40px;
template-columns }
.grid-container {
to define the display: grid;
structure of the grid-template-rows: 80px
200px;
grid }
Placing Grid Items
/* starts on column 1, ends on column 5 */
and grid-column }
/*start on column 1 and span 3 columns*/
properties to .item1 {
grid-column: 1 / span 3;
}
place items /* starts on row 1, ends on row 4 */
.item1 {
within the grid. }
grid-row: 1 / 4;
Grid Gaps
.container {
You can create display: grid;
grid-gap: 20px;
gaps between }
width=device-width