flex布局超级详细教程

flex布局超级详细教程

文章目录

  • flex布局超级详细教程
    • flex 布局父项常见属性
      • ①、flex-direction:设置主轴的方向
      • ②、 justify-content:主轴上的子元素排列方式
      • ③、flex-wrap:子元素是否换行
      • ④、align-content:侧轴上的子元素的排列方式 (**多行**)
      • ⑤、align-items:侧轴上的子元素的排列方式 **(单行**)
      • ⑥、flex-flow
    • flex布局子项常见属性
      • ①、flex 属性
      • ②、align-self 控制子项自己在侧轴的排列方式
      • ③、order 属性定义子项的排列顺序
      • ④、flex-group子项目延伸比率## 标题
    • 总结:

flex 布局父项常见属性

以下由6个属性是对父元素设置的

flex-direction:设置主轴的方向
justify-content:设置主轴上的子元素排列方式
flex-wrap:设置子元素是否换行
align-content:设置侧轴上的子元素的排列方式 (多行)
align-items:设置侧轴上的子元素的排列方式 (单行)
flex-flow:复合属性,相当于同时设置了 flex-direction 和 flex-wrap

align-content 和 align-items

align-items 适用于单行情况下,只有上对齐、下对齐、居中和拉伸
align-content 使用于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
总结就是单行找 align-itens 多行找 align-content

①、flex-direction:设置主轴的方向

主轴与侧轴

  • 在flex布局在,是分为主轴和侧轴两个方向,同样的叫法有:行和列,x轴和y轴

  • 默认主轴方向就是x轴得方向,水平向右

  • 默认侧轴方向就是y轴得方向,垂直向下

  • flex-direction 属性决定主轴的方向(即项目的排列方向

  • 注意:主轴和侧轴是会变化的,就看 flex-direction 设置为主轴,剩下的就是侧轴,而我们的子元素是跟着主轴来排列的

    属性值 解释说明
    row 默认值从左到右
    row-reverse 从右向左
    column 从上到下
    column-reverse 从下到上