闲碎记事本
Yan
2023-04-18
目录

Flex

关于Flex布局的内容整理以及实际编码

# 属性

属性 值 描述
flex-direction 设置主轴方向
row 左到右
row-reverse 右到左
column 上到下
column-reverse 下到上
justify-content 设置主轴上的子元素排列方式
flex-start 头部开始
flex-end 尾部开始
center 中间对齐
space-around 平分剩余空间
space-between 两边贴边，然后平分剩余空间
align-items 设置侧轴上的子元素排列方式 (单行)
flex-start 头部开始
flex-end 尾部开始
center 中间对齐
baseline 基线对齐
flex-wrap 设置子元素是否换行
nowrap 不换行
wrap 换行
align-content 设置侧轴上的子元素的排列方式 (多行)
flex-start 头部开始
flex-end 尾部开始
center 中间对齐
space-around 平分剩余空间
space-between 两边贴边，然后平分剩余空间
baseline 基线对齐
stretch 子项高度平分父元素高度
flex-flow 复合属性，相当于同时设置了flex-direction和flex-wrap
flex 分配剩余空间份额
align-self 控制子项自己在侧轴上的排列方式
可覆盖align-items
属性默认值为auto表示继父元素的align-items属性
如果没有父元素，则等同于stretch
order 数值越小，排列越靠前

# CSS

公共CSS 


.flex{
    text-align: center;
    margin: 10px 0;
    border: 1px  #186071 solid;
}

.flex :nth-child(2n){
    background: #2edccd;
}

.flex :nth-child(2n+1){
    background: #3ea0d9;
}

.flex-box-row {
    display: flex;
    flex-direction: row;
    height: 130px;
}

.flex-box-column  {
    display: flex;
    flex-direction: column;
    width: 100px;
    height: 400px;
}


.item{
    width: 50px;
    height: 50px;
    line-height: 50px;
}

# 主轴方向column

flex-direction: column

1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
1
2
3
4
5
查看HTML代码 

<div style="display: flex;flex-direction: row;justify-content: space-between">


    <div class="flex flex-box-column" style="justify-content: flex-start">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>


    <div class="flex flex-box-column" style="justify-content: flex-end">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>

    <div class="flex flex-box-column" style="flex-direction: column-reverse">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>


    <div class="flex flex-box-column" style="flex-direction: row;flex-wrap: wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
    
    <div class="flex flex-box-column" style="flex-direction: row-reverse;flex-wrap: wrap">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>


    <div class="flex flex-box-column" style="justify-content: space-around">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>


    <div class="flex flex-box-column" style="justify-content: space-between">
        <div class="item">1</div>
        <div class="item">2</div>
        <div class="item">3</div>
        <div class="item">4</div>
        <div class="item">5</div>
    </div>
</div>

# 主轴方向row

flex-direction: row

# 主轴

# 顺主轴排列 左->右

默认:flex-direction: row

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 逆主轴排列 右->左

flex-direction: row-reverse

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="flex-direction: row-reverse">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 上->下

flex-direction: column

1
2
3
4
5
6
查看HTML代码 

<div class="flex flex-box-row" style="flex-direction: column;flex-wrap: wrap;align-content: space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
# 下->上

flex-direction: column-reverse

1
2
3
4
5
6
查看HTML代码 

<div class="flex flex-box-row" style="flex-direction: column-reverse;flex-wrap: wrap;align-content: space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
    <div class="item">6</div>
</div>
# 主轴居中

justify-content: center

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: center">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 主轴起点开始排列

justify-content: flex-start

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: left">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 主轴终点开始排列

justify-content: flex-end

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 平均分配主轴空间

justify-content: space-around

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: space-around">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 两端对齐，平均分配空间

justify-content: space-between

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: space-between">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

# 侧轴

# 起始位置对齐

align-items: flex-start

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: center;align-items: flex-start">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 居中对齐

align-items: center

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: center;align-items: center">
    <div class="item" style="height: 40px">1</div>
    <div class="item" style="height: 60px">2</div>
    <div class="item" style="height: 90px">3</div>
    <div class="item" style="height: 60px">4</div>
    <div class="item" style="height: 40px">5</div>
</div>
# 文字基线对齐

align-items: baseline

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: center;align-items: baseline">
    <div class="item" style="height: 40px">1</div>
    <div class="item" style="height: 60px">2</div>
    <div class="item" style="height: 90px">3</div>
    <div class="item" style="height: 60px">4</div>
    <div class="item" style="height: 40px">5</div>
</div>
# 结束位置对齐

align-items: flex-end

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: center;align-items: flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 不换行

align-items: center

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: flex-start;align-items: flex-start;width: 150px">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 换行

flex-wrap: wrap

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: flex-start;width: 150px;flex-wrap: wrap">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>
# 换行侧轴排列

flex-wrap: wrap

align-content: flex-end

1
2
3
4
5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: flex-start;align-items: flex-start;width: 150px;flex-wrap: wrap;align-content: flex-end">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
    <div class="item">4</div>
    <div class="item">5</div>
</div>

# 子项

# 子项侧轴排列

flex-wrap: wrap

align-self: center

1
3
4
5
查看HTML代码 
<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="align-self: flex-end">1</div>
    <div class="item" style="align-self: self-start">3</div>
    <div class="item" style="align-self: flex-start">4</div>
    <div class="item" style="align-self: center">5</div>
</div>
# 序列

order

1
2
3
4
5
查看HTML代码 
<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="order: 5">1</div>
    <div class="item" style="order: 4">2</div>
    <div class="item" style="order: 3">3</div>
    <div class="item" style="order: 2">4</div>
    <div class="item" style="order: 1">5</div>
</div>
# 分配空间份额

flex

1份
2份
3份
1份
1份
查看HTML代码 
<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="flex: 1">1份</div>
    <div class="item" style="flex: 2">2份</div>
    <div class="item" style="flex: 3">3份</div>
    <div class="item" style="flex: 1">1份</div>
    <div class="item" style="flex: 1">1份</div>
</div>
# 占用固定空间

flex-basis: 300px

1份
2份
3份
1份
固定占300
查看HTML代码 
<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="flex: 1">1份</div>
    <div class="item" style="flex: 2">2份</div>
    <div class="item" style="flex: 3">3份</div>
    <div class="item" style="flex: 1">1份</div>
    <div class="item" style="flex-basis: 300px">固定占300</div>
</div>
# 放大

1 ： flex-grow: 2

其余 ： flex-grow: 1

放大5
放大4
放大3
放大2
放大5
正常
查看HTML代码 
<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="flex-grow: 5">放大5</div>
    <div class="item" style="flex-grow: 4">放大4</div>
    <div class="item" style="flex-grow: 3">放大3</div>
    <div class="item" style="flex-grow: 2">放大2</div>
    <div class="item" style="flex-grow: 1">放大5</div>
    <div class="item" style="flex-grow: 0">正常</div>
</div>
# 缩小

1 ： flex-shrink: 0

其余 ： flex-grow: 1

不缩小
缩小1
缩小2
缩小3
缩小4
缩小5
查看HTML代码 

<div class="flex flex-box-row" style="justify-content: flex-start;">
    <div class="item" style="flex-shrink: 0;width:200px">不缩小</div>
    <div class="item" style="flex-shrink: 1;width:200px">缩小1</div>
    <div class="item" style="flex-shrink: 2;width:200px">缩小2</div>
    <div class="item" style="flex-shrink: 3;width:200px">缩小3</div>
    <div class="item" style="flex-shrink: 4;width:200px">缩小4</div>
    <div class="item" style="flex-shrink: 5;width:200px">缩小5</div>
</div>
上次更新: 2025/06/25, 10:37:22
CSS单位
2D3D

← 2D3D→

最近更新
01
Caddy操作指南
04-25
02
虚拟机磁盘扩展
04-22
03
Swap空间
04-22
更多文章>
Theme by Vdoing | Copyright © 2022-2025 YAN | MIT License