flex用法_flex: 1 1 30%;-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_64912130/article/details/139075708

flexhttps://developer.mozilla.org/zh-CN/docs/Web/CSS/flex

Flex布局是一种在CSS3中引入的新的布局模式，更灵活地设计复杂的布局结构。Flex布局的属性可以分为容器属性和项目属性两大类。

按照Flexbox的规范，当在 flex 简写中只提供一个值时，这个值会被视为 flex-grow 的值，而 flex-shrink 会默认为1，flex-basis 会默认为auto或 0%（除非在 flex 简写中明确指定了 flex-basis 的值）

flex: 1;
- flex-grow: 1，等分剩余空间。
- flex-shrink: 1，如果空间不足，项目将能够缩小。
- flex-basis: 0%，表示项目的起始大小是0%，但由于flex-grow的存在，它最终会占据一些空间。
flex: 2;
- flex-grow: 2，该元素占据的剩余空间是其他的两倍。
flex: 1 30px;
- flex-grow: 1; flex-shrink: 1; flex-basis: 30px;。
- flex-basis: 30px，项目在分配多余空间之前会有一个30px的起始大小。
flex: 1 1 100px;
- flex-basis: 100px，这会影响项目的起始大小和如何分配多余或不足的空间。
- flex-grow和flex-shrink的值保持为1，表示项目既能伸展也能缩小。

应用：实现一个元素位于左上角，一个位于最中间，以及一个位于右下角的效果

使用flex实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flex</title>
    <style>
        .container {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;/*可省略*/
            height: 300px;
            width: 300px;
            border: 1px solid black;

        }

        .item {
            width: 50px;
            height: 50px;
            border: 1px solid black;
        }

        .box2 {
            align-self: center;
        }

        .box3 {
            align-self: flex-end;

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="item box1">1</div>
        <div class="item box2">2</div>
        <div class="item box3">3</div>
    </div>
</body>

</html>

使用定位position实现

<style>
        .container {            
            height: 300px;
            width: 300px;
            border: 1px solid black;
            position: relative;
        }

        .item {
            width: 50px;
            height: 50px;
            border: 1px solid black;
            position: absolute;
        }

        .box2 {
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .box3 {          
            right: 0;
            bottom: 0;
        }
    </style>

position用法