TyrangYang_Blog
Posts Tags Categories
TyrangYang_Blog

Contents

Flex and Grid in CSS

Haolin Yang included in Posts
   1426 words   7 minutes 

Flex

Cheat Sheet provide by CSS-tricks.com

A Flexbox code Example

display

1
2
3

.container {
    display: flex;
}

flex-direction

1
2
3

.container {
    flex-direction: row | row-reverse | column | column-reverse;
}

flex-direction

flex-warp

1
2
3

.container {
    flex-wrap: nowrap | wrap | wrap-reverse;
}

flex-wrap

flex-flow

This is a shorthand for the flex-direction and flex-wrap properties.

1
2
3

.container {
    flex-flow: column wrap;
}

order

1
2
3

.item {
    order: 5; /* default is 0 */
}

order

flex-grow

This defines the ability for a flex item to grow when there is extra space from container.

0 means fix

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.container {
    display: flex;
    width: 1100px;
}
.item-1 {
    flex-basis: 100px;
    flex-grow: 1; /* default 0 */
    /* Negative numbers are invalid */
}

.item-2 {
    flex-basis: 100px;
    flex-grow: 2;
}

.item-3 {
    flex-basis: 100px;
    flex-grow: 1;
}

In this example, container is 1100px, item base width is 100px. The left space is 1100 - 100 * 3 = 800. This 800px will base on the proportion 1 : 2 : 1 to distribute to each item.

800 / 4 = 200 the final with will be 300px (100+200); 500px (100+400); 300px

flex-grow

flex-shrink

This defines the ability for a flex item to shrink when item size overflow.

0 means fix

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

.container {
    display: flex;
    width: 300px;
}
.item-1 {
    flex-basis: 300px;
    flex-shrink: 1; /* default 1 */
    /* Negative numbers are invalid */
}

.item-2 {
    flex-basis: 300px;
    flex-shrink: 2; /* default 1 */
}

In this example, item will overflow 300 * 2 - 300= 300px.item will shrink base on the proportion 1 : 2. Item will be 200px (300-100); 100px(300-200)

flex-basis

This defines the default size of an element before the remaining space is distributed.

If set to auto, it will take width as starting size to distribute space. If set to a number, it will take the given number as starting size to distribute space.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

.item {
    flex-basis: 300px;
}

// equivalent to

.item {
    width: 300px;
    flex-basis: auto;
}

If set to 0, the item actual width will be decided by space distribution only. Because this item is no space at beginning.

1
2
3

.item {
    flex-basis: 0;
}

0 vs auto after distribute space

If set to 0, the extra space around content isn’t factored in. If set to auto, the extra space is distributed based on its flex-grow value.

All space distributed vs Extra space distributed

flex

This is the shorthand for flex-grow, flex-shrink and flex-basis combined.

Default is 0 1 auto

1
2
3

.item {
    flex: none | [ < 'flex-grow' > < 'flex-shrink' >? || < 'flex-basis' >];
}

flex: 1

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.item {
    flex: 1;
}
// equivalent to
.item {
    flex: 1 0 0;
}
// equivalent to
.item {
    flex-grow: 1;
    flex-shrink: 0;
    flex-basis: 0;
}

This is a common styling that given to an item which can take all the extra space for a flexbox.

We analysis this line and see why it is work. item starting from 0 size, Not shrink and take extra space for 1 proportion. If no other item give flex-grow(default is 0), this item will take all extra space

justify-content

This defines the alignment along the main axis.

1
2
3
4
5

.container {
    justify-content: flex-start | flex-end | center | space-between |
        space-around | space-evenly | start | end | left | right... + safe |
        unsafe;
}

justify-content

align-content

This aligns a flex container’s lines within when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.

align-content

align-items

1
2
3
4
5

.container {
    align-items: stretch | flex-start | flex-end | center | baseline | first
        baseline | last baseline | start | end | self-start | self-end +... safe
        | unsafe;
}

align-items

align-self

This allows the alignment to be overridden for individual flex items.

1
2
3

.item {
    align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

align-self

grid

Cheat Sheet provide by CSS-tricks.com

A Grid code Example

display

1
2
3

.container {
    display: grid | inline-grid;
}

grid-template-columns & grid-template-rows

values:

  • <track-size> – can be a length, a percentage, or a fraction of the free space in the grid (using the fr unit)
  • <line-name> – an arbitrary name of your choosing
1
2
3
4

.container {
    grid-template-columns: ... | ...;
    grid-template-rows: ... | ...;
}

Example:

1
2
3
4

.container {
    grid-template-columns: 40px 50px auto 50px 40px;
    grid-template-rows: 25% 100px auto;
}

grid example

If assign name to each line:

1
2
3
4

.container {
    grid-template-columns: [first] 40px [line2] 50px [line3] auto [col4-start] 50px [five] 40px [end];
    grid-template-rows: [row1-start] 25% [row1-end] 100px [third-line] auto [last-line];
}

grid example

grid-column & grid-row

Determines a grid item’s location within the grid by referring to specific grid lines.

1
2
3
4

.item {
    grid-column: <start-line> / <end-line> | <start-line> / span <value>;
    grid-row: <start-line> / <end-line> | <start-line> / span <value>;
}

Example:

1
2
3
4

.item {
    grid-column: 3 / span 2; /* or 3/5 or line3/line5 */
    grid-row: third-line / 4; /* or 3/4 or 3/span 2 */
}

grid-column-row

grid-template-areas & grid-area

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

.container {
    display: grid;
    grid-template-columns: 50px 50px 50px 50px;
    grid-template-rows: auto;
    grid-template-areas:
        'header header header header'
        'main main . sidebar'
        'footer footer footer footer';
}
.item-a {
    grid-area: header;
}
.item-b {
    grid-area: main;
}
.item-c {
    grid-area: sidebar;
}
.item-d {
    grid-area: footer;
}

grid-template-area

grid-template

A shorthand for setting grid-template-rows, grid-template-columns, and grid-template-areas in a single declaration.

1
2
3
4
5
6

.container {
    grid-template:
        'header header header header' 1fr
        'main main . sidebar' 1fr
        'footer footer footer footer' 1fr / 1fr 1fr 1fr 1fr;
}

gap (grid-gap)

1
2
3
4
5
6
7

.container {
    gap: 15px 10px;

    /*equal to*/
    row-gap: 15px;
    column-gap: 10px;
}

grid-gap

justify-items

1
2
3

.container {
    justify-items: start | end | center | stretch;
}

justify-items-center

justify-items-start

justify-items-end

justify-items-stretch

align-items

1
2
3

.container {
    align-items: start | end | center | stretch;
}

align-items-center

align-items-start

align-items-end

align-items-stretch

place-items

place-items sets both the align-items and justify-items properties in a single declaration.

justify-content

1
2
3
4

.container {
    justify-content: start | end | center | stretch | space-around |
        space-between | space-evenly;
}

justify-content-center

justify-content-start

justify-content-end

justify-content-stretch

justify-content-space-around

justify-content-space-between

justify-content-space-evenly

align-content

1
2
3
4

.container {
    align-content: start | end | center | stretch | space-around | space-between
        | space-evenly;
}

align-content-center

align-content-start

align-content-end

align-content-stretch

align-content-space-around

align-content-space-between

align-content-space-evenly

place-content

place-content sets both the align-content and justify-content properties in a single declaration.

justify-self

1
2
3

.item-a {
    justify-self: start | end | center | stretch;
}

justify-self-center

justify-self-start

justify-self-end

justify-self-stretch

grid-auto-columns & grid-auto-rows

Specifies the size of any auto-generated grid tracks (aka implicit grid tracks).

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

.container {
    grid-template-columns: 60px 60px;
    grid-template-rows: 90px 90px;
}
.item-a {
    grid-column: 1 / 2;
    grid-row: 2 / 3;
}
.item-b {
    grid-column: 5 / 6;
    grid-row: 2 / 3;
}

explicit grid

If use grid-auto-columns:

1
2
3

.container {
    grid-auto-columns: 60px;
}

implicit grid

grid-auto-flow

If you have grid items that you don’t explicitly place on the grid, the auto-placement algorithm kicks in to automatically place the items.

1
2
3

.container {
    grid-auto-flow: row | column | row dense | column dense;
}

Example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.container {
    display: grid;
    grid-template-columns: 60px 60px 60px 60px 60px;
    grid-template-rows: 30px 30px;
    grid-auto-flow: column;
}

.container div {
    border: 1px #ccc solid;
}

.item-a {
    grid-column: 1;
    grid-row: 1 / 3;
}
.item-e {
    grid-column: 5;
    grid-row: 1 / 3;
}

implicit grid

1
2
3

.container {
    grid-auto-flow: column;
}

implicit grid

grid

A shorthand for setting all of the following properties in a single declaration: grid-template-rows, grid-template-columns, grid-template-areas, grid-auto-rows, grid-auto-columns, and grid-auto-flow

The Most Powerful Lines in Grid

1
2
3

.container {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
Updated on 2020-08-18
Read Markdown
 css, grid, flex
Back | Home