弹性盒子简单用法

带脑子的CV工程师

已于 2023-02-13 19:50:22 修改

阅读量1.2k

点赞数 1

文章标签： html5 css html

于 2020-11-14 16:15:46 首次发布

本文链接：https://blog.csdn.net/qq_36262295/article/details/109687998

版权

flex布局，一定要区分开，弹性盒子和弹性元素，主轴和交叉轴，就很简单了

1、弹性盒子

设置弹性盒子
display:flex;

可以简洁，完整，响应式(自适应)的实现各种页面布局

采用flex布局的元素，称为弹性盒子或者 flex容器，
他的所有子元素称为弹性元素或者 flex项目

主轴：元素盒子排列的方向（默认的排列方向x轴，
当然不是说主轴就是x，因为我们可以通过属性来
改变主轴的方向）

交叉轴：和主轴垂直的轴

弹性盒子属性/容器属性：

flex-direction 改变主轴的方向。

属性值有四种情况：

{flex-direction: row;}/默认值，从左往右排列/
{flex-direction: row-reverse;}/从右往左排列/
{flex-direction: column;}/从上往下排列/
{flex-direction: column-reverse;}/从下往上排列/

flex-wrap 控制容器是单行还是多行

属性值有三种情况：
{flex-wrap: nowrap; } 默认值，不换行，会压缩，不会超出父级
{flex-wrap: wrap; } /*换行*/
{flex-wrap: wrap-reverse; }
只是单纯的上下反转，不是序号改变

复合属性：

flex-flow:是 flex-direciton 和 flex-wrap两个属性综合

justify-content定义弹性元素在主轴上的对齐方式

用于控制元素在主轴上的排列方式，再次强调是主轴的排列方式。
属性值五种：

1 flex-start //默认值，从主轴开始部分开始排列(说白了就是左对齐)
2 flex-end //从主轴结束部分开始排列（说白了是右对齐）
3 center //居中
4 space-between // 两端对齐，中间有相等的间隔
5 space-around //环绕对齐，每个项目两边的间隔相等
6 space-evenly 元素间距离平均分配

align-items定义弹性元素在交叉轴上如何对齐

align-items: stretch; //弹性元素不设置高度时被拉伸以适应容器（默认值）

align-items: flex-end; //交叉轴下沿对齐
flex-start 元素位于容器的交叉轴开头
align-items: center; // 交叉轴中部对齐
align-items: baseline; //项目里面的文字的基线对齐

align-content定义了多根主轴在（交叉轴的对齐方式）

如果项目自有一根轴线，则不起作用
只适用于多行显示的弹性容器

属性值六种

stretch 元素被拉伸以适应容器（默认值

flex-start //与交叉轴上沿紧密对齐
flex-end //与交叉轴下沿紧密对齐
center //居中
space-between // 与交叉轴两端对齐，中间主轴宽度平均分配
space-around //环绕对齐，中间主轴宽度平均分配
space-evenly //元素间距离平均分配

2、弹性元素

弹性盒子里面的元素即为弹性元素
放在容器盒子中的元素即为弹性元素。
不能使用float与clear规则
弹性元素均为块元素
绝对定位的弹性元素不参与弹性布局

align-self

用于控制单个元素在交叉轴上的排列方式，
align-items 用于控制容器中所有元素的排列，
而 align-self 用于控制一个弹性元素的交叉轴排列。

选项说明

stretch 不设置高，高度占满盒子的高
flex-start 元素紧靠主轴起点
flex-end 元素紧靠主轴终点
center 元素从弹性容器中心开始

flex-grow

默认值 0
用于将弹性盒子的可用空间，分配给弹性元素。可以使用整数或小数声明。
下例中为三个DIV 弹性元素设置了1、3、6 ，即宽度分成10等份，
第三个元素所占宽度为(宽度/(1+3+6)) X 6。

如果弹性元素设置了宽度，将把（弹性盒子-弹性元素宽度和）
后按照 flex-grow 进行分配。‘
例如弹性盒子500，弹性元素设置宽100
让后flex-grow 分别设置 0 -1 -3
（500-300）/ （0+1+3）= 50
200+0x50
200+1x50
200+3*50
来分配

flex-shrink

与 flex-grow 相反 flex-shrink 是在弹性盒子装不下元素时定义的缩小值
默认值 1

案例

 article {
        border: solid 5px silver;
        width: 400px;
        height: 120px;
        display: flex;
        box-sizing: content-box;
    }
    article div:nth-child(1) {
        flex-shrink: 0;
    }
    article div:nth-child(2) {
        flex-shrink: 1;
    }
    article div:nth-child(3) {
     flex-shrink: 3;
    }
    article * {
        width: 200px;
        height: 100px;
       }
 计算方式：
   flex-shrink: 0; 代表不缩放，还是原来的宽度
   flex-shrink: 1;
   flex-shrink: 3;
   父级400，3个子级每个200，所以必须缩小200，
   flex-shrink0 代表不缩放，还是原来的宽度
   1+3 总共把200分成4份
   flex-shrink 1 就是200里面的其中1份(200-50) 
   flex-shrink 3 就是200里面的其中3份(200-150)