webcourse/Webcourse
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
3975268ef4
Webcourse/02-CSS基础/14-CSS3属性详解：flex布局.md

615 lines
12 KiB
Markdown
Raw Normal View History

update
2018-02-23 12:23:47 +08:00
## 多列布局
类似报纸或杂志中的排版方式，上要用以控制大篇幅文本。用得不多。
格式举例：
```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{
add：前端日记
2018-06-08 22:49:58 +08:00
/* 设置跨列：让h4这标题位于整个文flex-wrap本的标题，而不是处在某一列之中*/
update
2018-02-23 12:23:47 +08:00
-webkit-column-span: all;
text-align: center;
}
```
备注：上面这几个属性涉及到兼容性问题，需要加私有前缀。
## flex：伸缩布局
CSS3在布局方面做了非常大的改进，使得我们对**块级元素**的布局排列变得十分灵活，适应性非常强。其强大的伸缩性，在响应式开中可以发挥极大的作用。
add file：几道题目
2018-03-13 23:12:27 +08:00
![](http://img.smyhvae.com/20180219_2035.png)
update
2018-02-23 12:23:47 +08:00
如上图所示，有几个概念需要了解一下：
- 主轴：Flex容器的主轴主要用来配置Flex项目，默认是水平方向，从左向右。
- 侧轴：与主轴垂直的轴称作侧轴，默认是垂直方向，从上往下。
PS：主轴和侧轴并不是固定不变的，通过flex-direction可以互换。
### 设置伸缩布局的步骤
（1）指定一个盒子为伸缩布局：
```javascript
display: flex;
```
（2）设置 `flex-direction` 属性来调整此盒的子元素的布局方式。默认的方向是水平方向。
（3）可互换主侧轴，也可改变主侧轴的方向。
### 各属性详解
**1、`flex-direction`属性：**设置主轴方向。
- `flex-direction: row;` 设置**主轴方向**，默认是水平方向。属性值可以是：
- `row` 水平方向（默认值）
add file：几道题目
2018-03-13 23:12:27 +08:00
- `reverse-row` 反转
- `column` 垂直方向
update
2018-02-23 12:23:47 +08:00
- `reverse-column` 反转列
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
font-size:22px;
}
h3{
font-weight: normal;
}
section{
width: 1000px;
margin:40px auto;
}
ul{
background-color: #fff;
border: 1px solid #ccc;
}
ul li{
width: 200px;
height: 200px;
background-color: pink;
margin:10px;
}
section:nth-child(1) ul{
overflow: hidden; /* 清除浮动 */
}
section:nth-child(1) ul li{
float: left;
}
/* 设置伸缩盒子*/
section:nth-child(2) ul{
display: flex;
}
section:nth-child(3) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向*/
flex-direction: row;
}
section:nth-child(4) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :水平翻转*/
flex-direction: row-reverse;
}
section:nth-child(5) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :垂直*/
flex-direction: column;
}
section:nth-child(6) ul{
/* 设置伸缩布局*/
display: flex;
/* 设置主轴方向 :垂直*/
flex-direction: column-reverse;
}
</style>
</head>
<body>
<section>
<h3>传统布局</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩布局 display:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:row</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:row-reverse</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:column</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴方向 flex-direction:column-reverse</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```
**2、justify-content：**设置子元素在**主轴上的对齐方式**。
- `justify-content: flex-start;` 设置子元素在**主轴上的对齐方式**。属性值可以是：
- `flex-start` 从主轴的起点对齐（默认值）
- `flex-end` 从主轴的终点对齐
- `center` 居中对齐
- `space-around` 在父盒子里平分
- `space-between` 两端对齐 平分
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul{
/* 主轴对齐方式：从主轴开始的方向对齐*/
justify-content: flex-start;
}
section:nth-child(2) ul{
/* 主轴对齐方式：从主轴结束的方向对齐*/
justify-content: flex-end;
}
section:nth-child(3) ul{
/* 主轴对齐方式：居中对齐*/
justify-content: center;
}
section:nth-child(4) ul{
/* 主轴对齐方式：在父盒子中平分*/
justify-content: space-around;
}
section:nth-child(5) ul{
/* 主轴对齐方式：两端对齐 平分*/
justify-content: space-between;
}
</style>
</head>
<body>
<section>
<h3>主轴的对齐方式：justify-content:flex-start</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:flex-end</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:center</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:space-round</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>主轴的对齐方式：justify-content:space-bettwen</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</section>
</body>
</html>
```
**3、align-items：**设置子元素在**侧轴上的对齐方式**。
- `align-items:flex-start;` 设置子元素在**侧轴上的对齐方式**。属性值可以是：
- `flex-start` 从侧轴开始的方向对齐
- `flex-end` 从侧轴结束的方向对齐
- `baseline` 基线 默认同flex-start
add file：几道题目
2018-03-13 23:12:27 +08:00
- `center` 中间对齐
update
2018-02-23 12:23:47 +08:00
- `stretch` 拉伸
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
height:500px;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul{
/* 侧轴对齐方式 ：从侧轴开始的方向对齐*/
align-items:flex-start;
}
section:nth-child(2) ul{
/* 侧轴对齐方式 ：从侧轴结束的方向对齐*/
align-items:flex-end;
}
section:nth-child(3) ul{
/* 侧轴对齐方式 ：居中*/
align-items:center;
}
section:nth-child(4) ul{
/* 侧轴对齐方式 ：基线 默认同flex-start*/
align-items:baseline;
}
section:nth-child(5) ul{
/* 侧轴对齐方式 ：拉伸*/
align-items:stretch;
}
section:nth-child(5) ul li{
height:auto;
}
</style>
</head>
<body>
<section>
<h3>侧轴的对齐方式:align-items ：flex-start</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-items:flex-end</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-items:center</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-itmes:baseline</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>侧轴的对齐方式：align-itmes: stretch</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```
**4、`flex`属性**：设置子盒子的权重
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{
margin: 0;
padding: 0;
list-style:none;
}
body{
background-color: #eee;
font-family: "Microsoft Yahei";
}
section{
width: 1000px;
margin:50px auto;
}
section h3{
font-size:22px;
font-weight: normal;
}
ul{
border: 1px solid #999;
background-color: #fff;
display: flex;
}
ul li{
width: 200px;
height: 200px;
background: pink;
margin:10px;
}
section:nth-child(1) ul li:nth-child(1){
flex:1;
}
section:nth-child(1) ul li:nth-child(2){
flex:1;
}
section:nth-child(1) ul li:nth-child(3){
flex:8;
}
section:nth-child(2) ul li:nth-child(1){
}
section:nth-child(2) ul li:nth-child(2){
flex:1;
}
section:nth-child(2) ul li:nth-child(3){
flex:4;
}
</style>
</head>
<body>
<section>
<h3>伸缩比例:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
<section>
<h3>伸缩比例:flex</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</section>
</body>
</html>
```
Add:flex
2019-08-21 21:09:21 +08:00
## CSS Flexbox 可视化手册
update
2019-08-21 21:27:39 +08:00
可视化的截图如下：（请点开链接，查看大图）
Add:flex
2019-08-21 21:09:21 +08:00
update
2019-08-21 21:27:39 +08:00
<http://img.smyhvae.com/20190821_2101.png>
Add:flex
2019-08-21 21:09:21 +08:00
相关文章：
- 【英文原版】 CSS Flexbox Fundamentals Visual Guide：<https://medium.com/swlh/css-flexbox-fundamentals-visual-guide-1c467f480dac>
- 【中文翻译】CSS Flexbox 可视化手册：<https://zhuanlan.zhihu.com/p/56046851>
update
2018-02-23 12:23:47 +08:00
update
2019-09-03 10:09:04 +08:00
## flex 相关的推荐文章
update
2018-02-23 12:23:47 +08:00
Add:flex
2019-08-21 21:09:21 +08:00
- flex 效果在线演示：<https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/>
update
2018-02-23 12:23:47 +08:00
Add:flex
2019-08-21 21:09:21 +08:00
- A Complete Guide to Flexbox | 英文原版：<https://css-tricks.com/snippets/css/a-guide-to-flexbox/>
update
2018-02-23 12:23:47 +08:00
Add:flex
2019-08-21 21:09:21 +08:00
- CSS3 Flexbox 布局完全指南 | 中文翻译：<https://www.html.cn/archives/8629>
update
2018-02-23 12:23:47 +08:00
Reference in New Issue Copy Permalink