zoukankan      html  css  js  c++  java
  • Flex布局介绍

    传统的布局解决方案--盒状模型--diplay + position + float

    缺陷:对于一些特殊布局(垂直居中)和网格式布局(几行几列)不易实现

    09年W3C颁布的--flex布局--使用简单、API完整丰富、响应式动态地实现各种页面布局(一些常见的布局思想)

    当然针对Gekco30+以下,最好的布局选择就是flex了,更新式的Grid布局它不支持。

    本文来源地:https://css-tricks.com/snippets/css/a-guide-to-flexbox/ ,一个非常好的CSS内容及前端资讯的网站

    Flex

    Flexible Box弹性布局

    任意容器都可以指定成flex布局:

    .box {
      display: flex;
    }
    <!-- 行内元素 -->
    .box {
      display: inline-flex;
    }
    

    设为flex布局后,子元素的float、clear、vertical-align将失效

    称采用Flex布局的元素为Flex容器(flex container),它的所有子元素自动成为容器成员,称为Flex项目(flex item)。

    flex container

    • 两根轴:
    • 水平主轴 main axis
      • 主轴与边框的左右交叉点 main start/main end
    • 垂直交叉轴 cross axis
      • 交叉轴与边框的上下交叉点 cross start/cross end
    • 项目(flex item)默认沿主轴排列,单项目占据的主轴空间/交叉轴空间 main size/cross size

    flex容器属性

    1. flex-direction 决定主轴方向=项目排列方向
    2. flex-wrap 定义如何换行
    3. flex-flow 它是flex-direction和flex-wrap的简写形式,语法糖
    4. justify-content 定义项目在主轴上的对齐方式
    5. align-items 定义项目在交叉轴上的对齐方式
    6. align-content 定义多根轴线的对齐方式。若项目只有一根轴线则不生效。

    1.flex-direction值:

    • row(默认值) 主轴为水平方向,起点在左端
    • row-reverse 主轴为水平方向,起点在右端
    • column 主轴为垂直方向,起点在左端
    • column-reverse 主轴为垂直方向,起点在右端

    flex-direction

    2.flex-wrap值:

    • nowrap(默认) 不换行

    nowrap

    • wrap 换行,第一行在上方

    wrap

    • wrap-reverse 换行,第一行在下方

    wrap-reverse

    默认情况,所有flex项目会排在一条线上,不会自动换行

    3.flex-flow默认值:row nowrap

    .box {
      flex-flow: <flex-direction> <flex-wrap>;
    }
    

    4.justify-content值:

    • flex-start(默认值) 左对齐

    flex-start

    • flex-end 右对齐

    flex-end

    • center 居中

    center

    • space-between 两端对其,项目间间隔相等

    space-between

    • space-around 单个项目两侧的间隔相等,故项目间间隔相比项目与边框间间隔多一倍

    space-around

    5.align-items值:

    • strech(默认值) 如果flex项目未设置高度或设置高度为auto,将占满整个容器的高度

    strech

    • flex-start 交叉轴起点处对齐

    flex-start

    • flex-end 交叉轴终点处对齐

    flex-end

    • center 交叉轴中点处对齐

    center

    • baseline 项目第一行文字的基线对齐

    baseline

    6.align-content值:

    • strech(默认值)

    strech

    • flex-start

    flex-start

    • flex-end

    flex-end

    • center

    center

    • space-between 与交叉轴两端对齐,轴线间间隔平均分布

    space-between

    • space-around 单轴线两侧间隔相等。轴线间间隔比轴边间隔大一倍

    space-around

    flex项目属性

    • order 定义项目排列顺序。数值越小,排列越靠前,默认为0
    .item {
      order: <integer>;
    }
    

    order


    • flex-grow 定义项目放大比例,默认为0

    如果所有项目flex-grow属性为1,它们将等分剩余空间。以此类推

    flex-grow


    • flex-shrink 定义项目缩小比例,默认为1

    如果所有项目flex-shrink属性为1,当空间不足时等比例缩小。
    如果有一个项目flex-shrink为0,其他项目都为1,空间不足时前者不缩小

    flex-shink


    • flex-basis 定义在分配多余空间前,项目占据的主轴空间(main size)

    浏览器据此计算主轴是否有多余空间,默认值为auto即项目本来的大小

    .item {
      flex-basis: <length> | auto;
    }
    

    • flex 是flex-grow,flex-shink,flex-basis的简写,语法糖,默认值0,1,auto,后两者可选
    .item {
      flex: none | [<flex-grow> <flex-shrink> ? || <flex-basis>]
    }
    

    有两个快捷值:

    auto: 1 1 auto

    none: 0 0 auto

    建议优先使用此属性代替单独写3个分离的属性,因为浏览器会推算相关值。


    • align-self 允许单个项目与其他项目不一样的对齐方式,可覆盖align-items属性

    默认值auto,表示继承父元素的align-items,如果没有父元素则等同于strech

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

    align-self

  • 相关阅读:
    SOA the new OOP?
    请教一个程序装入执行的问题!
    程序员,如何选择合适的程序语言
    题解 P2387 【[NOI2014]魔法森林】
    题解 P4197 【Peaks】
    货车运输
    线段树合并
    jvm系列五java内存模型(2)
    jvm系列一什么是jvm
    jvm系列二内存结构
  • 原文地址:https://www.cnblogs.com/hencins/p/10123178.html
Copyright © 2011-2022 走看看