flex布局

x_minqu

已于 2022-03-05 13:46:23 修改

阅读量517

点赞数

文章标签： css javascript 前端

于 2022-02-28 14:24:56 首次发布

本文链接：https://blog.csdn.net/m0_46483779/article/details/123181252

版权

flex布局

flex-direction：row;设置主轴

justify-content: 是设置主轴上的子元素的排列方式;

flex-wrap:设置子元素是否换行

align-items:设置侧轴上的子元素排列方式(单行)

align-content: 设置侧轴上的子元素的排列方式(多行)

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex 属性

rem的使用方法

添加display: flex;“改变文档流”

默认主轴是x 轴行 row 那么y轴就是侧轴

flex-direction：row;

row 默认值从左到右

row-reverse 从右到左

column 从上到下

column-reverse从下到上
        display: flex;
        width: 80%;
        height: 300px;
        background-color: pink;
        flex-direction: column-reverse;

justify-content: 是设置主轴上的子元素的排列方式;

flex-start 默认值从头部开始如果主轴是x轴，则从左到右

flex-end 从尾部开始排列

center 在主轴上居中对齐(如果主轴是x轴则水平居中)

space-around 平分剩余空间

space-butween 先两边贴边在平分剩余空间(重要)
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            flex-direction: row;
            justify-content: space-between;
        }

flex-wrap:设置子元素是否换行

nowrap 默认值不换行

wrap 换行

        div{
            display: flex;
            width: 600px;
            height: 400px;
            background-color: pink;
            flex-wrap: wrap;
        }

align-items 设置侧轴上的子元素排列方式(单行)

flex-start 默认值从上到下

flex-end 从下到上

center 挤在一起居中(垂直居中)

stretch 拉伸

         div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 默认主轴是x轴 row */
            flex-direction: column;
            justify-content:center;
            /* 侧轴居中 */
            /* align-items: center; */
            /* 拉伸 条件不能给子盒子设置高度*/
            /* align-items: stretch; */
            align-items: center;
        }

align-content 设置侧轴上的子元素的排列方式(多行)

flex-start: 默认值在侧轴的头部开始排列

flex-end: 在侧轴的尾部开始排列

center: 在侧轴中间显示

space-between: 子项在侧轴先分布在两头，在平分剩余空间

space-around: 子项在侧轴先平分剩余空间

stretch: 设置子项元素高度平分父元素高度
       div{
            display: flex;
            width: 800px;
            height: 400px;
            background-color: pink;
            /* 换行 */
            flex-wrap:wrap;
            /* 因为有了换行，此时我们侧轴上控制子元素的对齐方式我们用align-centent */ 
            /* align-content: flex-start; */
            align-content: center;
            align-content: space-between;
        }

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow：row wrap;

flex-direction 设置主轴的方向

justify-content：设置主轴上的子元素排列方式

flex-wrap:设置子元素是否换行

align-content:设置侧轴上子元素排列方式(多行)

align-items:设置侧轴上子元素排列方式(单行)

flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
        div{
            display: flex;
            width: 600px;
            height: 300px;
            background-color:pink;
            /* flex-direction: column;从上到下 */
            /* flex-wrap: wrap;换行 */
            /* 把设置主轴方向和是否换行(换列)简写 */
            flex-flow: column wrap;

        }

flex 属性

flex属性定义子项目分配剩余空间，用flex 来表示占多少份数

        .item{

            flex:<number>; default 0

            }

section{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: aquamarine; 
            margin: 0 auto ;
        }
        section div:nth-child(1){
            width: 100px;
            height: 150px;
            background-color: red;

        }
        section div:nth-child(2){
            flex: 1;
            background: greenS;
        }
        section div:nth-child(3){
            width: 100px;
            height: 150px;
            background-color: blue;
        }

        p{
            display: flex;
            width: 60%;
            height: 150px;
            background-color: aquamarine; 
            margin: 100px auto  ;
        }
        p span{
            flex: 1;
        }
        p span:nth-child(2){
            flex: 2;
            background-color: purple;
        }

flex布局

align-self控制子项自己在侧轴上排列方式

align-self属性允许单个项目有着与其它项目不一样的对齐方式,可覆盖align- items属性。

默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则同等于stretch。

span:nth-child(2){

设置自己在侧轴上的排列方式

align-self：flex-end;

}

order属性定义项目的排列方式顺序

数值越小,排列越靠前,默认值为0

注意:和z-index不一样
        div{
            display: flex;
            width: 80%;
            height: 300px;
            background-color: pink;
            /* 让三个子盒子沿着侧轴底侧对齐 */
            /* align-items: flex-end; */
        }
        div span{
            width: 150px;
            height: 100px;
            background-color: purple;
            margin-right: 5px;
        }
        div span:nth-child(2){
            /* 默认是0 -1比0小所以在前面 */
            order: -1;
        }
        div span:nth-child(3){
            /* 只让三号盒子下来底侧给专门样式 */
            align-self: flex-end;
        }

rem的使用方法

概念指相对于跟元素的字体大小的单位

区别与em区别有哪些

    <style>
        html{
            font-size: 16px;

        }
        div{
            font-size: 1rem;
        }
    </style>
    <script>
        var c = () => {
            let w = document.documentElement.clientWidth;//获取设备的宽度
            let n = (20 * (w/320)>40?40+"px":(20*(w/320)+"px"));
            document.documentElement.style.fontSize=n;
        }
        window.addEventListener("load",c);
        window.addEventListener("resize",c)
    </script>

布局案例：

输入框案例

        *{
            margin: 0;
            padding: 0;
        }

        #div0{
            width: 250px;
            display: flex;
            border: 1px solid #dcdcdc;
        }

         #div0 label{
            flex: 1;
            background-color: #f5f5f5;
            font-family: "微软雅黑";
            text-align: center;
        }
        #div0 label:nth-child(2){
            flex: 0 0 20px;
        }
        #div0 input{
            border: none;
            outline: none;/* 无边框 */
        } 

    <div id="div0">
        <label>姓名</label>
        <input type="text">
        <label>go</label>
    </div>

案例长表单布局

        #form div{
            display: flex;
            /* height: 30px; */
            align-items: flex-start;
            flex: 0 0 30px;
        }
        #form div label{
            flex: 0 0 120px;
            text-align: right;    
        }
        #form {
            display: flex;
            flex-direction:column;
        }

    <form>
        <div id="form">
            <div>
                <label>姓名:</label>
                <input type="text">
            </div>
            <div>
                <label>请输入密码:</label>
                <input type="text">
            </div>
            <div>
                <label>请再次输入密码:</label>
                <input type="text">
            </div>
        </div>
    </form>

https://www.bilibili.com/video/BV1BJ41197XE