我很早学过,只是当时没有系统记录笔记,导致过一段时就容易忘记很多东西。本笔记主要参考 CSS 基础&进阶-千古前端图文教程W3C School - CSS

Flexbox

Flex Container

The flex container becomes flexible by setting the display property to flex:

Example:

1
2
3
.flex-container {
display: flex;
}

The flex container properties are:

PropertyDescription
flex-directionSpecifies the direction of the flexible items inside a flex container
flex-wrapSpecifies whether the flex items should wrap or not, if there is not enough room for them on one flex line
flex-flowA shorthand property for flex-direction and flex-wrap
justify-contentHorizontally aligns the flex items when the items do not use all available space on the main-axis
align-itemsVertically aligns the flex items when the items do not use all available space on the cross-axis
align-contentModifies the behavior of the flex-wrap property. It is similar to align-items, but instead of aligning flex items, it aligns flex lines
displaySpecifies the type of box used for an HTML element

Property: flex-direction

The flex-direction property defines in which direction the container wants to stack(堆叠) the flex items.

Value: column

The column value stacks the flex items vertically (from top to bottom)

1
2
3
4
.flex-container {
display: flex;
flex-direction: column;
}

Value: column-reverse

The column-reverse value stacks the flex items vertically (but from bottom to top)

Value: row (default)

The row value stacks the flex items horizontally (from left to right)

Value: row-reverse

The row-reverse value stacks the flex items horizontally (but from right to left)

Property: flex-wrap

The flex-wrap property specifies whether the flex items should wrap or not.

Value: wrap

The wrap value specifies that the flex items will wrap if necessary:

1
2
3
4
.flex-container {
display: flex;
flex-wrap: wrap;
}

Value: nowrap (default)

The nowrap value specifies that the flex items will not wrap (this is default)

Value: wrap-reverse

The wrap-reverse value specifies that the flexible items will wrap if necessary, in reverse order.

Property: flex-flow

The flex-flow property is a shorthand(速记,简单表达方式) property for setting both the flex-direction and flex-wrap properties.

Example:

1
2
3
4
.flex-container {
display: flex;
flex-flow: row wrap;
}

Property: justify-content

The justify-content property is used to align the flex items horizontally.

Value: center

The center value aligns the flex items at the center of the container:

1
2
3
4
.flex-container {
display: flex;
justify-content: center;
}

Value: flex-start (default)

The flex-start value aligns the flex items at the beginning of the container (this is default)

Value: flex-end

The flex-end value aligns the flex items at the end of the container

Value: space-around

The space-around value displays the flex items with space before, between, and after the lines.

Value: space-between

The space-between value displays the flex items with space between the lines.

Property: align-items

The align-items property is used to align(对齐,使成一条线) the flex items vertically.

Value: center

The center value aligns the flex items in the middle of the container:

1
2
3
4
5
.flex-container {
display: flex;
height: 200px;
align-items: center;
}

在 Flex 容器里的图片尺寸会有点拉伸,加上align-items: center;即可

Value: flex-start

The flex-start value aligns the flex items at the top of the container.

Value: flex-end

The flex-end value aligns the flex items at the bottom of the container.

Value: stretch

The stretch value stretches the flex items to fill the container (this is default). If you set it a height, it won't fill the container.

Value: baseline

The baseline value aligns the flex items such as their baselines aligns.

Property: align-content

The align-content property is used to align the flex lines.

Value: space-between

The space-between value displays the flex lines with equal space between them:

1
2
3
4
5
6
.flex-container {
display: flex;
height: 600px;
flex-wrap: wrap;
align-content: space-between;
}

Value: space-around

The space-around value displays the flex lines with space before, between, and after them.

Value: stretch

The stretch value stretches the flex lines to take up the remaining space (this is default).

Value: center

The center value displays display the flex lines in the middle of the container.

Value: flex-start

The flex-start value displays the flex lines at the start of the container.

Value: flex-end

The flex-end value displays the flex lines at the end of the container.

Flex Items

The following table lists all the CSS Flexbox Items properties:

PropertyDescription
orderSpecifies the order of the flex items inside the same container
flex-growSpecifies how much a flex item will grow relative to the rest of the flex items inside the same container
flex-shrinkSpecifies how much a flex item will shrink relative to the rest of the flex items inside the same container
flex-basisSpecifies the initial length of a flex item
flexA shorthand property for the flex-grow, flex-shrink, and the flex-basis properties
align-selfSpecifies the alignment for a flex item (overrides the flex container's align-items property)

Property: order

The order property specifies the order of the flex items.

The order value must be a number, default value is 0.

Example:

The order property can change the order of the flex items:

1
2
3
4
5
6
<div class="flex-container">
<div style="order: 3">1</div>
<div style="order: 2">2</div>
<div style="order: 4">3</div>
<div style="order: 1">4</div>
</div>

Property: flex-grow

The flex-grow property specifies how much a flex item will grow relative to the rest of the flex items.(相当于给 item 加上宽度权重,权重越大,宽度等比变大)

The value must be a number, default value is 0.(inc. percentage)

Example:

Make the third flex item grow eight times faster than the other flex items:

1
2
3
4
5
<div class="flex-container">
<div style="flex-grow: 1">1</div>
<div style="flex-grow: 1">2</div>
<div style="flex-grow: 8">3</div>
</div>

Property: flex-shrink

The flex-shrink property specifies how much a flex item will shrink relative to the rest of the flex items.

The value must be a number, default value is 1.

Example:

Do not let the third flex item shrink as much as the other flex items:

1
2
3
4
5
6
7
8
9
10
11
12
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-shrink: 0">3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>
<div>10</div>
</div>

Property: flex-basis

The flex-basis property specifies the initial length of a flex item.(这只是初始长度,但随着 items 变多,宽度也会受到一定压缩)

Example:

Set the initial length of the third flex item to 200 pixels:

1
2
3
4
5
6
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex-basis: 200px">3</div>
<div>4</div>
</div>

Property: flex

The flex property is a shorthand property for the flex-grow, flex-shrink, and flex-basis properties.

Example:

Make the third flex item not growable (0), not shrinkable (0), and with an initial length of 200 pixels:(不伸长,也不缩短,始终保持 200px 的宽度)

1
2
3
4
5
6
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="flex: 0 0 200px">3</div>
<div>4</div>
</div>

Property: align-self

The align-self property specifies the alignment for the selected item inside the flexible container.(针对某个 item,而不是全部)

The align-self property overrides the default alignment set by the container's align-items property.

Example:

Align the third flex item in the middle of the container:

1
2
3
4
5
6
<div class="flex-container">
<div>1</div>
<div>2</div>
<div style="align-self: center">3</div>
<div>4</div>
</div>

Flex Responsive 弹性响应

For example, if you want to create a two-column layout for most screen sizes, and a one-column layout for small screen sizes (such as phones and tablets), you can change the flex-direction from row to column at a specific breakpoint (800px in the example below):

Example:

1
2
3
4
5
6
7
8
9
10
11
.flex-container {
display: flex;
flex-direction: row;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-container {
flex-direction: column;
}
}

Another way is to change the percentage of the flex property of the flex items to create different layouts for different screen sizes. Note that we also have to include flex-wrap: wrap; on the flex container for this example to work:

Example:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.flex-container {
display: flex;
flex-wrap: wrap;
}

.flex-item-left {
flex: 50%;
}

.flex-item-right {
flex: 50%;
}

/* Responsive layout - makes a one column layout instead of a two-column layout */
@media (max-width: 800px) {
.flex-item-right,
.flex-item-left {
flex: 100%;
}
}

Grid

The CSS Grid Layout Module offers a grid-based layout system, with rows and columns, making it easier to design web pages without having to use floats and positioning.

All CSS Grid Properties:

PropertyDescription
column-gapSpecifies the gap between the columns
gapA shorthand property for the row-gap and the column-gap properties
gridA shorthand property for the grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and the grid-auto-flow properties
grid-areaEither specifies a name for the grid item, or this property is a shorthand property for the grid-row-start, grid-column-start, grid-row-end, and grid-column-end properties
grid-auto-columnsSpecifies a default column size
grid-auto-flowSpecifies how auto-placed items are inserted in the grid
grid-auto-rowsSpecifies a default row size
grid-columnA shorthand property for the grid-column-start and the grid-column-end properties
grid-column-endSpecifies where to end the grid item
grid-column-gapSpecifies the size of the gap between columns
grid-column-startSpecifies where to start the grid item
grid-gapA shorthand property for the grid-row-gap and grid-column-gap properties
grid-rowA shorthand property for the grid-row-start and the grid-row-end properties
grid-row-endSpecifies where to end the grid item
grid-row-gapSpecifies the size of the gap between rows
grid-row-startSpecifies where to start the grid item
grid-templateA shorthand property for the grid-template-rows, grid-template-columns and grid-areas properties
grid-template-areasSpecifies how to display columns and rows, using named grid items
grid-template-columnsSpecifies the size of the columns, and how many columns in a grid layout
grid-template-rowsSpecifies the size of the rows in a grid layout
row-gapSpecifies the gap between the grid rows

Grid Intro

A grid layout consists of a parent element, with one or more child elements. And all direct children of the grid container automatically become grid items.

An HTML element becomes a grid container when its display property is set to grid or inline-grid.

Example:

1
2
3
4
.grid-container {
/*display: grid;*/
display: inline-grid;
}

Properties: row-gap, column-gap, gap

Rows: The horizontal lines of grid items.

Columns: The vertical lines of grid items.

Gaps: The spaces between each column/row.

You can adjust the gap size by using one of the following properties:

  • row-gap
  • column-gap
  • gap: shorthand property for the row-gap and the column-gap properties

Example:

1
2
3
4
5
6
7
8
9
10
11
12
.grid-container1 {
display: grid;
row-gap: 50px;
}
.grid-container2 {
display: grid;
column-gap: 50px;
}
.grid-container3 {
display: grid;
gap: 50px 100px;
}

Properties: grid-row-start, grid-row-end, grid-column-start, grid-column-end

Row lines: The lines between rows.

Column lines: The lines between columns.

Refer to line numbers when placing a grid item in a grid container.

Example:

Place a grid item at row line 1 and column line 1, and let it end on row line 3 and column line 3:

1
2
3
4
5
6
.item1 {
grid-row-start: 1;
grid-row-end: 3;
grid-column-start: 1;
grid-column-end: 3;
}

Grid Container

Property: grid-template-columns

The grid-template-columns property defines the number of columns in your grid layout, and it can define the width of each column.(定义 多少列 + 各列宽度)

The value is a space-separated-list(以空格分隔的列表), where each value defines the width of the respective column.

Example:

If you want your grid layout to contain 4 columns, specify the width of the 4 columns, or auto if all columns should have the same width.

1
2
3
4
.grid-container {
display: grid;
grid-template-columns: auto auto auto auto;
}

Note: If you have more than 4 items in a 4 columns grid, the grid will automatically add a new row to put the items in.

The grid-template-columns property can also be used to specify the size (width) of the columns.

Example:

1
2
3
4
.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

Property: grid-template-rows

The grid-template-rows property defines the height of each row.

The value is a space-separated-list, where each value defines the height of the respective row:

Example:

1
2
3
4
.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

Property: justify-content

The justify-content property is used to align the whole grid inside the container horizontally.

Note: The grid's total width has to be less than the container's width for the justify-content property to have any effect.

Value: space-evenly

The value space-evenly will give the columns equal amount of space between, and around them.

Example:

1
2
3
4
.grid-container {
display: grid;
justify-content: space-evenly;
}

Value: space-around

The value space-around will give the columns equal amount of space around them.

Value: space-between

The value space-between will give the columns equal amount of space between them.

Value: center

The value center will align the grid in the middle of the container.

Value: start

The value start will align the grid at the beginning of the container.

Value: end

The value end will align the grid at the end of the container.

Property: align-content

The align-content property is used to align the whole grid inside the container vertically.

Note: The grid's total height has to be less than the container's height for the align-content property to have any effect.

Value: space-evenly

Value: space-around

Value: space-between

Value: center

Value: start

Value: end

Grid Item

Property: grid-row

The grid-row property defines on which row to place an item.

The grid-row property is a shorthand property for the grid-row-start and the grid-row-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many rows the item will span:

Example:

Make "item1" start on row-line 1 and end on row-line 4:

1
2
3
.item1 {
grid-row: 1 / 4;
}

Make "item1" start on row 1 and span 2 rows:

1
2
3
.item1 {
grid-row: 1 / span 2;
}

Property: grid-column

The grid-column property defines on which column(s) to place an item.

The grid-column property is a shorthand property for the grid-column-start and the grid-column-end properties.

To place an item, you can refer to line numbers, or use the keyword "span" to define how many columns the item will span.

Example:

Make "item1" start on column 1 and end before column 5:

1
2
3
.item1 {
grid-column: 1 / 5;
}

Make "item1" start on column 1 and span 3 columns:

1
2
3
.item1 {
grid-column: 1 / span 3;
}

⭐Property: grid-area

The grid-area property can be used as a shorthand property for the grid-row-start, grid-column-start, grid-row-end and the grid-column-end properties.

Example:

Make "item8" start on row-line 1 and column-line 2, and end on row-line 5 and column line 6:

1
2
3
.item8 {
grid-area: 1 / 2 / 5 / 6;
}

Make "item8" start on row-line 2 and column-line 1, and span 2 rows and 3 columns:

1
2
3
.item8 {
grid-area: 2 / 1 / span 2 / span 3;
}

Property: grid-template-areas

The grid-area property can also be used to assign names to grid items.

Example:

Item1 gets the name "myArea" and spans all five columns in a five columns grid layout:

1
2
3
4
5
6
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea myArea myArea myArea';
}

Let "myArea" span two columns in a five columns grid layout:

1
2
3
4
5
6
.item1 {
grid-area: myArea;
}
.grid-container {
grid-template-areas: 'myArea myArea . . .';
}

Note: A period sign represents a grid item with no name.

To define two rows, define the column of the second row inside another set of apostrophes(撇号):

1
2
3
.grid-container {
grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}

Name all items, and make a ready-to-use webpage template:

1
2
3
4
5
6
7
8
9
10
11
12
.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
grid-template-areas:
'header header header header right right'
'menu main main main right right'
'menu footer footer footer footer footer';
}

由此可知,grid-template-areas可以用于形象化显示每个 item 的占位

☕欲知后事如何,

且听下回分解🍵