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