Flex布局

Flexible Layout Box Model

常见的布局模型 Layout Model

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

flex盒子

image.png

display属性

display:flex

flex容器属性

flex容器属性 flex-direction

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

• row
• row-reverse
• column
• column-reverse

flex-direction row

row是默认值

image.png

flex-direction row-reverse

image.png

flex-direction column

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
}

image.png

flex-wrap: wrap-reverse

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

image.png

align-content: flex-end

image.png

align-content: center    //中间

align-content: stretch    //拉伸

image.png

align-content: space-between    

image.png

align-content: space-around

image.png

flex容器属性-justify-content

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

• flex-start
• flex-end
• center
• space-between
• space-around

justify-content: flex-start    //默认值

justify-content: center

image.png

justify-content: center

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    

image.png

align-items: center    

image.png

align-items: baseline

以内容的基线对齐

image.png

align-items: stretch

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

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

image.png