flex 弹性布局

传统布局基于 盒装模型,依赖 display属性 + position属性 + float属性

摘要

容器级别

  1. justify-content 主轴上的对齐方式,flex-start(默认)centerspace-between

  2. align-items 交叉轴上的对齐方式,stretch(默认)flex-startcenter

  3. align-content 多个主轴之间的对齐方式,stretch(默认)centerspace-between

项目级别

  1. align-self 单个项目对齐方式,默认继承父元素的 align-items,可以对其进行覆盖

容器属性

  • flex-direction

    轴方向

    属性值:row / row-reverse / column / column-reverse

  • flex-wrap

    nowrap:默认不换行,会进行压缩

    wrap:向下换行,不会压缩

    wrap-reverse:向上换行,不压缩,很少用

  • flex-flow

    flex-direction || flex-wrap 两者的结合,尽量不用

  • justify-content

    主轴上的对齐方式

    flex-start 默认左对齐

    flex-end 右对齐

    center 居中

    space-between 两端对齐,自动调整,高频使用

    space-around

    space=evenly 间距均分

  • align-items

    单轴上的多个交叉轴对齐方式

    flex-start

    flex-end

    center 高频

    baseline 文字基线,很少使用

    stretch 默认值,拉伸子元素高度为父元素高度

  • align-content

    多根主轴之间的对齐方式

    flex-startflex-endcenterstretch 默认space-betweenspace-around

Flex 弹性布局_属性值

项目属性

  • order

    排列顺序,越小越靠前,几乎不用

  • flex-grow

    剩余空间的占比,经常使用

  • flex-shrink

    默认为1,空间不足时会等比缩小。0表示不缩小,尽量不用

  • flex-basis

  • flex 简写

  • align-self

案例一:屏幕居中对齐

Flex 弹性布局_html_02
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
    }
    body {
        /* 虚拟高度,表示整个屏幕高度 */
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .box {
        width: 300px;
        height: 300px;
        min-height: 300px;
        min-width: 300px;
        outline: 1px solid #000;
    }

</style>
<body>
    <div class="box"></div>
</body>
</html>

案例二:九宫格

Flex 弹性布局_html_03

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

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html

沉舟侧畔千帆过,病树前头万木春。