flex布局知识梳理
flex的前言
当我们在制作页面的时候，使用传统的布局方式会比较繁琐，浮动定位等各种需要考虑；而flex布局就表现的极为简单，可以很轻松的解决盒子的伸缩和排列等效果，但不可避免的是，传统布局很少会考虑兼容性问题，而flex布局的兼容性会稍逊，所以flex布局更多的会用在移动端开发。
flex布局的基本概念
flex布局的概念
那么什么是flex布局呢？
通俗的解释就是给父盒子添加flex属性，来控制子盒子的排列方式。
采用flex布局的元素（父盒子）成为flex 容器（flex container）,而它的子元素会自动成为容器的成员，成为flex 项目（flex item）。
关于主轴与侧轴
类似于xy坐标轴，在flex布局中，分为主轴和侧轴
- 默认主轴为x轴方向，水平向右
- 默认侧轴为y轴方向，垂直向下
任何容器都可以设置flex，一旦父元素设置flex，子元素的float、clear和ververtical-align属性都会失效，而且行内样式的子元素也会变成块元素。
flex父元素属性
- flex-direction: 设置主轴的方向
- justify-content: 设置主轴的子元素排列方式
- flex-wrap: 设置子元素是否换行
- align-content: 设置侧轴上的子元素排列方式（多行）
- align-items: 设置侧轴上的子元素排列方式（单行）
- flex-flow: 复合属性，可同时设置flex-direction 和 flex-wrap
1.flex-direction
flex-direction属性是设置父元素的主轴方向。
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
<style>
div {
width: 400px;
height: 400px;
background-color: skyblue;
margin: 100px auto;
/* 给父亲设置flex布局 */
display: flex;
}
span {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
可以看到当给父元素设置flex布局后，子元素默认按照水平的主轴从左到右排列。
div {
width: 400px;
height: 400px;
background-color: skyblue;
margin: 100px auto;
/* 给父亲设置flex布局 */
display: flex;
/* 给父盒子设置子元素的排列方式 */
flex-direction: row-reverse;
}
而当给父元素设置flex-direction: column时，主轴变为垂直向下的y轴，侧轴就变为水平向右的x轴，元素就会按照主轴的方向排列：
/* 给父盒子设置 */
flex-direction: column;
/* 给父盒子设置 */
flex-direction: column-reverse;
2.justify-content
justify-content定义了子元素在主轴上的排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 默认靠主轴头部排列 |
| flex-end | 靠主轴尾部排列 |
| center | 在主轴居中对齐 |
| space-around | 平分剩余空间 |
| space-between | 两边的元素在两边贴着，再平分剩余空间 |
为父元素设置不同的justify-content属性后的不同效果：
另外要额外说一个值：space-evenly
那么他和space-around有什么区别呢？
space-evenly:
space-around:
3.flex-wrap
flex-wrap规定子元素是否换行，默认是不换行的，如果装不下，会缩小子元素的宽度，强行挤下！
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
给父元素设置400px的大小，三个子元素可以挤下
<style>
div {
width: 400px;
height: 400px;
background-color: skyblue;
margin: 100px auto;
/* 给父亲设置flex布局 */
display: flex;
}
span {
width: 100px;
height: 100px;
background-color: red;
margin: 10px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
如果再多加一个子元素：
再加几个！
flex-wrap: wrap
4.align-items
align-items设置子元素在侧轴上的排列方式
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸（默认值） |
最后一个属性值：stretch，我们不给父元素高度，子元素的高度为500px，则父元素的高度会按照子元素的高度进行拉伸：
5.align-content
设置多行的子元素在侧轴的排列方式，所以只能适用于换行的情况。
| 属性值 | 说明 |
|---|---|
| flex-start | 默认从侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始 |
| center | 在侧轴的中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 两侧子项先在侧轴两侧，再平分剩余空间 |
| stretch | 子项元素的高度平分父元素的高度 |
当设置stretch值时，和align-items类似，不给父元素高度，给子元素设置高度，则子元素会正好撑开父元素
6.flex-flow
flex-flow设置父元素的主轴方向和子元素是否换行。
/* 主轴为垂直方向的y轴，换行 */
flex-flow: column wrap;
flex子元素属性
- flex属性
- align-self属性
- order属性
1.flex属性
flex定义子元素分配剩余空间，用flex的数字属性来表示所占的份数。
给左右两个div固定大小，第二个占剩余空间的1份，第三个占剩余空间的2份：
<style>
section {
display: flex;
margin: 100px auto;
width: 700px;
height: 100px;
background-color: skyblue;
}
section div:nth-child(1) {
width: 100px;
height: 100%;
background-color: red;
}
section div:nth-child(2) {
/* 占1份 */
flex: 1;
background-color: pink;
}
section div:nth-child(3) {
/* 占2份 */
flex: 2;
background-color: blue;
}
section div:nth-child(4) {
width: 150px;
height: 100%;
background-color: yellow;
}
</style>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
也可以实现平均分配：
<style>
section {
display: flex;
margin: 100px auto;
width: 700px;
height: 100px;
background-color: skyblue;
}
div {
/* 每个div各占1份 */
flex: 1;
border: 1px solid black;
background-color: red;
}
</style>
<body>
<section>
<div>1号</div>
<div>2号</div>
<div>3号</div>
<div>4号</div>
</section>
</body>
2.align-self属性
align-self可以指定某个或某些子元素在侧轴上的排列方式
<style>
section {
display: flex;
margin: 100px auto;
width: 700px;
height: 500px;
background-color: skyblue;
}
section div {
width: 100px;
height: 100px;
background-color: red;
}
/* 指定2号div在侧轴居中位置 */
section div:nth-child(2) {
align-self: center;
}
/* 指定3号div在侧轴尾部 */
section div:nth-child(3) {
align-self: flex-end;
}
</style>
<body>
<section>
<div>1号</div>
<div>2号</div>
<div>3号</div>
<div>4号</div>
</section>
</body>
3.order属性
order可以定义子元素的排列顺序，数值越小，排列越靠前，默认为0（可以为负数）
<style>
section {
display: flex;
margin: 100px auto;
width: 700px;
height: 500px;
background-color: skyblue;
}
section div {
width: 100px;
height: 100px;
background-color: red;
}
/* 2号order值最大 */
section div:nth-child(2) {
order: 3
}
/* 3号的order值-1最小 */
section div:nth-child(3) {
order: -1
}
</style>
<body>
<section>
<div>1号</div>
<div>2号</div>
<div>3号</div>
<div>4号</div>
</section>
</body>
默认的1号和4号order为1，而指定3号order为-1,2号order值最大为3,越小的越靠前，所以顺序为3号→1号→4号→2号。
参考链接：
链接: pink老师flex布局视频讲解.
链接: Flex 布局教程：语法篇.
2162
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
