CSS笔记- flex 布局

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

• 主轴（main axis）：是沿着 flex 元素放置的方向延伸的轴
• 交叉轴（cross axis）：是垂直于 flex 元素放置方向的轴
• flex容器（flex container）：设置了 display: flex 的父元素
• flex项（flex item）：在 flex 容器中表现为弹性盒子的元素

flex容器

主轴方向

提供 flex-direction 属性设置主轴方向。

• row: 默认值，主轴被定义为与文本方向相同
• row-reverse: 主轴被定义为与文本方向相反
• column: 主轴起点与主轴终点和书写模式的前后点相同
• column-reverse: 主轴起点与主轴终点和书写模式的前后点相反

section {
    display: flex;
    flex-direction: row;
}

是否允许换行

提供 flex-wrap 属性指定 flex 元素单行显示还是多行显示。 如果允许换行，这个属性允许你控制行的堆叠方向。

• nowrap: 默认值，浮动的元素摆放一行，可能会溢出
• wrap: 浮动的元素被显示到多行中
• wrap-reverse：浮动的元素被显示到多行中，顺序相反

section {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

flew-flow

flex-flow 属性是 flex-direction 和 flex-wrap 的简写。

section {
    display: flex;
    flex-flow: row nowrap;
}

flex项的尺寸

flex-basis 初始大小

flex-basis 属性设置flex项在主尺寸中的初始大小。

• 当同时设置 flex-basis 和 width ， flex-basis 优先级更高

.box {
    flex-basis: 100px;
}

flex-grow 增长系数

flex-grow 属性设置flex项在主尺寸中的增长系数。

• 无单位的比例值
• 设置项在容器中分配剩余空间的相对比例
• 所有兄弟 flex-grow 系数相同时，相同比例分配

.box {
    flex-grow: 1;
    flex-basis: 100px;
}

flex-shrink 收缩规则

flex-shrink 属性设置flex项在主尺寸中的收缩规则。

• 无单位的比例值
• 仅在默认宽度之和大于容器的时候才会发生收缩

.box {
    flex-shrink: 2;
    flex-basis: 100px;
}

flex 简写属性

flex 是 flex-grow , flex-shrink , flex-basis 的简写，设置了弹性项如何增大或缩小以适应其弹性容器中可用的空间。

• initial: 元素会根据自身宽高设置尺寸(不吸收额外自由空间), 相当于将属性设置flex: 0 1 auto
• auto: 元素会根据自身的宽度与高度来确定尺寸(吸收额外自由空间), 相当于将属性设置flex: 1 1 auto
• none: 元素会根据自身宽高来设置尺寸(完全非弹性), 相当于将属性设置flex: 0 0 auto
• 初始值为： flex: 0 1 auto
• 省略的默认值： flex-grow 为 0， flex-shrink 为 1， flex-basis 为 auto

    /* 一个值，无单位数字：flex-grow as: flex:<number> 1 0; */
    flex: 2;
    
    /* 一个值，width/height: flex-basis */
    flex: 10em;
    flex: 30px;
    flex: min-content;
    
    /* 两个值：flex-grow | flex-basis first needs flex-grow */
    flex: 1 30px;
    
    /* 两个值：flex-grow | flex-shrink first needs flex-grow */
    flex: 2 2;
    
    /* 三个值：flex-grow | flex-shrink | flex-basis(order needs)*/
    flex: 2 2 10%;

对齐

主轴的对齐方式

justify-content 属性定义了浏览器之间，如何分配顺着弹性容器主轴的元素之间及其周围的空间。

 #content {
    display: flex;
    justify-content: center;     /* 居中排列 */
    justify-content: start; /* 从行首起始位置开始排列 */
    justify-content: end;   /* 从行尾位置开始排列 */
    justify-content: space-between;  /* 均匀排列每个元素首个元素放置于起点，末尾元素放置于终点 */
    justify-content: space-around;  /* 均匀排列每个元素每个元素周围分配相同的空间 */
    justify-content: space-evenly;  /* 均匀排列每个元素 每个元素之间的间隔相等 */
    justify-content: stretch;       /* 均匀排列每个元素'auto'-sized 的元素会被拉伸以适应容器的大小 */
    
}

交叉轴的对齐方式

align-items 设置项目在其包含块中在交叉轴方向上的对齐方式。

#content {
    display: flex;
    /*元素在侧轴居中*/
    align-items: center;
    /*元素向侧轴起点对齐*/
    align-items: start;
    /*元素向侧轴终点对齐*/
    align-items: end;
    /*弹性项包含外边距的交叉轴尺寸被拉升至行高*/
    align-items: stretch;
}