Flex布局
- 定义
- flexible box:弹性盒状布局
- 容器控制内部元素的布局定位
- 伸缩元素,自由填充,自适应
- 常用术语:
flex container:flex容器
flex item:flex项目(元素)
flex direction:布局方向 - 属性
flex-direction:设置元素的排列方向【row、row-reverse(从右到左)、column】
flex-wrap:使容器内的元素换行【nowrap(不换行、压缩)、wrap(换行)】
justify-content:设置元素在主轴上的对齐方式【flex-start(左对齐)、flex-end(右对齐)、center(居中)、space-between(等比拆分)、space-around】
align-items:设置元素在交叉轴上的对齐方式【flex-start(左对齐)、flex-end(右对齐)、center(居中)、baseline(保证元素中的文字在同一条基准线)、stretch(拉伸)】
align-content:设置轴线的对齐方式
order:控制元素顺序
flex-grow:控制元素放大比例
flex-shrink:控制元素缩小比例
flex-basis:设置元素固定或自动空间的占比
slign-self:重写align-items父类属性
css引出外部样式:@import url("**.css");
upx:自适应像素单位、会根据屏幕大小计算比例