flex学习-一一网

flex基本概念

flex布局.png

在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)

在容器中的每个单元块被称之为 flex item，每个项目占据的主轴空间为 (main size), 占据的交叉轴的空间为 (cross size)。

flex在移动端进行布局，非常方便。

学习flex就是学习12个属性，有6个是对于容器的设置，有6个是对于项目的设置。

flex中有四大概念：

1）容器   如果给一个div设置了 display:flex; 那么这个div就是一个容器。
2）项目   容器中的直接子元素叫项目
3）主轴   默认情况下，项目是在主轴上进行排列的，从主轴的开始位置开始
4）交叉轴 和主轴垂直的那个轴就是交叉轴
复制代码

容器相关的6大属性：

    1）flex-direaction 设置主轴的方向
    2）flex-wrap 如果项目足够多时，是否换行
    3）flex-flow 是上面两个属性的简写
    4）justify-content 处理主轴上的富空间
    5）align-items  设置项目在交叉轴上的位置
    6）align-content 如果有多根主轴，多根主轴的摆放位置
复制代码

项目相关的6大属性：

    1）order  设置项目在主轴上的排列顺序
    2）flex-grow 如果有富余空间，设置项目生长的因子
    3）flex-shrink  如果项目在主轴上装不下，设置项目的缩小因子 （基本上不用）
    4）flex-basis 设置项目在主轴的占据大小
    5）align-self self自己的意思  设置某个项目在交叉轴上的位置
    6）flex 是一个复合属性
        flex:flex-grow flex-shrink flex-basis  基本上后面面两个属性不写
        flex来代替flex-grow。  flex:1;  ===>  flex-grow:1;
复制代码

flex实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{ margin: 0; padding: 0; }
        .box{ width: 400px;height: 400px;border: 1px solid red; display: flex;}
        .item{ width: 100px;height: 100px; }
        /* 一个盒子，可以通过width来设置盒子在主轴上占据的大小 */
        /* 也可以通过flex-basis来设置盒子的大小 */
        /* 如果说有width，又有flex-basis，那么是flex-basis起作用 */
        .item1{ flex-basis: 200px; }
    </style>
</head>
<body>
    <div class="box">
        <div class="item item1" style="background-color: red;">item1</div>
        <div class="item item2" style="background-color: green;">item2</div>
        <div class="item item3" style="background-color: yellow;">item3</div>
    </div>
</body>
</html>
复制代码

文章版权归作者所有，未经允许请勿转载。

THE END

前端