如何快速上手flex弹性盒子布局?

头像
FredLiu
    阅读 6 分钟
    3
    文章参考视频链接：https://www.bilibili.com/vide...建议看视频特别易懂哦，以下是文字解释。

    CSS3 flexbox

    开启flex布局只需在最外层的父盒子容器里设置display:flex即可，整个网页都可以看成一个flex容器，采用flex布局称之为flex容器，所有的子容器自动生成容器成员称之为flex项目。

    <body>
    <div class="box">1</div>
    <div class="box">2</div>
    <div class="box">3</div>
</body>
</html>
     body{
        height: 100vh;
        display: flex;
    }

    flex的布局

    image.png
    容器默认存在两根轴：水平main-axis(水平主轴),cross axis(交叉轴)。水平主轴的开始位置叫做main start,结束位置叫做mian end;同理，交叉轴的开始cross start,结束位置cross end;

    容器属性

    容器属性都是设置在容器上的，例如justify-content,align-items,`flex->
    decoration,flex-wrap`

    html代码，css部分给盒子宽高背景色就行：

    <body>
    <div class="box">a</div>
    <div class="box">b</div>
    <div class="box">b</div>
</body>

    当我们给父盒子flex属性时候,默认排列成一行:
    image.png

        body{
        width: 100%;
        height: 100vh;
        display: flex;
    }
    .box{
        width: 300px;
        height: 300px;
        background-color: blue;
    }

    水平主轴方向justify-content

    当我们(在css：body内)加上justify-content:center时候,盒子会居中；
    image.png
    justify-content: space-between;：盒子两端对齐间距相等
    image.png
    justify-content: space-around;：盒子间距为两边盒子距离容器边缘的两倍
    image.png
    justify-content: space-evenly;：盒子间距与距离容器间距相等
    image.png

    交叉轴方向align-items

    默认：align-items: flex-start;
    image.png
    居中：align-items: center;
    image.png
    底部对齐：align-items: flex-end;
    image.png

    项目中我们常把justify-content:center和align-items:center一起使用,效果如下：
    image.png

    flex-direction

    （这个属性记住reverse是反转就很好记忆了）
    flex-direction: row;默认：按行排列
    image.png
    flex-direction: row-reverse;:行排列，只是顺序反转了,a和c互换位置，在容器中的位置也会反转
    image.png
    flex-direction: column;：按列分布
    image.png
    flex-direction: column-reverse;:按列分布，反转
    image.png

    flex-wrap

    我们另外书写代码便于理解：

    html部分
    <body>
        <div class="outer">
            <div class="box">a</div>
            <div class="box">b</div>
            <div class="box">c</div>
            <div class="box">e</div>
            <div class="box">f</div>
            <div class="box">g</div>
        </div>
    </body>
    css部分
     body{
            background-color: #00CC52;
        }
        .outer {
            width: 300px;
            height: 300px;
            display: flex;
            margin: 0 auto;
            /* 这里修改你的flex-wrap查看不同的效果 */
            /* flex-wrap: nowrap; */
            background-color: #fff;
        }

        .box {
            width: 60px;
            height: 50px;
            background-color: #d6d6d6;
            line-height: 50px;
            text-align: center;
            font-size: 25px;
        }
        /* 偶数个数的盒子设置背景颜色，便于理解区分 */
        .box:nth-child(2n){
            background-color: rgb(179, 179, 179);
        }

    写完上面代码后默认效果：
    image.png
    flex-wrap: nowrap;默认（便于理解看下图），理解了这个后面就好懂了
    1212121212.png
    flex-wrap: wrap;：根据盒子自身宽度进行排列，如果超出父容器宽度则自动换行
    image.png

    项目属性

     <body>
        <div class="box">a</div>
        <div class="box">b</div>
        <div class="box">c</div>
    </body>
    设置在项目自身上:order,flex,align-self

    oreder

    用于决定项目排列顺序，数值数组越小，项目排列越靠前
     body {
            margin: 0;
            background-color: rgb(30, 177, 91);
            width: 100%;
            height: 100vh;
            display: flex;
        }

        .box {
            width: 300px;
            height: 300px;
            background-color: #fff;
            text-align: center;
            line-height: 300px;
            font-size: 100px;
        }
        .box:nth-child(1){
            order: 2;
        }
        .box:nth-child(2) {
            background-color: #eee;
            order: 1;
        }
        .box:nth-child(3) {
            order: 0;
        }
    image.png

    align-self

    设置单个项目的排列,补充下面代码：

     .box:nth-child(2) {
            background-color: #eee;
            /* 居中 */
            align-self: center;
            /* 默认 */
            /* align-self: flex-start; */
            /* 底部 */
            /* align-self: flex-end; */
        }

    image.png

    flex-grow

    用于控制子盒子的平分

    image.png

    给第二个盒子添加，去试试吧！

     .box:nth-child(2) {
            flex-grow: 1;
            background-color: #eee;
        }

    flex-shrink

    默认是1，用于决定项目在空间不足时是否缩小，默认项目是1，即空间不足时大家一起等比缩小；注意，即便设置了固定宽度，也会缩小。但是如果某个项目的flex-shrink设置为0，即便空间不够，也不会缩小
    可以给第二个盒子添加，快去试试吧

    image.png

    flex-basis

    默认auto，用于设置项目宽度，默认auto时，项目会保存默宽度，或者以width为自身的宽度，但如果设置了flex-basis，权重会比width属性高，因此会覆盖width属性。（简单点说，覆盖width属性）

    flex-grow flex-shrink flex-basis合并简写格式:

    flex:0 1 auto;---------flex:grow,shrink,basis;
    用于定义项目放大，缩小和宽度，该属性有两个快捷键值，分别是auto（1 1 auto）等放大缩小，与none（0,0，auto）不放大，但等分缩小。

    前端csshtmlhtml5
    FredLiu
    182 声望5 粉丝

    喜欢画画

    下一篇 »
    如何利用window自带共享功能与iPad共享文件夹？

    引用和评论

    被 1 篇内容引用
    推荐阅读
    头像
    jQuery笔记整理教程（常用的API和基础）

    FredLiu阅读 2.3k

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.5k评论 3

    头像
    CSS团队协作规范

    寒青赞 35阅读 3.6k

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.1k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2k评论 3

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    0 条评论
    得票最新