css3-弹性盒布局

2021-02-27

弹性盒模型-加快了网站布局的速度

传统设置布局后，如果某一天布局改变，如三个平分的块变成四个，能不能不改变css内容响应式布局？答，弹性盒模型

图中是一个 flex-direction 属性为 row的弹性容器，意味着其内的弹性项目将根据既定书写模式沿主轴水平排列，其方向为元素的文本流方向，在这个例子里，为从左到右。

弹性容器(Flex container)

包含着弹性元素的父元素。通过设置 display 属性的值为 flex 或 inline-flex 来定义弹性容器。

弹性元素(Flex item)

弹性容器的每个子元素都称为弹性元素。弹性容器直接包含的文本将被包覆成匿名弹性单元。

flex container的属性


div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    }

flex-direction: 设置弹性元素的主轴上的排列方式(设置主轴的起始方向)

初始值：row 是否是继承属性：否

row
flex容器的主轴被定义为与文本方向相同。主轴起点和主轴终点与内容方向相同。
row-reverse
表现和row相同，但是置换了主轴起点和主轴终点
column
flex容器的主轴和块轴相同。主轴起点与主轴终点和书写模式的前后点相同
column-reverse
表现和column相同，但是置换了主轴起点和主轴终点

弹性元素的溢出换行处理：通过设置flex container的属性flex-wrap

不换行，整体缩小

div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    flex-wrap:nowrap;/* 默认值 不换行，弹性元素整体缩小 */
}

换行

div{
    display:flex;/* 定义一个弹性盒 */
    flex-direction:row;/* 默认值 */
    flex-wrap:wrap;/* 换行，或wrap-reverse */
}

统一设置弹性元素的主轴上的排列方式与换行

div{
    /* 相当于flex-direction和flex-wrap的合体 */
    flex-flow:column wrap;
}

justify-content:定义了在当前行上，弹性项目沿主轴如何排布。

flex-start
从行首开始排列。每行第一个弹性元素与行首对齐，同时所有后续的弹性元素与前一个对齐。


div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row-reverse;
            justify-content:flex-start;/* 弹性项目从主轴的开始方向排布 */
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

效果排列

flex-end
从行尾开始排列。每行最后一个弹性元素与行尾对齐，其他元素将与后一个对齐。


div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: column;
            justify-content:flex-end;/* 弹性项目从主轴的结束方向排布 */
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

center

伸缩元素向每行中点排列。每行第一个元素到行首的距离将与每行最后一个元素到行尾的距离相同。


div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:center;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

space-between

在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素与行首对齐(无间距)，每行最后一个元素与行尾对齐(无间距)。


div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:space-between;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

space-around
在每行上均匀分配弹性元素。相邻元素间距离相同。每行第一个元素到行首的距离和每行最后一个元素到行尾的距离将会是相邻元素之间距离的一半。

space-evenly
flex项都沿着主轴均匀分布在指定的对齐容器中。相邻flex项之间的间距，主轴起始位置到第一个flex项的间距,，主轴结束位置到最后一个flex项的间距，都完全一样。


div{
            width:400px;
            height: 300px;
            border: 2px solid grey;
            display: flex;
            /* 确定了主轴的开始方向 */
            flex-direction: row;
            justify-content:space-evenly;
        }
        div main{
            width: 100px;
            height: 100px;
            background: indigo;
            color: white;
        }

align-items 定义了在当前行上，弹性项目沿侧轴（交叉轴）默认如何排布

center

元素在侧轴居中。如果元素在侧轴上的高度高于其容器，那么在两个方向上溢出距离相同。

stretch

在弹性元素没有设置高度或宽度（若设置了高宽度则以设置的为准）的时候，弹性元素沿着交叉轴的方向延伸

align-content 定义了在多行上，弹性项目沿侧轴（交叉轴）默认如何排布

要注意的是多行交叉轴的起始位置

flex item的属性

align-self 定义了单个弹性项目在交叉轴上应当如何对齐，这个定义会覆盖由 align-items 所确立的默认值。

#c{
           width: 350px;
           height: 350px;
           border: 1px solid black;
           display: flex;
           justify-content: center;
           flex-wrap: wrap;

       }
       #c>div{
           width: 100px;
           height: 100px;
           background-color: bisque;
       }
       #c>div:first-child{
           align-self: center;
       }

效果显示：

normal
这个关键字的效果取决于我们处在什么布局模式中：
- 在绝对定位布局的静态位置上，效果和stretch一样。
- 对于那些弹性项目而言，效果和stretch一样。
- 对于那些网格项目而言，效果和stretch一样，除了有部分比例或者一个固定大小的盒子的效果像start。
  这个属性不适用于会计盒子和表格。
flex-start

元素向侧轴起点对齐。

flex-end

元素向侧轴终点对齐。

center

flex-grow 设置弹性元素在主轴上，对剩余空间的分配

flex-grow:n; 把剩余空间平均分配成n等份

平均分配剩余空间

1
2
3

/* 给弹性盒中的每一个弹性元素设置 */
flex-grow:1;

不分配剩余空间（是多大就多大）

1	flex-grow:0;