flex 布局flex（弹性盒）布局的定义 display:flex; 代表的是块级 display:inline-fl

flex（弹性盒）布局的定义

display:flex; 代表的是块级
display:inline-flex; 代表的是行内块

flex的属性

flex-direction:设置主轴方向（容器的）

默认是row
/ 水平轴为主轴从从左到右/
flex-direction: row;
/ 水平轴为主轴从右到左/
flex-direction: row-reverse;
/ 垂直轴为主轴从上到下/
flex-direction: column;
/ 垂直轴为主轴从下到上/
flex-direction: column-reverse;

flex-warp设置是否换行（容器的）

nowrap 默认不换行
wrap是换行

上俩的复合属性

/* 复合属性
第一个值是flex-direction
第二个值是flex-warp
*/
flex-wrap: wrap;
flex-flow: row nowrap;

justify-content:控制项目在主轴上的对齐方式（容器的）

justify-content: space-around;环绕

justify-content: space-between;两端对齐

justify-content: space-evenly;完全均等

控制项目在侧轴上的对齐方式（容器的）

align-items

align-items: flex-start; 对齐到顶部
align-items: flex-end;对齐到底部
align-items: center;居中对齐
项目在侧轴上所占的比例不写（width/height）或者写成auto，就会占满整个侧轴：
align-items: stretch;(默认值)

产生多跟轴线用align-content:

必须结合着flex-wrap:wrap;

flex:1均分

写了几就代表占总体的几份
如果所有的都是一个值也是均分。不论1还是2还是几
flex属性是flex-grow, flex-shrink 和 flex-basis的简写

aline-self: 控制某个项目在侧轴上的对齐方式

给一个盒子设置display:fix;这个盒子就变成了容器，里面的项目也可以变成容器。

设置头和尾，无论内容多少，头和尾都会固定在头或尾。

内容占满剩余屏幕

 <style>
        *{
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        body{
          display: flex;
          flex-direction: column;
            
        }
        header,footer{
            /* width: 500px; */
            height: 100px;
            background-color: lightcoral;            
            line-height: 100px;
        }
        main{
            flex: 1;
            overflow: auto;
        }
    </style>


<body>
    <header>
        tou
    </header>
    <main>main
        </main>
    <footer>footer</footer>
</body>

文字超出隐藏

单行显示...

<style>
    p{
        width: 100px;
        overflow: hidden;
        /* 文字溢出裁剪用... 的形式*/
        text-overflow:ellipsis;
        /* 强制不换行 */
        white-space: nowrap;
        
    }
</style>

多行显示...

<style>
    p{
    width: 100px;
    overflow: hidden;
    /* 文字溢出裁剪用... 的形式*/
    text-overflow:ellipsis;
    /* 强制不换行 */
    display: -webkit-box;
    /* 控制让哪一行显示... */
   -webkit-line-clamp: 3;
    /* 控制主轴方向 */
    -webkit-box-orient: vertical;
    }
</style>

禁止用户复制文字

body{
        /* 禁止用户选中 */
        user-select: none;
    }

控制文字间的距离

/* 字符与字符之间的距离 */
        letter-spacing: 10px;
 /* 单词与单词之间的距离（空格） */
        word-spacing: 10px;

flex 布局