Flex布局

zhao
63 阅读1分钟

基本概念

采用flex布局的元素,称为"容器"(flex container),它的所有子元素都是容器的"项目"(flex item),容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

flex-direction

参数说明

# row:从左到右 
# row-reverse:从右到左
# column:从上到下 
# column-reverse:从下到上
flex-direction: row | row-reverse | column | column-reverse;

示例代码

<html>

<body>
    <style>
        #container {
            display: flex;
            flex-direction: row;
            width: 500px;
            height: 150px;
            background-color: blue;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 1px solid gray;
        }

        #row {
            display: flex;
            flex-direction: row;
        }

        #row-reverse {
            display: flex;
            flex-direction: row-reverse;
        }

        #column {
            display: flex;
            flex-direction: column;
        }

        #column-reverse {
            display: flex;
            flex-direction: column-reverse;
        }

        .item {
            width: 20px;
            height: 20px;
            background-color: red;
            border: 1px solid gray;
        }
    </style>
    <div id="container">
        <div id="row" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="row-reverse" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="column" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="column-reverse" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
    </div>
    </div>
</body>

</html>

效果图

image.png

justify-content

参数说明

# flex-start:主轴开始方向
# flex-end:主轴结束方向
# center:居中
# space-around:间隔相等,与两边有间隔,与其他容器有间隔且重复计算容器之间的间隔
# space-between:间隔相等,与两边无间隔
# space-evenly:间隔相等,与两边有间隔
justify-content: flex-start | flex-end | center | space-around | space-between | space-evenly;

示例代码

<html>

<body>
    <style>
        #container {
            display: flex;
            flex-direction: row;
            width: 700px;
            height: 150px;
            background-color: blue;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 1px solid gray;

            display: flex;
            flex-direction: column-reverse;
        }

        #flex-start {
            justify-content: flex-start;
        }

        #flex-end {
            justify-content: flex-end;
        }

        #center {
            justify-content: center;
        }

        #space-around {
            justify-content: space-around;
        }

        #space-between {
            justify-content: space-between;
        }

        #space-evenly {
            justify-content: space-evenly;
        }

        .item {
            width: 20px;
            height: 20px;
            background-color: red;
            border: 1px solid gray;
        }
    </style>
    <div id="container">
        <div id="flex-start" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="flex-end" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="center" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="space-around" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="space-between" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="space-evenly" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
    </div>
    </div>
</body>

</html>

效果图

image.png

align-items

参数说明

# flex-start:交叉轴开始方向
# flex-end:交叉轴结束方向
# center:居中
# baseline:基线对齐
# stretch:
align-items: flex-start | flex-end | center | baseline | stretch;

示例代码

<html>

<body>
    <style>
        #container {
            display: flex;
            flex-direction: row;
            width: 400px;
            height: 150px;
            background-color: blue;
        }

        .sub {
            width: 100px;
            height: 100px;
            background-color: orange;
            border: 1px solid gray;

            display: flex;
            flex-direction: column-reverse;
        }

        #flex-start {
            align-items: flex-start;
        }

        #flex-end {
            align-items: flex-end;
        }

        #center {
            align-items: center;
        }

        .item {
            width: 20px;
            height: 20px;
            background-color: red;
            border: 1px solid gray;
        }
    </style>
    <div id="container">
        <div id="flex-start" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="flex-end" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
        <div id="center" class="sub">
            <item class="item"></item>
            <item class="item"></item>
            <item class="item"></item>
        </div>
    </div>
    </div>
</body>

</html>

效果图

image.png

align-content、flx-wrap

参数说明

# nowrap:不换行,默认值
# wrap:换行,第一行在上方
# wrap-reverse:换行,第一行在下方
flex-wrap: nowrap | wrap | wrap-reverse;
# 换行的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;

示例代码

<html>

<body>
    <style>
        #container {
            display: flex;
            flex-wrap:wrap;
            align-content:flex-end;

            width: 400px;
            height: 400px;
            background-color: blue;
        }

        .item {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 1px solid gray;
        }
    </style>
    <div id="container">
        <item class="item"></item>
        <item class="item"></item>
        <item class="item"></item>
        <item class="item"></item>
        <item class="item"></item>
    </div>
    </div>
</body>

</html>

效果图

image.png

flex-shrink

# 假设主轴方向是row,如果父亲div witdh:100px,height:70px 两个子div witdh:80px,height:80px 则缩容后两个子div都是witdh:50px,height:80px,默认值就是1,即只缩主轴方向
flex-shrink:1
avatar
文章
阅读
粉丝