flex 布局
flex的几个核心概念
主轴:Flex容器的主轴主要用来配置Flex项目,默认是水平方向
侧轴:与主轴垂直的轴称作侧轴,默认是垂直方向的
方向:默认主轴从左向右,侧轴默认从上到下
通过 flex-direction 来设定主轴和侧轴。
flex应用:
1)、指定一个盒子为伸缩盒子 display: flex
2)、设置属性来调整此盒的子元素的布局方式 例如 flex-direction
3)、明确 主侧轴 及 方向
4)、可互换主侧轴,也可改变方向
A flex-direction调整主轴方向(默认为水平方向)
该属性通过定义flex容器的主轴方向来决定felx子项在flex容器中的位置
row水平方向
reverse-row反转
column垂直方向
reverse-column反转列
①伸缩布局display:flex 默认是 水平
display:flex 显示效果② 伸缩布局display:flex 设置主轴方向
设置主轴方向 设置主轴方向③ 伸缩布局flex-direction: row-reverse
flex-direction: row-reverse 显示效果④ 伸缩布局 flex-direction: column-reverse;
flex-direction: column-reverse; 主轴反转B justify-content 设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start 起点对齐
flex-end 终点对齐
center 中间对齐
space-around 环绕
space-between 两端对齐
① 主轴对齐方式 justify-content: flex-start;
主轴对齐方式 justify-content: flex-start② 主轴对齐方式 justify-content: flex-end
justify-content: flex-end justify-content: flex-end③ 主轴对齐方式 justify-content: center;
justify-content: center justify-content: center;⑧ 主轴对齐方式 justify-content:space-around
justify-content:space-around justify-content:space-around④ 主轴对齐方式 justify-content:space-between
justify-content:space-between justify-content:space-betweenC align-items设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。
flex-start、起点对齐
flex-end、终点对齐
center中间对齐
Strethc:拉伸;
① 侧轴对齐方式 align-items :flex-start(默认)
align-items :flex-start align-items :flex-start② 侧轴对齐方式 align-items :flex-end
align-items :flex-end align-items :flex-end③ 侧轴对齐方式 align-items :center
align-items :center align-items :center④ 侧轴对齐方式 align-items :stretch
align-items :stretch align-items :stretchD flex控制子项目的缩放比例
不指定flex属性,则不参与分配
① 子元素缩放比例 flex:1
子元素缩放比例 flex:1② 子元素缩放比例 flex:1:6:1
子元素缩放比例 子元素缩放比例③ 子元素缩放比例 一个元素定宽,剩下的自动按比例分
flex: 200px 1:3 flex: 200px 1:3flex-wrap:wrap 让弹性盒元素在必要的时候拆行
宽度不够时候,自动换行
网友评论