flex 布局
flex布局简介
Flex是Flexible Box的缩写 flex布局表示弹性布局,可以为盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
可以解决元素居中问题,适配不同大小的屏幕,和移动端。
flexd的属性
有六个常用属性分别为:
- flex-direction 设置容器主轴的方向
- flex-wrap 指定 flex 元素单行显示还是多行显示
- flex-flow 是 flex-direction 和 flex-wrap 的简写
- justify-content 设置主轴上的子元素排列方式
- align-items 设置侧轴上的子元素的排列方式(单行)
- align-content 设置侧轴上的子元素的排列方式(多行)
flex-direction 设置容器主轴的方向
在 flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列、x轴和轴
- 默认主轴方向就是x轴方向,水平向右
- 默认侧轴方向就是y 轴方向,水平向下
flex-direction属性值
row (初始值)从左到右
row-reverse 从右到左
column 从上到下
column-reverse 从上到下
flex-wrap 指定 flex 元素单行显示还是多行显示
默认情况下,项目都排在一条线(又称”轴线”)上flex-wrap属性定义,flex布局中默认是不换行的,如果装不开,会缩小子元素的宽度,放到父元素里面。
flex-wrap 属性值
nowrpa 默认值,不换行(缩小子元素宽度,放到父元素里面)
wrpa 换行
flex-flow 是 flex-direction 和 flex-wrap 的简写
flew-flow 属性是 flex-direction 和 flex-wrap 属性的复合属性
flex-flow 的属性值
justify-content 设置主轴上的子元素排列方式
justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
justify-conten 属性值
flex-start 默认值 从头部开始 如果主轴是x轴,则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐( 如果主轴是x轴则 水平居中)
space-around 平分剩余空间
space-between 先两边贴边 再平分剩余空间( 重要)
align-items 设置侧轴上的子元素的排列方式(单行)
该属性是控制子项在侧轴(默认是y轴)上的排列方式在子项为单项的时候使用。
align-items 属性值
flex-start 默认值 从上到下
flex-end 从下到上
center 挤在一起居中( 垂直居中 )
stretch 拉伸(盒子不要给高度)
align-content 设置侧轴上的子元素的排列方式(多行)
设置子项在侧轴上的排列方式并且只能用于子项出现 换行的情况(多行),在单行下没有效果。
align-content属性值
flex-start 默认值在侧轴的头部开始排列
flex-end 在侧轴的尾部开始排列
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头,再平分剩余空间
stretch 设置子项元素高度平分父元察高度