46 lines
1.1 KiB
Markdown
46 lines
1.1 KiB
Markdown
|
# flex
|
||
|
|
|
||
|
|
flex 意为弹性盒子，用来为盒模型提供最大的灵活性
|
||
|
|
|
||
|
|
### flex 使用
|
||
|
|
|
||
|
|
任何一个元素都能被指定为flex 容器
|
||
|
|
|
||
|
|
```
|
||
|
|
/*
|
||
|
|
选中元素为块级元素时
|
||
|
|
*/
|
||
|
|
display:flex
|
||
|
|
|
||
|
|
|
||
|
|
/*
|
||
|
|
选中元素为内联元素时
|
||
|
|
*/
|
||
|
|
display:inline-flex
|
||
|
|
```
|
||
|
|
|
||
|
|
### 基本概念
|
||
|
|
|
||
|
|
通过display:flex 定义的元素称为容器，他包含的元素是容器成员，称为”项目“
|
||
|
|
|
||
|
|
容器默认存在两个轴，水平主轴和垂直的交叉轴
|
||
|
|
|
||
|
|
水平主轴的起点叫做 main start 结束位置叫做 main end
|
||
|
|
|
||
|
|
垂直交叉轴的起点叫做 cross start 结束位置叫做 cross end
|
||
|
|
|
||
|
|
### 容器的属性
|
||
|
|
|
||
|
|
- flex-direction 声明容器使用的轴是水平的还是垂直的
|
||
|
|
- row 水平
|
||
|
|
- column 垂直
|
||
|
|
- justify-content 声明排列的方式
|
||
|
|
- center 居中
|
||
|
|
- space-around 每个项目两侧的间隔相等 项目到边框有间距
|
||
|
|
- space-between 两端对齐 项目之间的间隔都相等
|
||
|
|
- align-items 定义项目在交叉轴上的排列方式
|
||
|
|
- center 居中
|
||
|
|
- flex-start 交叉轴起点对齐（拓展）
|
||
|
|
- flex-end 交叉轴终点对齐
|
||
|
|
- baseline 第一行文字的基线对齐
|
||
|
|
- stretch 默认占满整个容器的高度
|