精华内容
下载资源
问答
  • 弹性盒子

    2020-12-21 19:46:49
    弹性盒子弹性盒子的概念弹性盒子的声明属性flex-directionflex-wrapjustify-contentalign-items弹性元素 align-self属性flex-growflex-shrinkflex-basis文本节点也可以被弹性布局操控绝对定位元素不参与弹性布局 ...

    弹性盒子

    弹性盒子的概念

    • 弹性盒子与弹性元素
    • 弹性盒子:指的是使用display:flex或display:inline-flex声明的容器
    • 弹性元素:指的是弹性盒子中的子元素。
    • 主轴与侧轴(交叉轴)
      主轴方向:为子元素排列的方向。可以通过flex-direction改变。
      侧轴方向:与主轴方向垂直,为子元素的换行方向。可以通过flex-wrap改变。
    • 弹性盒子的作用:
      在传统的页面布局排序时,用绝对定位,
      现在用 flex:flexible box 弹性盒子。可以轻松控制元素的排列,对齐和顺序。
      在这里插入图片描述

    弹性盒子的声明

    • 声明定义:使用display:flex或display:inline-flex 声明一个容器为弹性盒子。这个容器中的子元素们,会遵循弹性布局。
    • 【注】一般是使用display:flex. inline-flex极少用。
      flex:如果没有为父元素设置宽,默认为100%;
      inline-flex:如果没有设置宽,,默认为所有子元素的宽的和。
      在这里插入图片描述

    属性

    flex-direction

    • 定义:用于设置盒子中的子元素排列方向
    • 属性值:
      row 从左到右水平排列子元素(默认值)
      column 从上往下垂直排列子元素
      row-reverse 从右到左排列子元素
      column-reverse 从下往上垂直排列子元素

      在这里插入图片描述子元素排成一行 row
      在这里插入图片描述子元素从右往左排一行

    在这里插入图片描述子元素排成一列 column
    在这里插入图片描述子元素从下往上排成一列

    flex-wrap

    • 规定flex容器是单行还是多行,是否换行
      nowrap:不换行(默认值)
      wrap:换行
      wrap-reverse 反向换行。
    • flex-flow
      是flex-direction与flex-wrap的组合写法。
      flex-flow:flex-direction flex-wrap;
      在这里插入图片描述

    justify-content

    • 定义:用于控制弹性元素在主轴上的排列方式。
    • flex-start 元素紧靠主轴的起点(默认值)
      flex-end 元素紧靠主轴的终点。
      center 元素在主轴上居中。
      space-between 第一元素紧靠起点,最后一个元素紧靠终点,余下的元素平均分配剩余空间。
      space-around 每个元素两侧的间隔相等。元素之间的间隔比元素与容器边框的间隔要大一倍。
      space-evenly 元素间距平均分配
      在这里插入图片描述上面为 flex-start
      在这里插入图片描述上面为 flex-end
      在这里插入图片描述 上图为:center 元素在主轴上居中
      在这里插入图片描述
      上图 为space-around

    在这里插入图片描述 上图space-between

    在这里插入图片描述 上图为space-evenly

    align-items

    • align-items 控制元素在侧轴上的排列方式。
      多行单行都适用的属性。
      flex-start 从侧轴开始的地方对齐
      flex-end 从侧轴结束的地方对齐
      center 中间对齐
      stretch 拉伸 没有设置侧轴方向上的宽/高时,等于父盒子的宽或高。
    • align-content
      控制元素在侧轴上的排列方式。只适用于多行显示的弹性容器。
      stretch 拉伸
      flex-start 元素紧靠行的起点
      flex-end 元素紧靠行的终点
      center 元素在行中居中
      space-between 第一个元素紧靠行的起点,最后一个元素紧靠行的终点,余下元素平均分配剩余空间
      space-around 元素在侧轴方向上的间隔相等。
      space-evenly 元素间距离平均分配
      在这里插入图片描述上图flex-end 从侧轴结束的地方对齐
      在这里插入图片描述** 上图 center 中间对齐**
      在这里插入图片描述上图 flex-start 元素紧靠行的起点
      在这里插入图片描述上图 stretch 拉伸

    弹性元素 align-self

    • 不需再去设置float。

    • 设置完绝对定位后,该元素就不再是弹性元素了,不参与弹性布局。

    • 弹性元素均为块级元素。

    • align-self:
      用于控制单个元素在侧轴上的排列方式。
      stretch 拉伸
      flex-start
      flex-end
      center

    • 跟弹性盒子属性排列方式类似。

    属性

    flex-grow

    • 用于将弹性盒子的可用空间,按照比例分配给弹性元素。
      在这里插入图片描述

    flex-shrink

    • 在弹性盒子装不下子元素时,对子元素缩小的比例设置。
      1.计算缺少的值。
      2.当前元素应该缩小比例:
      当前元素宽flex-shrink值 / (其他子元素宽flex-shrink值 + 当前元素宽flex-shrink值)=?%
      80
      2/(1001+802+1001)=44.4%
      3.应该缩小的值:缺少的值
      缩小的比例
      4.最终尺寸:缺少的值-应该缩小的值
      在这里插入图片描述

    flex-basis

    • 大部分情况下与宽度相等。优先级比宽要高。定义了元素在主轴上的空间。
    • 复合写法:
      flex:flex-grow flew-shrink flex-basis
      在这里插入图片描述
    • order:
      用于控制弹性元素的位置。默认为0,数值越小越靠前。

      在这里插入图片描述

    文本节点也可以被弹性布局操控

    在这里插入图片描述

    绝对定位元素不参与弹性布局

    在这里插入图片描述

    展开全文

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 4,263
精华内容 1,705
关键字:

弹性盒子