认识flex

• Flexbox翻译为弹性盒子 :

  弹性盒子是一种用于按行或按列布局元素的一维布局方法

  元素可以膨胀以填充额外的空间, 收缩以适应更小的空间

  使用Flexbox来进行布局的方案称之为flex布局

• flex布局的重要概念

  1. 开启了 flex 布局的元素叫 flex container

  2. flex container 里面的直接子元素叫做 flex item

具备以下特点：

1. flex item的布局将受flex container属性的设置来进行控制和布局
2. flex item不再严格区分块级元素和行内级元素
3. flex item默认情况下是包裹内容的, 但是可以设置宽度和高度

• display 属性为 flex 或者 inline-flex

  flex： flex container 以 块级(block-level) 形式存在

  inline-flex： flex container 以 内联(inline-level) 形式存在

flex布局的模型

flex相关的属性

container 上的属性

flex-direction:row /* 决定了主轴的方向，有 4 个取值: row（默认值）、row-reverse、column、 */

flex-wrap：nowrap /* 决定了主轴是单行还是多行 */
/* 有 3 个取值：nowrap（默认）单行、wrap多行、wrap-reverse：多行（沿着主轴从下往上排）*/

flex-flow：flex-direction flex-wrap; /* 是 flex-direction 和 flex-wrap 的简写*/

justify-content:flex-start /*决定了主轴上 items 的分布方式*/

align-items /*决定了 items 在 交叉轴上的分布方式*/

align-content /*决定了多行 items 在交叉轴上的对齐方式，用法与 justify-content 类似（固定高度且有剩余空间的盒子里用）*/

item 上的属性

order:0 决定了items 的排布顺序,可以设置任意整数（正/负整数、0），值越小就越排在前面

items 可以通过align-self 覆盖 flex container 设置的 align-items

flex-grow:0 决定了 items 如何拉伸,可以设置任意非负数字（正小数、正整数、0），默认值0，扩展后的最终 size 不能超过 max-width\max-height

flex-shrink:1 决定了 items 如何收缩,可以设置任意非负数字,默认值1，收缩后的最终 size 不能小于 min-width\min-height

flex-basis:auto 用来设置 items 在 主轴方向上的基本尺寸

flex 是 flex-grow || flex-shrink || flex-basis 的简写,可以指定1个，2个或3个值

flex:none /* 0 0 auto */
flex:auto /* 1 1 auto */
flex:1 /* flex-grow */
flex:1 1 /* flex-grow  flex-shrink */
flex:1 10px /* flex-grow  flex-basis */
/*一个无单位数(<number>): 它会被当作<flex-grow>的值*/
/*一个有效的宽度(width)值: 它会被当作 <flex-basis>的值*/

布局如何解决对齐问题

<div class="box">
    <div class="item" style="background: #e7b718"></div>
    <div class="item" style="background: #7ce718"></div>
    <div class="item" style="background: #cb5b93"></div>
    <div class="item" style="background: #126cb6"></div>
    <div class="item" style="background: #126cb6"></div>
    <div class="item" style="background: #a47512"></div>
    <div class="item" style="background: #e7b718"></div>
    <div class="item" style="background: #7ce718"></div>
    <!--  添加 i 的个数是列数减2  -->
    <i></i>
</div>

.box{
    width: 300px;
    background: #f58739;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.box .item{
    width: 80px;
    height: 80px;
}

.box > i{
    width: 80px;
}