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
