浅说flex布局

flex布局

作用: 基于 Flex 精确灵活控制块级盒子的布局方式，避免浮动布局中脱离文档流现象发生

使用方法:给父级添加display:flex

组成:弹性容器,弹性盒子,主轴侧轴

主轴对齐方式:

justify-content:属性值

常用属性值有以下几种:

• center=>沿主轴居中排列

• space-around=>弹性盒子的两边都有相等的间隙,特点盒子与盒子的间隙是,盒子到容器的两倍

• space-between=>弹性盒子沿主轴均匀分布,空白间隙均分在盒子之间

• space-evenly=>弹性盒子沿主轴均匀分布,盒子与盒子之间的间隙与盒子到容器之间的间隙相等

侧轴对齐

align-items 单行对齐方式

flex-start 起点开始依次排列

flex-end 终点开始依次排列

center 沿侧轴居中排列

stretch 默认效果, 弹性盒子沿着侧轴线被拉伸至铺满容器

伸缩比

把父盒子分为若干份数，每个子盒子各占几份。

flex:1; 一定给子盒子加

一定要给子盒子添加。

子盒子默认高度会和父盒子一样高。

圣杯布局

特点:两边的大小固定不变,中间宽度自适应

• 两边盒子固定大小

• 中间盒子 flex:1;沾满剩余空间

  Document   .box{     margin: 100px auto;     display: flex;     justify-content: space-between;     width: 40%;     height: 80px;     background-color: pink;   }   .box span:nth-child(1){     width: 50px;     height: 80px;     background-color: red;   }   .box span:nth-child(3){     width: 50px;     height: 80px;     background-color: red;   }   .box span:nth-child(2){   //中间的盒子沾满剩余的空间     flex: 1;     margin: 0 20px;     background-color: blue;   }
    1   2   3
  ```

主轴方向

方法:flex-direction:属性值

默认主轴是水平方向,侧轴是垂直方向

column 列,垂直

弹性盒子换行

flex-wrap:wrap

多行对齐方式调整:align-content