flex学习笔记

发表于 更新于 分类于 阅读次数： 本文字数： 11k 阅读时长 ≈ 10 分钟
flex 学习笔记

Flex由来

flex布局是W3C在2009年提出的新的简便、完整、响应式的布局，目前已得到所有浏览器的支持。

Flex是什么

Flex是弹性布局的缩写，全称是Flexible(弹性的)Box。

Flex布局与传统布局的区别

传统布局

优点：

  1. 传统布局为大多数浏览器所兼容，包括ie11以下的所有版本。

缺点：

  1. 在移动端适配具有局限性。

  2. 基于盒子模型，依赖 display属性 、position属性 、float属性；布局繁琐。

Flex布局

优点：

  1. 操作更为简单，几行代码就能实现垂直居中，且移动端适配好。

  2. pc端浏览器已基本支持。缺点：

  3. ie11及以下版本不支持。

Flex布局简单应用

test1
test2
test3
Flex简单应用

Flex布局

html
1
2
3
4
5
<div id="demo1">
    <div id="demobox">test1</div>
    <div id="demobox">test2</div>
    <div id="demobox">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
#demo1{
    width:600px;
    height: 150px;
    display: flex;
}
#demobox{
    width: 100px;
    height: 100px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

Flex布局原理

  • 当父元素设置为flex布局后，子元素中的float、clear与vertical-align将失效。

  • 在flex中父元素（父盒子）被成为flex父容器，其中的元素被称为子容器（flex项目）。

  • 通过给父元素添加flex属性，从而控制子元素位置与排列方式。

Flex常见父属性

属性效果
flex-direction设置主轴方向
justify-content设置主轴上子元素排列方式
flex-wrap设置子元素换行
align-content设置侧轴上子元素排列方式（多行）
align-items设置侧轴上子元素排列方式（单行）
flex-flow复合属性

  • 默认主轴水平向右，x方向。

  • 默认侧轴竖直向下，y方向。

    坐标

flex-direction属性展示

flex-direction设置主轴方向，影响后续的排列效果，默认以水平向右为主轴方向。

值效果
rowx轴正序排列，并设置主轴为x轴方向
row-reversex轴倒序排列，并设置主轴为x轴方向
columny轴正序排列，并设置主轴为y轴方向
column-reversey轴倒序排列，并设置主轴为y轴方向

test1
test2
test3
flex-direction:

flex-direction: row

html
1
2
3
4
5
<div id="demo2">
    <div id="demo2box">test1</div>
    <div id="demo2box">test2</div>
    <div id="demo2box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo2{
    width:600px;
    height: 150px;
    display: flex;
    flex-direction: row;
}
#demo2box{
    width: 70px;
    height: 100px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
flex-direction:

flex-direction: row-reverse

html
1
2
3
4
5
<div id="demo3">
    <div id="demo3box">test1</div>
    <div id="demo3box">test2</div>
    <div id="demo3box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo3{
    width:600px;
    height: 150px;
    display: flex;
    flex-direction: row-reverse;
}
#demo3box{
    width: 70px;
    height: 100px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
flex-direction:

flex-direction: column

html
1
2
3
4
5
<div id="demo4">
    <div id="demo4box">test1</div>
    <div id="demo4box">test2</div>
    <div id="demo4box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo4{
    width:600px;
    height: 150px;
    display: flex;
    flex-direction: column;
}
#demo4box{
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 10px 0px;
    width: 100px;
    height: 30px;
}

test1
test2
test3
flex-direction:

flex-direction: column-reverse

html
1
2
3
4
5
<div id="demo5">
    <div id="demo5box">test1</div>
    <div id="demo5box">test2</div>
    <div id="demo5box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo5{
    width:600px;
    height: 150px;
    display: flex;
    flex-direction: column-reverse;
}
#demo5box{
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 10px 0px;
    width: 100px;
    height: 30px;
}

justify-content属性展示

设置主轴上的排列方式。

值效果
flex-start从左至右排列(主轴为x)或从上到下(主轴为y)
flex-end从右至左排列(主轴为x)或从下到上(主轴为y)
center居中对齐
space-around平分剩余空间
space-between先两边贴边，再平分剩余空间

test1
test2
test3
justify-content:

justify-content: flex-start

html
1
2
3
4
5
<div id="demo6">
    <div id="demo6box">test1</div>
    <div id="demo6box">test2</div>
    <div id="demo6box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo6{
    width:600px;
    height: 150px;
    display: flex;
    justify-content: flex-start;
}
#demo6box{
    width: 70px;
    height: 50px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
justify-content:

justify-content: flex-end

html
1
2
3
4
5
<div id="demo7">
    <div id="demo7box">test1</div>
    <div id="demo7box">test2</div>
    <div id="demo7box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo7{
    width:600px;
    height: 150px;
    display: flex;
    justify-content: flex-end;
}
#demo7box{
    width: 70px;
    height: 50px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
justify-content:

justify-content: center

html
1
2
3
4
5
<div id="demo8">
    <div id="demo8box">test1</div>
    <div id="demo8box">test2</div>
    <div id="demo8box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo8{
    width: 600px;
    height: 150px;
    display: flex;
    justify-content: center;
}
#demo8box{
    width: 70px;
    height: 50px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
justify-content:

justify-content: space-around

html
1
2
3
4
5
<div id="demo9">
    <div id="demo9box">test1</div>
    <div id="demo9box">test2</div>
    <div id="demo9box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo9{
    width:600px;
    height: 150px;
    display: flex;
    justify-content: space-around;
}
#demo9box{
    width: 70px;
    height: 50px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

test1
test2
test3
justify-content:

justify-content: space-between

html
1
2
3
4
5
<div id="demo14">
    <div id="demo14box">test1</div>
    <div id="demo14box">test2</div>
    <div id="demo14box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo14{
    width:600px;
    height: 150px;
    display: flex;
    justify-content: space-between;
}
#demo14box{
    width: 70px;
    height: 50px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 0 10px;
}

flex-wrap属性展示

默认情况下，项目（子元素）都在一条线上（轴线）,flex-warp默认不换行，会直接缩小子元素宽度。

换行是相对于当前主轴而言

x为主轴时：

image-20220627164047792

值效果
nowrap不换行（默认）
wrap换行
test1
test2
test3
flex-wrap:

flex-wrap: nowrap

html
1
2
3
4
5
<div id="demo10">
    <div id="demo10box">test1</div>
    <div id="demo10box">test2</div>
    <div id="demo10box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo10{
    width:300px;
    height: 150px;
    display: flex;
    flex-wrap:  nowrap;
}
#demo10box{
    width: 120px;
    height: 30px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 5px 10px;
}
test1
test2
test3
flex-wrap:

flex-wrap: wrap

html
1
2
3
4
5
<div id="demo11">
    <div id="demo11box">test1</div>
    <div id="demo11box">test2</div>
    <div id="demo11box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo11{
    width:300px;
    height: 150px;
    display: flex;
    flex-wrap:  wrap;
}
#demo11box{
    width: 120px;
    height: 30px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 5px 10px;
}

align-items（单行）属性展示

默认以x为主轴，y为侧轴，align-item用于设置单行侧轴的排列方式。

值效果
flex-start从上到下
flex-end从下到上
center垂直居中
stretch拉伸（默认）
test1
test2
test3
水平垂直居中

水平垂直居中

html
1
2
3
4
5
<div id="demo12">
    <div id="demo12box">test1</div>
    <div id="demo12box">test2</div>
    <div id="demo12box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
#demo12{
    width:300px;
    height: 150px;
    display: flex;
    justify-content: center;
    align-items: center;
}
#demo12box{
    width: 60px;
    height: 30px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
}

通过这两个轴，可以将元素固定到任意位置。

align-content（多行）属性展示

设置子项在侧轴上的排列方式，用于子项出现换行的情况（多行），单行下无效果。

值效果
flex-start从侧轴头部开始排列
flex-end从侧轴尾部开始排列
center居中对齐
space-around平分侧轴剩余空间
space-between先两边贴边，再平分侧轴剩余空间
stretch设置子项元素高度平方父元素高度
test1
test2
test3
flex-wrap:

flex-wrap: wrap

html
1
2
3
4
5
<div id="demo13">
    <div id="demo13box">test1</div>
    <div id="demo13box">test2</div>
    <div id="demo13box">test3</div>
</div>
javascript
1

css
1
2
3
4
5
6
7
8
9
10
11
12
13
#demo13{
    width:300px;
    height: 150px;
    display: flex;
    flex-wrap:  wrap;
    align-content: space-between;
}
#demo13box{
    width: 120px;
    height: 30px;
    background-image: linear-gradient(to top, #fbc2eb 0%, #a6c1ee 100%);
    margin: 5px 10px;
}