Skip to content

Commit

Permalink
update: flex 布局
Browse files Browse the repository at this point in the history
  • Loading branch information
qianguyihao committed Oct 8, 2019
1 parent 93dea6b commit 996bfb3
Showing 1 changed file with 9 additions and 13 deletions.
22 changes: 9 additions & 13 deletions 02-CSS基础/14-CSS3属性:Flex布局图文详解.md
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,7 @@ PS:主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更

备注:一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。



### `flex-direction`属性:设置弹性元素的排列方向
### flex-direction 属性

`flex-direction`:用于设置盒子中**子元素**的排列方向。属性值可以是:

Expand Down Expand Up @@ -223,10 +221,13 @@ PS:主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更
```


### flex-wrap 属性:控制弹性元素溢出时的换行处理
### flex-wrap 属性

### justify-content 属性:控制子元素在主轴上的排列方式
`flex-wrap`:控制子元素溢出时的换行处理。

### justify-content 属性

`justify-content`:控制子元素在主轴上的排列方式。

## 弹性元素

Expand Down Expand Up @@ -360,9 +361,9 @@ PS:主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更
```


### align-items:设置子元素在侧轴上的对齐方式
### align-items 属性

- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是:
`align-items`设置子元素在**侧轴上的对齐方式**。属性值可以是:
- `flex-start` 从侧轴开始的方向对齐
- `flex-end` 从侧轴结束的方向对齐
- `baseline` 基线 默认同flex-start
Expand Down Expand Up @@ -615,7 +616,7 @@ PS:主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更

### flex 相关的教程

- - [后盾人 flex 教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html)
- [后盾人 flex 教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html)

## 技巧:使用 margin 自动撑满剩余空间

Expand All @@ -624,8 +625,3 @@ PS:主轴和侧轴并不是固定不变的,可以通过 `flex-direction` 更








0 comments on commit 996bfb3

Please sign in to comment.