CSS布局--flex

文章目录

  • flex
    • 容器属性
      • flex-direction
      • flex-wrap
      • flex-flow
      • justify-content
      • align-items
      • align-content
    • 项目属性
      • order
      • flex-grow
      • flex-shrink
      • flex-basis
      • flex
      • align-self
    • 双栏布局
    • 三栏布局
    • 水平垂直居中

flex

容器存在两根轴:水平主轴,垂直交叉轴。

容器属性

flex-direction

决定主轴的方向,即项目的排列顺序。flex-direction:row|row-reverse|column|column-reverse
CSS布局--flex_第1张图片

flex-wrap

一条轴线放不下时,如何换行。flex-wrap:nowrap|wrap|wrap-reverse

  • nowrap 默认不换行。一条轴线放不下时,自动压缩成一行显示。

在这里插入图片描述

  • wrap 换行。第一行在上方

在这里插入图片描述

  • wrap-reverse 换行。第一行在下方
    在这里插入图片描述

flex-flow

flex-flowflex-direction flex-wrap的简写形式,默认值为flex-flow:row nowrap

justify-content

定义项目在主轴上的对齐方式

  • flex-start 左对齐

CSS布局--flex_第2张图片

  • flex-end 右对齐

CSS布局--flex_第3张图片

  • center 居中
    CSS布局--flex_第4张图片

  • space-between 两端对齐
    CSS布局--flex_第5张图片

  • space-around 每个项目两侧的间隔相等

  • [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-BcvTNZkR-1651840775622)(Z:\FrontEndStudy\front-end-study\README\CSS\IMG\space-around.png)]

  • space-evenly 每个项目两侧的间隔相等

CSS布局--flex_第6张图片

align-items

定义项目在交叉轴上的对齐方式

  • flex-start

CSS布局--flex_第7张图片

  • flex-end

CSS布局--flex_第8张图片

  • center
    CSS布局--flex_第9张图片

  • baseline:项目的第一行文字的基线对齐
    CSS布局--flex_第10张图片

  • stretch:若项目未设置高度或设为auto,会占满整个容器
    CSS布局--flex_第11张图片

align-content

定义多根轴线的对齐方式,若项目只有一根轴线,该属性不起作用

  • flex-start
    CSS布局--flex_第12张图片

  • flex-end
    CSS布局--flex_第13张图片

  • center

CSS布局--flex_第14张图片

  • space-between

CSS布局--flex_第15张图片

  • space-around

    CSS布局--flex_第16张图片

  • stretch

    CSS布局--flex_第17张图片

项目属性

order

定义项目的排列顺序,数值越小,排列越靠前,默认为0

(下图设置为7的order为1,4的order为2,9的order为3,5的order为4,其他为5)

CSS布局--flex_第18张图片

flex-grow

定义项目的放大比例,默认为0。根据设置的值,按比例瓜分剩余空间

CSS布局--flex_第19张图片

flex-shrink

定义项目的缩小比例,默认为1,即若空间不足,项目将缩小。若某个项目设置为0,其余为1,当空间不足时,前者不缩小。负值无效

CSS布局--flex_第20张图片

flex-basis

定义项目在分配多余空间之前占据的主轴空间,即项目的本来大小

flex

flex-grow flex-shrink flex-basis的简写,默认为0 1 auto,后两个属性可选

  • flex:autoflex-grow:1 flex-shrink:1 flex-basis:auto
  • flex:none flex-grow:0 flex-shrink:0 flex-basis:auto

align-self

定义单个项目与其他项目不一样的对齐方式,可覆盖align-items属性。默认为auto,表示继承align-items属性,若没有父元素,等同于stretch

CSS布局--flex_第21张图片

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch

双栏布局

左边固定,右边自适应


在这里插入图片描述

水平垂直居中



CSS布局--flex_第22张图片

你可能感兴趣的