flex 的总结

最新推荐文章于 2022-12-14 16:02:14 发布

lceBear

最新推荐文章于 2022-12-14 16:02:14 发布

阅读量46

点赞数

原文链接：http://www.cnblogs.com/libinfs/p/6109065.html

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Flex</title>
    <style>
        .box {
            width: 400px;
            display: flex;
            /*flex-wrap: wrap-reverse;*/
            margin: 20px;
            line-height: 40px;
            font-size: 20px;
            color: #fff;
            background: #963297;
        }
        .item {
            width: 300px;
            margin: 10px;
            padding: 0 12px;
            line-height: 40px;
            text-align: center;
            background-color: #c99702;
        }
    </style>
</head>
<body>
    <div class="box">
        <!-- 只有在文档流中的子元素才是弹性元素 -->
        <div class="item item-1">1</div>
        <div class="item item-2">2</div>
        <div class="item item-3">3</div>
        <div class="item item-4">4</div>
        <div class="item item-5">5</div>
        <!-- <div>
            <div>grandson</div>
        </div> -->
    </div>
    <!--
    1. 方向
    (1) flex-direction: row | row-reverse | column | column-reverse
    (2) flex-wrap: nowrap | wrap | wrap-reverse
    (3) flex-flow: <'flex-direction'> || <'flex-wrap'>
    (4) order: <interger> (相对值)

    2. 弹性
    (1) *flex-grow: <number> initial:0 设置元素能够分到的剩余空间
        弹性布局的元素宽度 = flex-basis + flow-grow/wum(flow-grow)*remain
    (2) flex-shrink: <number> initial:1
    (3) flex-basis: main-size | <width> 设置flex item的初始宽/高
    (4) flex: <'flex-grow'> || <'flex-shrink'> || <'flex-basis'>
        flex: 1 1 0;

    3. 对齐
    (1) justify-content: flex-start | flex-end | center | space-between | space-around (设置主轴方向上的对齐方式(间隔分配方式))
    (2) align-items: flex-start | flex-end | center | baseline | stretch (设置辅轴方向上对齐方式)
    (3) align-self: auto | flex-start | flex-end | center | baseline | stretch (设置单个flex item在辅轴方向上的对齐方式)
    (4) align-content: felx-start | flex-end | center | space-between | space-around | stretch (设置辅轴方向上的行对齐方式) （出现多行时，容器上出现剩余空间）
    -->
</body>
</html>

更新一张笔记图：

转载于:https://www.cnblogs.com/libinfs/p/6109065.html

lceBear

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex 的总结

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Flex</title> <style> .box { width: 400px; ...
复制链接

扫一扫

flex 的总结

“相关推荐”对你有帮助么？