Featured image of post 【CSS Flex】比较不同的 flex 容器属性: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content
CSS 前端工程师

【CSS Flex】比较不同的 flex 容器属性: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

【CSS Flex】比较不同的 flex 容器属性: display, flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

Photo by Pankaj Patel on Unsplash

  • display
  • flex-flow
  • flex-direction
  • flex-wrap
  • justify-content
  • align-items
  • align-content

display

.flex_container {
    display:flex;
    /* inline-box + flex */
    display: inline-flex;
}

flex-direction

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-direction

.flex_container {
    /* The direction text is laid out in a line */
    flex-direction: row;

    /* Like <row>, but reversed */
    flex-direction: row-reverse;

    /* The direction in which lines of text are stacked */
    flex-direction: column;

    /* Like <column>, but reversed */
    flex-direction: column-reverse;

    /* Global values */
    flex-direction: inherit;
    flex-direction: initial;
    flex-direction: revert;
    flex-direction: revert-layer;
    flex-direction: unset;
}

flex-direction: row;

1
2
3 
<div style="width:7rem; height: 7rem; display:flex; flex-direction: row" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

flex-direction: row-reverse;

1
2
3 
<div style="width:7rem; height: 7rem; display:flex; flex-direction: row-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

flex-direction: column;

1
2
3 
<div style="width:7rem; height: 7rem; display:flex; flex-direction: column;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

flex-direction: column-reverse;

1
2
3 
<div style="width:7rem; height: 7rem; display:flex; flex-direction: column-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

flex-wrap

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

.flex_container {
    flex-wrap: nowrap; /* Default value */
    flex-wrap: wrap;
    flex-wrap: wrap-reverse;

    /* Global values */
    flex-wrap: inherit;
    flex-wrap: initial;
    flex-wrap: revert;
    flex-wrap: revert-layer;
    flex-wrap: unset;
}

flex-wrap: wrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: wrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-wrap: nowrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: nowrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
        5
    </div>
</div>

flex-wrap: wrap-reverse;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-wrap: wrap-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow

https://developer.mozilla.org/en-US/docs/Web/CSS/flex-flow

Short name for the flex-direction and flex-wrap

.flex_container {
    /* flex-flow: <'flex-direction'> */
    flex-flow: row;
    flex-flow: row-reverse;
    flex-flow: column;
    flex-flow: column-reverse;

    /* flex-flow: <'flex-wrap'> */
    flex-flow: nowrap;
    flex-flow: wrap;
    flex-flow: wrap-reverse;

    /* flex-flow: <'flex-direction'> and <'flex-wrap'> */
    flex-flow: row nowrap;
    flex-flow: column wrap;
    flex-flow: column-reverse wrap-reverse;

    /* Global values */
    flex-flow: inherit;
    flex-flow: initial;
    flex-flow: revert;
    flex-flow: revert-layer;
    flex-flow: unset;
}

flex-flow:row wrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row wrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:row wrap-reverse;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row wrap-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:row nowrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row nowrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
        5
    </div>
</div>

flex-flow:column wrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow: column wrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:column wrap-reverse;

1
2
3
4
5 

<div style="width:7rem; height: 7rem; display:flex; flex-flow: column wrap-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:column nowrap;

1
2
3
4
5 
<div style="display:flex; flex-flow: column nowrap; width:7rem; height: 7rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:row-reverse wrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse wrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:row-reverse wrap-reverse;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse wrap-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:row-reverse nowrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:row-reverse nowrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100 flex-none">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200 flex-none">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300 flex-none">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400 flex-none">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500 flex-none">
        5
    </div>
</div>

flex-flow:column-reverse wrap;

1
2
3
4
5 
<div style="width:7rem; height: 7rem; display:flex; flex-flow:column-reverse wrap;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:column-reverse wrap-reverse;

1
2
3
4
5 

<div style="width:7rem; height: 7rem; display:flex; flex-flow:column-reverse wrap-reverse;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

flex-flow:column-reverse nowrap;

1
2
3
4
5 
<div style="display:flex; flex-flow:column-reverse nowrap; width:7rem; height: 7rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-500">
        5
    </div>
</div>

justify-content

https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content

Main-axis

.flex_container {
    /* Positional alignment */
    justify-content: center;     /* Pack items around the center */
    justify-content: start;      /* Pack items from the start */
    justify-content: end;        /* Pack items from the end */
    justify-content: flex-start; /* Pack flex items from the start */
    justify-content: flex-end;   /* Pack flex items from the end */
    justify-content: left;       /* Pack items from the left */
    justify-content: right;      /* Pack items from the right */

    /* Baseline alignment */
    /* justify-content does not take baseline values */

    /* Normal alignment */
    justify-content: normal;

    /* Distributed alignment */
    justify-content: space-between; /* Distribute items evenly
                                    The first item is flush with the start,
                                    the last is flush with the end */
    justify-content: space-around;  /* Distribute items evenly
                                    Items have a half-size space
                                    on either end */
    justify-content: space-evenly;  /* Distribute items evenly
                                    Items have equal space around them */
    justify-content: stretch;       /* Distribute items evenly
                                    Stretch 'auto'-sized items to fit
                                    the container */

    /* Overflow alignment */
    justify-content: safe center;
    justify-content: unsafe center;

    /* Global values */
    justify-content: inherit;
    justify-content: initial;
    justify-content: revert;
    justify-content: revert-layer;
    justify-content: unset;
}

justify-content: center;

1
2
3 
<div style="display:flex; justify-content: center;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: start;

1
2
3 
<div style="display:flex; justify-content: start;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: end;

1
2
3 
<div style="display:flex; justify-content: end;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: flex-start;

1
2
3 
<div style="display:flex; justify-content: flex-start;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: flex-end;

1
2
3 
<div style="display:flex; justify-content: flex-end;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: left;

1
2
3 
<div style="display:flex; justify-content: left;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: right;

1
2
3 
<div style="display:flex; justify-content: right;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: space-between;

1
2
3 
<div style="display:flex; justify-content: space-between;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: space-around;

1
2
3 
<div style="display:flex; justify-content: space-around;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: space-evenly;

1
2
3 
<div style="display:flex; justify-content: space-evenly;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

justify-content: stretch;

1
2
3 
<div style="display:flex; justify-content: stretch;  width:11rem; height:11rem;" class="bg-slate-400">
    <div style="width:2rem; height: 2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 2rem;" class="bg-red-300">
        3
    </div>
</div>

align-items

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items

Cross-axis

.flex_container {
    /* Basic keywords */
    align-items: normal;
    align-items: stretch;

    /* Positional alignment */
    /* align-items does not take left and right values */
    align-items: center; /* Pack items around the center */
    align-items: start; /* Pack items from the start */
    align-items: end; /* Pack items from the end */
    align-items: flex-start; /* Pack flex items from the start */
    align-items: flex-end; /* Pack flex items from the end */

    /* Baseline alignment */
    align-items: baseline;
    align-items: first baseline;
    align-items: last baseline; /* Overflow alignment (for positional alignment only) */
    align-items: safe center;
    align-items: unsafe center;

    /* Global values */
    align-items: inherit;
    align-items: initial;
    align-items: revert;
    align-items: revert-layer;
    align-items: unset;
}

align-items: normal;

1
2
3
4
5 
<div style="display:flex; align-items: normal; flex-wrap:wrap;  width:7rem; height:7rem;" class="bg-slate-400">
    <div style="width:2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem;" class="bg-red-500">
        5
    </div>
</div>

align-items: stretch;

1
2
3
4
5 
<div style="display:flex; align-items: stretch; flex-wrap:wrap;  width:7rem; height:7rem;" class="bg-slate-400">
    <div style="width:2rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem;" class="bg-red-500">
        5
    </div>
</div>

align-items: center;

1
2
3
4
5
6 
<div style="display:flex; align-items: center; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-items: start;

1
2
3
4
5
6 
<div style="display:flex; align-items: start; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-items: end;

1
2
3
4
5
6 
<div style="display:flex; align-items: end; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-items: flex-start;

1
2
3
4
5
6 
<div style="display:flex; align-items: flex-start; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-items: flex-end;

1
2
3
4
5
6 
<div style="display:flex; align-items: flex-end; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-items: baseline;

1
2
3
4
5
6 
<div style="display:flex; align-items: baseline; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content

.flex_container {
    /* Basic positional alignment */
    /* align-content does not take left and right values */
    align-content: center;     /* Pack items around the center */
    align-content: start;      /* Pack items from the start */
    align-content: end;        /* Pack items from the end */
    align-content: flex-start; /* Pack flex items from the start */
    align-content: flex-end;   /* Pack flex items from the end */

    /* Normal alignment */
    align-content: normal;

    /* Baseline alignment */
    align-content: baseline;
    align-content: first baseline;
    align-content: last baseline;

    /* Distributed alignment */
    align-content: space-between; /* Distribute items evenly
                                    The first item is flush with the start,
                                    the last is flush with the end */
    align-content: space-around;  /* Distribute items evenly
                                    Items have a half-size space
                                    on either end */
    align-content: space-evenly;  /* Distribute items evenly
                                    Items have equal space around them */
    align-content: stretch;       /* Distribute items evenly
                                    Stretch 'auto'-sized items to fit
                                    the container */

    /* Overflow alignment */
    align-content: safe center;
    align-content: unsafe center;

    /* Global values */
    align-content: inherit;
    align-content: initial;
    align-content: revert;
    align-content: revert-layer;
    align-content: unset;
}

align-content: center;

1
2
3
4
5
6 
<div style="display:flex; align-content: center; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: start;

1
2
3
4
5
6 
<div style="display:flex; align-content: start; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: end;

1
2
3
4
5
6 
<div style="display:flex; align-content: end; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: flex-start;

1
2
3
4
5
6 
<div style="display:flex; align-content: flex-start; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: flex-end;

1
2
3
4
5
6 
<div style="display:flex; align-content: flex-end; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: space-between;

1
2
3
4
5
6 
<div style="display:flex; align-content: space-between; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: space-around;

1
2
3
4
5
6 
<div style="display:flex; align-content: space-around; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: space-evenly;

1
2
3
4
5
6 
<div style="display:flex; align-content: space-evenly; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

align-content: stretch;

1
2
3
4
5
6 
<div style="display:flex; align-content: stretch; flex-wrap:wrap;  width:7rem; height:22rem;" class="bg-slate-400">
    <div style="width:2rem; height: 5rem;" class="bg-red-100">
        1
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-200">
        2
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-300">
        3
    </div>
    <div style="width:2rem; height: 5rem;" class="bg-red-400">
        4
    </div>
    <div style="width:2rem; height: 3rem;" class="bg-red-500">
        5
    </div>
    <div style="width:2rem; height: 7rem;" class="bg-red-600">
        6
    </div>
</div>

Reference

Tailwind

Donate KJ 贊助作者喝咖啡

如果這篇文章對你有幫助的話，可以透過下面支付方式贊助作者喝咖啡，如果有什麼建議或想說的話可以贊助並留言給我
If this article has been helpful to you, you can support the author by treating them to a coffee through the payment options below. If you have any suggestions or comments, feel free to sponsor and leave a message for me!
方式 Method 贊助 Donate
PayPal https://paypal.me/kejyun
綠界 ECPay https://p.ecpay.com.tw/AC218F1
歐付寶 OPay https://payment.opay.tw/Broadcaster/Donate/BD2BD896029F2155041C8C8FAED3A6F8
© 2021 - 2024 KJ Dev
All rights reserved，未經允許不得隨意轉載
Built with Hugo
主题 Stack 由 Jimmy 设计