阅读 357

Flex弹性盒

Flex弹性盒

1.是css中一种布局手段,主要用来代替浮动,flex可以使元素具有弹性,让元素可以跟随页面的大小的改变而改变;

2.弹性容器
    (1)要使用弹性盒,必须设置弹性容器;
    (2)我们通过display来设置弹性容器
        Display:flex设置为块级弹性容器
        Display:inline-flex 设置为行内的弹性容器

3.弹性元素
    (1)弹性容器的子元素是弹性容器
    (2)一个元素可以同时是容器和元素
复制代码

Flex弹性盒的属性

1.Flex-direction 指定容器中弹性元素的排列方式
    可选值:
    (1)Row 默认值,弹性元素在容器中水平排列(左向右);
    (2)Row-reverse 反向水平排列
    (3)Column 弹性元素竖向排列(自上向下)
    (4)Column-reverse 反向竖向排列

    主轴:弹性元素的排列方向称为主轴;
    侧轴: 与主轴垂直方向的称为侧轴。
复制代码
2.Flex-wrap 设置弹性元素是否在弹性容器中自动换行
    可选值:
    (1)Nowrap 默认值,元素不会自动换行;
    (2)Wrap 元素会自动换行。
复制代码
3.Flex-flow wrap和direction的简写属性
    例;flex-flow: row wrap
复制代码
4.Justify-content 如何分配主轴上的多余空间
    可选值:
    (1)Flex-start 元素沿着主轴起边排列
    (2)Flex-end 元素沿着主轴终边排列
    (3)Center 元素居中排列
    (4)Space-between 空白分布到元素中间
    (5)Space-around 空白分配到元素两侧
    (6)Space-evenly 空白分布到元素的单侧(兼容性不好,慎重使用)
复制代码
5.Align-items 元素在辅轴上如何对齐
    可选值
    (1)Stretch 默认值,将元素的长度设置为相同的值;
    (2)Flex-start 元素不会拉伸,沿着辅轴起边对齐;
    (3)Flex-end 沿着辅轴的终边对齐;
    (4)Center 沿着辅轴居中对齐;
    (5)Baseline 基线对齐。
复制代码
6.Align-content 辅轴空白空间的分布
     可选值
    (1)Flex-start 元素沿着辅轴起边排列
    (2)Flex-end 元素沿着辅轴终边排列
    (3)Center 元素居中排列
    (4)Space-between 空白分布到元素中间
    (5)Space-around 空白分配到元素两侧
    (6)Space-evenly 空白分布到元素的单侧(兼容性不好,慎重使用)
复制代码

Flex弹性元素的属性

1.Flex-grow 指定弹性元素的伸展的系数;
    (1)当父元素有多余空间,子元素如何伸展;
    (2)父元素的剩余空间,会按照比例进行分配;
复制代码
2.Flex-shrimk 指定弹性元素的收缩系统
    当父元素的空间不足以容纳所有的子元素时,如何对子元素收缩
复制代码
3.Align-self 用来覆盖当前弹性元素行的align-items
    可选值
    (1)Stretch 默认值,将元素的长度设置为相同的值;
    (2)Flex-start 元素不会拉伸,沿着辅轴起边对齐;
    (3)Flex-end 沿着辅轴的终边对齐;
    (4)Center 沿着辅轴居中对齐;
    (5)Baseline 基线对齐。
复制代码
4.Flex-basis 元素的基础长度
    (1)默认值是auto,表示参考元素自身的高度或宽度;
    (2)如果传递了一个具体的数值,则以该值为准。
复制代码
5.Flex 可以设置弹性元素所有的三个样式
    (1)Flex:增长 收缩 基础;
    (2)可选值
    ①initial 默认值,相当于 flex:0 1 auto,能缩;
    ②Auto 相当于 flex:1 1 auto,能增能缩;
    ③None 相当于flex:0 0 auto,表示弹性元素没有弹性;
复制代码
6.Order 决定元素的破排列顺序
    例:order:3;数值越大越靠后。
复制代码
文章分类
前端
文章标签