Flex布局

Flexible Layout Box Model

常见的布局模型 Layout Model

  • block-layout
  • inline-layout
  • table-layout
  • positioned-layout
  • flexible-box-layout
  • grid-layout

flex盒子

Flex布局_第1张图片
image.png

display属性

display:flex

flex容器属性

flex容器属性 flex-direction

定义子元素在主轴的排列方向

  • row
  • row-reverse
  • column
  • column-reverse
flex-direction row

row是默认值


Flex布局_第2张图片
image.png
flex-direction row-reverse
Flex布局_第3张图片
image.png
flex-direction column
Flex布局_第4张图片
image.png
flex-direction column-reverse    

同理,由下到上

flex容器属性 flex-wrap

元素的换行

  • nowrap
  • wrap
  • wrap-reverse
flex-wrap: nowrap

nowrap是默认值,此时,它的子元素宽度将不完全生效,会挤一挤


image.png
flex-wrap: wrap
li{
  width:150px
}
Flex布局_第5张图片
image.png
flex-wrap: wrap-reverse
Flex布局_第6张图片
image.png

flex容器属性-*flex-flow

复合属性

flex-flow: flex-direction flex-wrap

flex容器属性-align-content

控制容器内多行在交叉轴上的排列方式

  • flex-start
  • flex-end
  • center
  • stretch
  • space-between
  • apace-around
    必须要换行
flex-wrap: wrap
align-content: flex-start
Flex布局_第7张图片
image.png
align-content: flex-end
Flex布局_第8张图片
image.png
align-content: center    //中间
align-content: stretch    //拉伸
Flex布局_第9张图片
image.png
align-content: space-between    
Flex布局_第10张图片
image.png
align-content: space-around
Flex布局_第11张图片
image.png

flex容器属性-justify-content

子元素在主轴上的对齐模式

  • flex-start
  • flex-end
  • center
  • space-between
  • space-around
justify-content: flex-start    //默认值
justify-content: center
Flex布局_第12张图片
image.png
justify-content: center
Flex布局_第13张图片
image.png
justify-content: space-around
image.png
justify-content: space-between
image.png

flex容器属性-align-items

子元素在交叉轴上的对齐模式

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
align-items: flex-start    //默认
align-items: flex-end    
Flex布局_第14张图片
image.png
align-items: center    
Flex布局_第15张图片
image.png
align-items: baseline

以内容的基线对齐

Flex布局_第16张图片
image.png

align-items: stretch
Flex布局_第17张图片
image.png

伸缩项目属性

Flex子元素属性-order

控制子元素出现在父容器的顺序

  • 0 默认值
  • 任何整数
// flex子元素
order: 1

Flex子元素属性-flex-grow

将剩余空间划分给子元素,也就是说对内容以外的空间进行平均分配的,设置为同一个值,将等分

  • 0 //默认值
  • 数字(不能为负数)
flex-grow: 1

Flex子元素属性-flex-shrink

用于设置弹性容器中项目的收缩比率,默认值为1

  • 1 //默认值,默认等比压缩
  • 数字(不能为负数)
flex-shrink: 0      // 将不会被压缩

Flex子元素属性-flex-basis

计算前刨去的空间,默认值为auto

  • auto
  • [width]
  • 0
flex-basis: 10rem

伸缩项目分配的空间 = 伸缩容器的空间 - basis设置的空间 - 内容所占空间

image.png

flex-basis: auto    //默认值
flex-basis: 0
image.png

Flex布局_第18张图片
image.png

Flex子元素属性-*flex

伸展(flex-grow),收缩(flex-shrink),基准(flex-basis)

  • 1 0 auto
  • none
  • 0
flex: 1

等同于

flex-grow: 1;
flex-shrink: 0;
flex-basis: 0;

Flex子元素属性-align-self

采取本身的对齐方式

  • flex-start
  • flex-end
  • center
  • baseline
  • stretch
Flex布局_第19张图片
image.png

你可能感兴趣的