flex容器与项目常用属性

flex 布局的基本概念

Flexible Box 模型，通常被称为 flexbox，是一种一维的布局模型。它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力。

flex容器

flex基本代码

<div class="container">
        <div class="item">boss1</div>
        <div class="item">boss2</div>
        <div class="item">boss3</div>
        <div class="item">boss4</div>
    </div>
    <style>
        /* flex容器 */
        .container {
            width: 600px;
            height: 60px;
            /* flex:行内块 */
            display: flex;
        }
        /* flex项目 */
        .container>.item {
            background-color: aqua;
            }
    </style>

1. 默认状态

主轴方向与换行

            /* 主轴方向 */
            flex-direction: row;
            /* 是否换行 */
            flex-wrap: nowrap;

简写

/* flex-flow = > flex-direction + flex-wrap */
            flex-flow: row nowrap;

主轴排列

/* 为了与grid统一记忆，使用'place-'为前缀的属性代替原来flex- */
            /* justify-content - > place-content */
            place-content: start;

place-content:主轴排列与对齐(通过分配剩余空间实现)

            /* 居左 */
            place-content: start;
            /* 居中 */
            place-content: end;
            /* 居右 */
            place-content: center;
            /* 两端对齐 */
            place-content: space-between;
            /* 分散对齐 */
            place-content: space-around;
            /* 平均对齐 */
            place-content: space-evenly;

换行

            /* 单行(不换行) */
            align-items: stretch;
            /* 多行(换行) */
            align-content: start;
    /* align-items +  align-content => place-items */
            place-items: stretch;

place-items:交叉轴排列

            place-items: stretch;
            place-items: start;
            place-items: end;
            place-items: center;

flex项目

            /* 项目属性 */
            /* (1) flex:项目缩放比例与宽度 */
            /* flex: flex-grow flex-shrink flex-basis */
            /* flex: 放大比例   缩小比例      计算宽度 */
            /* 1.默认状态(部分响应):不放大,允许缩小,宽度自动 */
            flex: 0 1 auto;
            flex: initial;
            /* 2.完全响应:允许放大,允许缩小,宽度自动 */
            flex: 1 1 auto;
            flex: auto;
            /* 3.完全不响应:禁止放大,禁止缩小,宽度自如*/
            flex: 0 0 auto;
            flex: none;

效果图片展示