flex 布局(css)

1、常见的父项布局

  • flex-direction 设置主轴的方向
包含四个属性值:

row: 默认值,表示沿水平方向,由左到右。
row-reverse :表示沿水平方向,由右到左
column:表示垂直方向,由上到下
column-reverse:表示垂直方向,由下到上
  • justify-content: 设置主轴上的子元素排列方式 属性定义了项目在主轴上的对齐方式
    注意: 使用这个属性之前一定要确定好主轴是哪个
flex-start:默认值,左对齐
flex-end:右对齐
center:居中对齐
space-between:两端对齐
space-around:每个项目两侧的间距相等
  • flex-wrap: 设置子元素是否换行
nowrap 默认 不换行
wrap 换行
  • align-content: 设置侧轴上的子元素的排列方式(多行)
  • align-items:设置侧轴上的子元素排列方式(单行)
flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中 (垂直居中)
stretch 拉伸

align-contentalign-items 区别

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

  • flex-flow: 复合属性, 相当于同时设置了 flex-directionflex-wrap

2、常见的子项布局

  • flex 属性定义子项目分配剩余空间,用flex来表示占多少份数。默认为0
    案例一
案例二

案例二
  • align-self控制子项自己在侧轴上的排列方式
    align-self属性允许单个项目有与其他项目不一样的对齐方式,
    可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch

  • order属性定义项目的排列顺序,数值越小,排列越靠前,默认为0。
    注意:和z-index 不一样(相反的意思)。

    image.png

你可能感兴趣的:(flex 布局(css))