闲碎记事本 闲碎记事本
首页
  • JAVA
  • Cloudflare
  • 学完再改一遍UI
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)

YAN

我要偷偷记录...
首页
  • JAVA
  • Cloudflare
  • 学完再改一遍UI
友链
  • 分类
  • 标签
  • 归档
GitHub (opens new window)
  • python

  • vue

  • H5

    • 常用标签
    • CSS学习笔记
    • 媒体查询
    • CSS单位
    • Flex
      • 2D3D
    • C

    • 学习
    • H5
    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/05/22, 07:52:48
    CSS单位
    2D3D

    ← CSS单位 2D3D→

    最近更新
    01
    Caddy操作指南
    04-25
    02
    虚拟机磁盘扩展
    04-22
    03
    Swap空间
    04-22
    更多文章>
    Theme by Vdoing | Copyright © 2022-2025 YAN | MIT License
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式