一次学会使用flex

flex属性介绍

父元素设置display：flex；会在父元素容器内形成两根轴：水平的水平轴、垂直的交叉轴，默认按照主轴排列
这几个属性是设置在父元素上用来控制子元素如何显示的。

flex-direction：
    row（默认值）：主轴为水平方向，起点在左端。
    row-reverse：主轴为水平方向，起点在右端。
    column：主轴为垂直方向，起点在上沿。
    column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap:
        nowrap（默认）：不换行。
        wrap：换行，第一行在上方。
        wrap-reverse：换行，第一行在下方。

 justify-content：定义了项目在主轴上的对齐方式。
        flex-start（默认值）：左对齐
        flex-end：右对齐
        center： 居中
        space-between：两端对齐，项目之间的间隔都相等。
        space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍

align-items属性定义项目在交叉轴上如何对齐。
        flex-start：交叉轴的起点对齐。
        flex-end：交叉轴的终点对齐。
        center：交叉轴的中点对齐。
        baseline: 项目的第一行文字的基线对齐。
        stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

这几个属性是设置在子元素上的，用来控制子元素收缩、放大等布局占比和排列顺序的。

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）
flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

实例

<!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>
        body,
        html {
            height: 100%;
            width: 100%;
        }

        .father {
            display: flex;
            height: 33%;
            width: 100%;
            background-color: burlywood;
            margin-top: 10px;
        }

        .father:first-child {
            /* 决定主轴的方向（即项目的排列方向）。 */
            flex-direction: row;
            /* 定义了项目在主轴上的对齐方式。 */
            justify-content:flex-start;
            /* 定义了项目在交叉轴上的对齐方式。 */
            align-items:flex-start;
        }

        .father:nth-child(2) {
            flex-direction: row-reverse;
            justify-content:center;
            align-items:center;
        }

        .father:last-child {
            flex-direction: column;
            justify-content:flex-end;
            align-items:flex-end;
        }

        .son {
            width: 100px;
            height: 100px;
        }

        .son:first-child {
            background-color: crimson;
            /* 设置子元素占比 三栏布局可这样设置:将两边通过flex-basis设置为固定宽度，中间放大设为1；*/
            /* flex-grow: 1; */

            flex-basis: 100px;/* 实现三栏布局 */
        }

        .son:nth-child(2) {
            background-color: darkblue;
            /* flex-grow: 3; */

            flex-grow: 1;/* 实现三栏布局 */
        }

        .son:last-child {
            background-color: darkgreen;
            /* flex-grow: 1; */

            flex-basis: 100px;/* 实现三栏布局 */
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="son">第一个</div>
        <div class="son">第二个</div>
        <div class="son">第三个</div>
    </div>
    <div class="father">
        <div class="son">第一个</div>
        <div class="son">第二个</div>
        <div class="son">第三个</div>
    </div>
    <div class="father">
        <div class="son">第一个</div>
        <div class="son">第二个</div>
        <div class="son">第三个</div>
    </div>
</body>

</html>

在这里插入图片描述

参考博客：阮一峰，flex布局

flex属性介绍

实例

猜你喜欢