zoukankan      html  css  js  c++  java
  • flex容器

    /* 定义flex容器 */
    display: flex;

    /*
    设置容器内部元素的排列方向
    row: 定义排列方向 从左到右
    row-reverse: 从右到左
    column: 从上到下
    column-reverse: 从下到上
    */
    flex-direction: column;

    /**
    nowrap: 不换行
    wrap: 换行
    wrap-reverse: 逆向换行
    */
    flex-wrap: wrap;

    /*
    当轴线超过1条的时候,flex容器可以把多条轴线视为元素对待,可以进行对齐
    center:居中
    flex-start: 向左对齐
    flex-end: 向右对齐
    stretch: 当宽度width没有设置的时候,轴线可以被拉伸
    space-between: 两端对齐,元素之间的空白等比切分
    space-around: 轴线两边的空白等比切分
    */
    align-content: space-around;

    /*
    设置容器中元素在交叉轴上的对齐方式
    stretch:(默认)当元素的高度没有设置,则元素的高度会拉伸至容器高度一致
    flex-start: 在交叉轴上向起点位置(向上/向左)对齐
    flex-end: 在交叉轴上向结束位置(向下/向右)对齐
    center: 居中对齐
    baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
    */
    align-items: baseline;

    /*
    设置元素在主轴上的对其方式
    flex-start: (默认)左对齐 或者 向上对齐
    flex-end: 右对齐 或者 向下对齐
    center: 居中对齐
    space-between: 两端对齐,元素之间平均等分剩余空白间隙部分
    space-around: 元素两边平均等分剩余空白间隙部分,最左(上)或最右(下)和元素之间距离是1:2
    */
    justify-content: space-between;

    /*
    重写容器中元素在交叉轴上的对齐方式
    auto: 默认,表示继承父级元素的align-items属性
    stretch:当元素的高度没有设置,则元素的高度会拉伸至容器高度一致
    flex-start: 在交叉轴上向起点位置(向上/向左)对齐
    flex-end: 在交叉轴上向结束位置(向下/向右)对齐
    center: 居中对齐
    baseline: 保证元素中的文字在同一条基准线(保证每个文字都在同一条线上)
    */
    align-self: stretch;

    /*
    order: 用于设置flex容器内部的每个元素的排列顺序,默认是0
    排序规则,由小到大
    flex-grow: 用于设置元素的放大比例,默认为0
    如果为0,则不放大
    flex-shrink: 用于定义属性的缩放比例,默认为1
    设置为0的时候,不进行缩放
    */

    order: 0; 
    flex-grow: 2; 
    flex-shrink: 0;

  • 相关阅读:
    一些 SQLite技巧
    linux增加swap空间
    linux解压命令
    数据库常用语句
    服务器命令
    Clickhouse高可用配置总结
    MySQL笔记
    Linux查看硬件信息
    Greenplum安装
    ClickHouse学习笔记
  • 原文地址:https://www.cnblogs.com/m653458252/p/12936443.html
Copyright © 2011-2022 走看看