携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第二天，<<点击查看活动详情 >>

网页属性Flex布局

容器
- flex-direction 容器内项目的排列方式
  - row 项目从左往右排列（默认值）
  - colum 项目从上往下排列
  - row-reverse 项目从右往左排列
  - colum-reverse 项目从下往上排列
- flex-wrap 项目放不下了是否换行
  - nowrap 不换行（默认值）
  - wrap 换行
  - wrap 换行后翻转
- justify-content 项目在主轴上的对齐方式
  - flex-start 排在容器的开始位置（默认值）
  - flex-end 排在容器的末尾
  - center 排在容器的中间
  - space-between 项目之间有相同大小的空隙
  - space-around 开始、结束以及项目之间有空隙，开始和结束的空隙是项目之间空隙的一半
  - spance-evenly 开始、结束以及项目之间有空隙，空隙大小相同
- align-items 交叉轴的对齐方式
  - flex-start：交叉轴的起点对齐。
  - flex-end：交叉轴的终点对齐。
  - center：交叉轴的中点对齐。
  - baseline: 项目的第一行文字的基线对齐。
  - stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
- align-content 多个主轴的对齐方式（多行，不常用）
  - flex-start：与交叉轴的起点对齐。
  - flex-end：与交叉轴的终点对齐。
  - center：与交叉轴的中点对齐。
  - space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
  - space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
  - stretch（默认值）：轴线占满整个交叉轴。

项目

order 项目排列顺序，数值越小，排列越靠前。默认为0
flex-grow 放大比例（剩余空间按比例分配）。默认为0，不放大
flex-shrink 缩小比例。默认为1，自动缩小
flex-basis 设置项目宽度，内容超出范围会自动变大

align-self 允许单个项目与其他项目有不同的对齐方式

<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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box1 {
            background: red;
            /* width: 30%; */
            /* flex-shrink: 0; */
        }

        .box2 {
            background: yellow;
            /* width: 30%; */
            /* flex-shrink: 0; */
        }

        .box3 {
            background: blue;
            /* width: 30%; */
            /* flex-shrink: 0; */
        }

        .box4 {
            background: green;
            /* width: 30%; */
            /* flex-shrink: 0; */
            /* flex-grow: 1; */
        }

        .box5 {
            background: gray;
            /* width: 30%; */
            /* width: 30px; */
            flex-basis: 30px;
            order: -1;
            /* flex-shrink: 0; */
            /* flex-grow: 1; */
            align-self: flex-start;
        }

        .container {
            height: 300px;
            display: flex;
            /* flex-direction: column-reverse; */
            /* flex-wrap: wrap; */
            justify-content: space-evenly;
            align-items: center;
            /* align-content: space-between; */

        }
    </style>
</head>

<body>
    <div class="container">
        <div class="box1">1</div>
        <div class="box2">2</div>
        <div class="box3">3</div>
        <div class="box4">4</div>
        <div class="box5">5</div>
    </div>
</body>

</html>

今天的分享到此为此，关注学长不迷路，叶秋学长带你上高速~~

前端基础篇之Flex布局

网页属性Flex布局