FlexBox布局
一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为 Flex 布局。
.flex-container {
display: flex;
}
行内元素也可以使用 Flex 布局。
.box{
display: inline-flex;
}
二、基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称"容器"。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称"项目"。
容器默认存在两根轴:主轴(main axis)和交叉轴(cross axis)。主轴的开始位置(与边框的交叉点)叫做main start,结束位置叫做main end;交叉轴的开始位置叫做cross start,结束位置叫做cross end。
项目默认沿水平方向排列,哪主轴排列就为水平方向,交叉轴就是垂直方向;当项目沿着垂直方向排列时,哪主轴就为垂直方向,交叉轴就是水平方向
单个项目占据的主轴空间叫做main size,占据的交叉轴空间叫做cross size。
三、容器的属性
容器的属性,有六个
flex-direction
justify-conent
align-item
flex-wrap
flex-flow
align-content
通过一个列子来操练
<head>
<style>
.flex-container {
display: flex;
flex-direction: rows;
background-color: beige;
height: 500px;
/* 主轴的位置 */
justify-content: flex-end;
/* 交叉轴 的位置 */
align-items: flex-end;
}
.box {
width: 60px;
height: 60px;
}
.A {
background-color: lightblue;
}
.B {
background-color: lightcoral;
}
.C {
background-color: lightcyan;
}
.D {
background-color: lightgreen;
}
.E {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C">C</div>
<div class="box D">D</div>
<div class="box E">E</div>
</div>
</body>
flex-direction 属性
flex-direction
属性决定主轴的方向(即项目的排列方向)。
.flex-container {
flex-direction: row | row-reverse | column | column-reverse;
}
它可能有4个值。
- row (默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿
justify-content 属性
定义 项目在主轴的对齐方向
.flex-container {
justify-content: flex-start | flex-end | center | space-between | space-around;
}
align-items 属性
定义项目在交叉轴上如何对齐
.flex-container {
align-items: flex-start | flex-end | center | baseline | stretch;
}
flex-wrap 属性
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap
属性定义,如果一条轴线排不下,如何换行。
.flex-container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-flow 属性
flex-flow
属性是flex-direction
属性和flex-wrap
属性的简写形式,默认值为row nowrap
。
.flex-container {
/* flex-flow:<flex-direction> || <flex-wrap>; */
flex-flow: column wrap;
}
align-content 属性
定义了多根主轴线的对齐方式, 行与行的对齐效果
.flex-container {
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
}
如图:
<style>
.flex-container {
background-color: beige;
display: flex;
width: 200px;
height: 240px;
flex-flow: row wrap;
/* align-content: flex; */
}
.box {
width: 60px;
height: 60px;
}
.A {
background-color: lightblue;
}
.B {
background-color: lightcoral;
}
.C {
background-color: lightcyan;
}
.D {
background-color: lightgreen;
}
.E {
background-color: lightskyblue;
}
</style>
</head>
<body>
<div class="flex-container">
<div class="box A">A</div>
<div class="box B">B</div>
<div class="box C">C</div>
<div class="box D">D</div>
<div class="box E">E</div>
</div>
</body>
- 没有设置
align-content
的情况;主轴线排不下,D,E
换行,就是多了一根轴线;可以观察到第二根水平轴线在D,E
的上沿,把高度平分了
align-content:flex-start;
align-content:flex-end;
align-content:center;
四、项目的属性
order 属性
order
属性定义项目的排列顺序。数值由小到大排序,小的排在前大的排在后,默认为0
.A {
background-color: lightblue;
order: 4;
}
.B {
background-color: lightcoral;
order: 5;
}
flex-grow 属性
flex-grow
属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大;如果该项目组只有一项是设置为1(大于1就行)时,则该项将放大到容器的最大宽度或高度;多项设置为大于1的时候;则按项目的flex-grow
比例进行放大
.A {
background-color: lightblue;
flex-grow: 1;
}
.B {
background-color: lightcoral;
flex-grow: 1;
}
flex-shrink 属性
flex-shrink
属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,设置属性为0的不缩小;其他的等比例缩小
flex-basis 属性
flex-basis
属性 是设定的主轴空间(main size)大小。它的默认值为auto,即项目的本来大小
flex 属性
flex
属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选,该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)
align-self 属性
align-self
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch