Vue前端学习
Vue前端学习type
status
date
slug
summary
tags
category
icon
password
1. Flex布局：
Webkit 内核的浏览器，必须加上-webkit前缀。
使用flex的元素称为容器 元素内部的元素称为项目
容器可用的style(第一个值是默认):
- 1 方向 flex-direction: row（左到右） row_reverse | column（上到下） | column-reverse
1.2 换行
flex-warp
nowarp | warp | warp-reverse
1.3 flex-flow (方向+换行)
1.4 justify-content(横向上对齐方式)
flex-start（左对齐）
flex-end（右对齐）
center（居中）
space-between（两端对齐）
space-around（每个项目左右两侧相等）
1.5 align-items（竖向轴上对齐方式）
stretch（默认值 占满容器高度）
flex-start（项目顶部线对齐）
flex-end（项目底部线对齐）
center（中点线对齐）
baseline（项目第一行文字的基线对齐）
1.6 align-content（多根轴线生效，其实就是xy轴）
flex-start（左上角对齐）
flex-end（左下角对齐）
center（中心对齐）
flex-between（两端对齐）
space-around（两侧间隔相等）
stretch（默认）
项目属性
2.1 order
1 2 3 (数值越小排列越靠前，默认0)
2.2 flex-grow
放大比例
2.3 flex-shrink（负数无效）
缩小比例
2.4 flex-basis
设置每一个项目的初始宽度 和轴方向有关，水平即宽 垂直即高
2.5 flex
flex-grow(放大比例) flex-shrink(缩小比例) flex-basis（初始长度）的复合属性
默认值0 1 auto
2.6 align-self
设置单个项目的对齐方式，默认auto 表示继承容器
stretch（占满容器高度）
flex-start（项目顶部线对齐）
flex-end（项目底部线对齐）
center（中点线对齐）
baseline（项目第一行文字的基线对齐）
Loading...