flex布局

这里对flex布局的一些属性做一些总结

首先要先理解main axis和 across axis 这里就不做详解了
设置了display: flex属性的盒子叫flex container, 里面的子盒子叫flex items
flex container的css属性概述:

    .f {
      display: flex;  /* 开启flex布局 */
      flex-direction: row;  /* 设置main axis方向, 默认为row,从左上角到右上角 */
      flex-wrap: nowrap;  /* 控制是否换行,默认不换行 */
      justify-content: center; /* 控制水平盒子之间的空隙 */
      align-content: center; /* 控制垂直多行盒子之间的空隙 */
      align-items: center; /* 控制一行盒子的垂直空隙, 类似text-align */
      flex-flow: nowrap;  /*flex-direction和flex-wrap的简写, 用的少 */
    }

flex items的属性概述

.t {
      order: 1;  /* 盒子的order越小, 位置越靠前(前指靠近主轴的起始点) */
      flex-grow: 1;  /* 控制剩余空间的分配 */
      flex-shrink: 1; /* 控制盒子伸缩 */
      flex-basis: 100px; /* 控制盒子宽度 优先级高于width */
      align-self: center; /* 单独设置一个盒子的 align-items*/
      flex: 1;  /* flex-grow, flex-shrink 和 flex-basis的简写.常用写法: flex: 1;  表示flex-grow: 1*/
    }

现在单独对每个属性做下具体介绍, 这里只介绍作用,不具体讲解属性值

fflex container的css属性:

display: flex 开启flex布局,
注意开启后子元素的float、clear和vertical-align属性将失效
flex-direction 设置main axis方向, 默认为row,从左上角到右上角
默认为row:

image.png

设置为column后

image.png
flex-wrap 控制是否换行,默认不换行
flex-wrap: nowrap 不换行, 下图其实每个子盒子在css设置了宽度100px, 父盒子宽度为500px, 但是子盒子默认不换行, 所以进行了收缩

image.png

flex-wrap: wrap

image.png
justify-content 控制水平盒子之间的空隙
默认的空隙是这样的

image.png

设置 justify-content: space-around后

image.png

align-content: center; 控制垂直多行盒子之间的空隙
默认情况下

image.png

设置了align-content: space-around; 后

image.png
align-items 控制一行盒子的垂直空隙, 类似text-align
默认

image.png

align-items: center效果

image.png
flex-flow 缩写属性, 用的少

flex items属性

order: 1; 盒子的order越小, 位置越靠前(前指靠近主轴的起始点)

image.png
flex-grow 控制剩余空间的分配
这里父盒子宽度500px 子盒子100px 默认:

image.png

设置s2的 flex-grow: 1, 这里将剩余空间分配给了s2, 计算的方法是 剩余空间*flex-grow的值, 也就是 200*1, s2分配了200px

image.png

s2设置为0.5时, 分配了100px

image.png
flex-shrink: 1; 控制盒子伸缩此属性默认值为1,也就是会收缩, 设为0不收缩. 首先需要不换行
设置了换行:

image.png

没设置换行: 这里父盒子500px 子盒子200px, s1flex-shrink: 0, s2为1 s3为 2
计算方法: 子盒子比父盒子大了100px 那么 s2收缩像素为100* 1/(1+2)=33.3 s3:100* 2/(1+2) = 66.6 现在宽度: s1:200px s2:166px s3: 133px

image.png
flex-basis 类似与设置了width,优先级比width高
align-self 单独设置一个盒子的 align-items
先设置align-items: center

image.png

现在单独对第一行第一个s2设置了 align-self: flex-start;

image.png
flex: 1; flex-grow, flex-shrink 和 flex-basis的简写.常用写法: flex: 1; 表示flex-grow: 1

最后编辑于：2020.07.14 14:27:22