add: flex 布局
This commit is contained in:
qianguyihao
parent
8647050cfd
commit
71c012f857
@ -1,77 +1,87 @@
|
|||||||
|
|
||||||
## 多列布局
|
|
||||||
|
|
||||||
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。
|
|
||||||
|
|
||||||
格式举例：
|
|
||||||
|
|
||||||
```css
|
|
||||||
.wrapper{
|
|
||||||
/* 分成几列 */
|
|
||||||
-webkit-column-count: 3;
|
|
||||||
|
|
||||||
/* 每列之间，用分割线隔开 */
|
|
||||||
-webkit-column-rule: 1px dashed red;
|
|
||||||
|
|
||||||
/* 设置列之间的间距 */
|
|
||||||
-webkit-column-gap: 60px;
|
|
||||||
|
|
||||||
/* 设置每一列的宽度 */
|
|
||||||
/* -webkit-column-width: 400px; */
|
|
||||||
|
|
||||||
/*-webkit- -moz- -ms- -o-*/
|
|
||||||
}
|
|
||||||
|
|
||||||
h4{
|
|
||||||
/* 设置跨列：让h4这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/
|
|
||||||
-webkit-column-span: all;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
|
## 前言
|
||||||
|
|
||||||
|
CSS3中的 flex 属性，在布局方面做了非常大的改进，使得我们对**多个元素之间**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性和自适应性，在网页开中可以发挥极大的作用。
|
||||||
|
|
||||||
## flex：伸缩布局
|
### flex 初体验
|
||||||
|
|
||||||
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
|
我们先来看看下面这个最简单的布局：
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上面这张图中的布局是我们都熟悉的：默认文档流中，在一个父容器里放置多个块级的子元素，那么，这些子元素会默认从上往下排列。
|
||||||
|
|
||||||
如上图所示，有几个概念需要了解一下：
|
在此基础之上，如果我给父容器仅仅加一个 `display: flex`属性，此时，这些子元素的布局会摇身一变：
|
||||||
|
|
||||||
- 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
|
|
||||||
|
|
||||||
|
没错，子元素们会**在水平方向上，从左至右排列**，就是这么神奇。到此为止，你已经掌握了关于 flex 的一半的知识。
|
||||||
|
|
||||||
|
### flex 布局的优势
|
||||||
|
|
||||||
|
1、**flex 布局的子元素不会脱离文档流**，很好地遵从了“流的特性”。
|
||||||
|
|
||||||
|
但你如果用 float 来做布局，float 属性的元素会脱离文档流，而且会涉及到各种 BFC、清除浮动的问题。浮动相关的问题，比较麻烦，所以也成了面试必问的经典题目。但有了 flex 布局之后，这些问题都不存在的。
|
||||||
|
|
||||||
|
2、**flex 是一种现代的布局方式，是 W3C 第一次提供真正用于布局的 CSS 规范**。 flex 非常提供了丰富的属性，非常灵活，让布局的实现更佳多样化，且方便易用。
|
||||||
|
|
||||||
|
flex 唯一的缺点就在于，它不支持低版本的 IE 浏览器。
|
||||||
|
|
||||||
|
### flex 的兼容性问题
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
上图中可以看到， flex 布局不支持 IE9 及以下的版本。如果你的页面不需要处理 IE浏览器的兼容性问题，则可以放心大胆地使用 flex 布局。
|
||||||
|
|
||||||
|
但是，比如网易新闻、淘宝这样的大型网站，面对的是海量用户，即便使用低版本浏览器的用户比例很少，但绝对基数仍然是很庞大的。因此，这些网站为了兼容低版本的 IE 浏览器，暂时还不敢尝试使用 flex 布局。
|
||||||
|
|
||||||
|
### 概念：弹性盒子、子元素
|
||||||
|
|
||||||
|
在讲 flex 的知识点之前，我们事先约定两个概念：
|
||||||
|
|
||||||
|
- **弹性盒子**：指的是使用 `display:flex` 或 `display:inline-flex` 声明的**父容器**。
|
||||||
|
|
||||||
|
- **子元素/弹性元素**：指的是父容器里面的子元素们（父容器被声明为 flex 盒子的情况下）。
|
||||||
|
|
||||||
|
### 概念：主轴和侧轴
|
||||||
|
|
||||||
|
在上面的“初体验”例子中，我们发现，弹性盒子里面的子元素们，默认是从左至右排列的，这个方向，代表的就是主轴的方向。
|
||||||
|
|
||||||
|
在此，我们引入主轴和侧轴的概念。
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
如上图所示：
|
||||||
|
|
||||||
|
- 主轴：flex容器的主轴，默认是水平方向，从左向右。
|
||||||
|
|
||||||
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
|
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
|
||||||
|
|
||||||
PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
|
PS：主轴和侧轴并不是固定不变的，可以通过 `flex-direction` 更换方向，我们在后面会讲到。
|
||||||
|
|
||||||
|
## 弹性盒子
|
||||||
|
|
||||||
|
### 声明定义
|
||||||
|
|
||||||
|
使用 `display:flex` 或 `display:inline-flex` 声明一个**父容器**为弹性盒子。此时，这个父容器里的子元素们，会遵循弹性布局。
|
||||||
|
|
||||||
|
备注：一般是用 `display:flex`这个属性。`display:inline-flex`用得较少。
|
||||||
|
|
||||||
|
|
||||||
### 设置伸缩布局的步骤
|
|
||||||
|
|
||||||
（1）指定一个盒子为伸缩布局：
|
### `flex-direction`属性：设置弹性元素的排列方向
|
||||||
|
|
||||||
```javascript
|
`flex-direction`：用于设置盒子中**子元素**的排列方向。属性值可以是：
|
||||||
display: flex;
|
|
||||||
```
|
|
||||||
|
|
||||||
（2）设置 `flex-direction` 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。
|
| 属性值 | 描述 |
|
||||||
|
|:-------------|:-------------|
|
||||||
（3）可互换主侧轴，也可改变主侧轴的方向。
|
| row | 从左到右水平排列子元素（默认值） |
|
||||||
|
|column|从上到下垂直排列子元素|
|
||||||
|
| row-reverse |从右向左排列子元素 |
|
||||||
### 各属性详解
|
|column-reverse|从下到上垂直排列子元素|
|
||||||
|
|
||||||
**1、`flex-direction`属性：**设置主轴方向。
|
|
||||||
|
|
||||||
- `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
|
|
||||||
- `row` 水平方向（默认值）
|
|
||||||
- `reverse-row` 反转
|
|
||||||
- `column` 垂直方向
|
|
||||||
- `reverse-column` 反转列
|
|
||||||
|
|
||||||
|
备注：如果我们不给父容器写`flex-direction`这个属性，那么，子元素默认就是从左到右排列的。
|
||||||
|
|
||||||
代码演示：
|
代码演示：
|
||||||
|
|
||||||
@ -213,8 +223,14 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
**2、justify-content：**设置子元素在**主轴上的对齐方式**。
|
### flex-wrap 属性：控制弹性元素溢出时的换行处理
|
||||||
|
|
||||||
|
### justify-content 属性：控制子元素在主轴上的排列方式
|
||||||
|
|
||||||
|
|
||||||
|
## 弹性元素
|
||||||
|
|
||||||
|
### justify-content 属性
|
||||||
|
|
||||||
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
|
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
|
||||||
- `flex-start` 从主轴的起点对齐（默认值）
|
- `flex-start` 从主轴的起点对齐（默认值）
|
||||||
@ -224,7 +240,7 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
- `space-between` 两端对齐 平分
|
- `space-between` 两端对齐 平分
|
||||||
|
|
||||||
|
|
||||||
代码演示：
|
代码演示：（在浏览器中打开看效果）
|
||||||
|
|
||||||
```html
|
```html
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
@ -344,8 +360,7 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
**3、align-items：**设置子元素在**侧轴上的对齐方式**。
|
### align-items：设置子元素在侧轴上的对齐方式
|
||||||
|
|
||||||
|
|
||||||
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
|
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
|
||||||
- `flex-start` 从侧轴开始的方向对齐
|
- `flex-start` 从侧轴开始的方向对齐
|
||||||
@ -354,7 +369,6 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
- `center` 中间对齐
|
- `center` 中间对齐
|
||||||
- `stretch` 拉伸
|
- `stretch` 拉伸
|
||||||
|
|
||||||
|
|
||||||
代码演示：
|
代码演示：
|
||||||
|
|
||||||
```html
|
```html
|
||||||
@ -481,8 +495,7 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
### `flex`属性：设置子盒子的权重
|
||||||
**4、`flex`属性**：设置子盒子的权重
|
|
||||||
|
|
||||||
代码演示：
|
代码演示：
|
||||||
|
|
||||||
@ -578,7 +591,9 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
</html>
|
</html>
|
||||||
```
|
```
|
||||||
|
|
||||||
## CSS Flexbox 可视化手册
|
## 相关链接
|
||||||
|
|
||||||
|
### CSS Flexbox 可视化手册
|
||||||
|
|
||||||
可视化的截图如下：（请点开链接，查看大图）
|
可视化的截图如下：（请点开链接，查看大图）
|
||||||
|
|
||||||
@ -590,7 +605,7 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
|
|
||||||
- 【中文翻译】CSS Flexbox 可视化手册：<https://zhuanlan.zhihu.com/p/56046851>
|
- 【中文翻译】CSS Flexbox 可视化手册：<https://zhuanlan.zhihu.com/p/56046851>
|
||||||
|
|
||||||
## flex 相关的推荐文章
|
### flex 相关的推荐文章
|
||||||
|
|
||||||
- flex 效果在线演示：<https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/>
|
- flex 效果在线演示：<https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/>
|
||||||
|
|
||||||
@ -598,17 +613,11 @@ PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换
|
|||||||
|
|
||||||
- CSS3 Flexbox 布局完全指南 | 中文翻译：<https://www.html.cn/archives/8629>
|
- CSS3 Flexbox 布局完全指南 | 中文翻译：<https://www.html.cn/archives/8629>
|
||||||
|
|
||||||
|
### flex 相关的教程
|
||||||
|
|
||||||
|
- - [后盾人 flex 教程](http://houdunren.gitee.io/note/css/10%20%E5%BC%B9%E6%80%A7%E5%B8%83%E5%B1%80.html)
|
||||||
|
|
||||||
|
## 技巧：使用 margin 自动撑满剩余空间
|
||||||
## 我的公众号
|
|
||||||
|
|
||||||
想学习**代码之外的技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
|
|
||||||
|
|
||||||
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -27,9 +27,7 @@
|
|||||||
|
|
||||||
1、**table 表格布局**：早期使用的布局，如今用得很少。
|
1、**table 表格布局**：早期使用的布局，如今用得很少。
|
||||||
|
|
||||||
2、**float 浮动 + margin**：兼容性好。
|
2、**float 浮动 + margin**：为了兼容低版本的IE浏览器，很多网站（比如腾讯新闻、网易新闻、淘宝等）都会采用 float 布局。
|
||||||
|
|
||||||
为了兼容低版本的IE浏览器，很多网站（比如腾讯新闻、网易新闻、淘宝等）都会采用 float 布局。
|
|
||||||
|
|
||||||
3、**inline-block 布局**：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
3、**inline-block 布局**：对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user