一、什么是flex弹性布局?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
二、为什么要使用flex弹性布局?
布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现。
而弹性框布局模块,可以更轻松地设计灵活的响应式布局结构,而无需使用浮动或定位。
三、如何使用flex弹性布局?
默认水平方向为main axis(主轴) 。垂直方向为cross axis(交叉轴) 。
首先,要想实现flex弹性布局,一定要在其父元素(容器)里设置display:flex
值得注意的是设为 Flex 布局以后,子元素的float
、clear
和vertical-align
属性将失效。
六个容器属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
四个项目属性:
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
下面我们进行具体介绍:
容器属性:
(1)flex-direction 项目的排列方向
属性值:row(默认,主轴为水平方向,起点在左)/ row-reverse(主轴为水平方向 起点在右)/ column(主轴为垂直方向 起点在上) / column-reverse(主轴为垂直方向 起点在下)
代码示例:
<div class="so"> <!--类名为so的这个大盒子里面包裹着.a.b.c.d这四个大小一致的小盒子-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
<style>
*{ /*通配符选择器,给所有盒子设置宽高都为50px */
width: 50px;
height: 50px;
}
.so {/*就近原则,class为so的这个大盒子设置宽高都为300px */
width: 300px;
height: 300px;
border: 2px solid black;
display: flex;
flex-direction: column; /*.so里面四个小盒子排列起点向上,主轴为垂直方向*/
}
.a{
background-color: blue;
}
.b{
background-color:red;
}
.c{
background-color: yellow;
}
.d{
background-color:pink;
}
</style>
(2)flex-wrap 项目换行
属性值:nowrap(默认,不换行 / wrap(换行,第一行在上方)/ wrap-reverse(换行,第一行在下方)
<div class="so"> <!--类名为so的这个大盒子里面包裹着.a.b.c.d这四个大小一致的小盒子-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
*{
width: 50px;
height: 50px;
}
.so {
width: 300px;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap: wrap-reverse; /* 项目换行,第一行在下方 */
}
.a{
background-color: blue;
}
.b{
background-color:red;
}
.c{
background-color: yellow;
}
.d{
background-color:pink;
}
(3)flex-flow 项目的排列方向 与 项目换行
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
(4)justify-content 项目在主轴上的对齐方式
属性值:flex-start(默认 左对齐)/ flex-end(右对齐)/ center(居中)/ space-between(两端对齐)/ space-around(项目两侧的间隔距离相等)
(5)align-items 项目在交叉轴上的对齐方式
属性值:stretch(默认 占满)/ baseline(项目的第一行文字的基线对齐)/ flex-start(交叉轴的起点对齐)/ flex-end(交叉轴的终点对齐)/ center(交叉轴的中点对齐)
代码示例:
<div class="so"> <!--类名为so的这个大盒子里面包裹着.a.b.c.d这四个大小一致的小盒子-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
* {
width: 50px;
height: 50px;
}
.so {
width: 300px;
height: 300px;
border: 2px solid black;
display: flex;
justify-content: space-between; /* 项目在主轴上向两端对齐 */
align-items: center; /* 项目在交叉轴上居中对齐 */
}
.a {
background-color: blue;
}
.b {
background-color: red;
}
.c {
background-color: yellow;
}
.d {
background-color: pink;
}
(6)align-content 项目占多行(控制多行项目的对齐方式)
属性值:stretch(默认 元素被拉伸以适应容器)/ flex-start(元素位于容器的开头)/ flex-end(元素位于容器的结尾)/ center(元素位于容器的中心)/ space-between(元素位于各行之间留有空白的容器内)/ space-around(元素位于各行之前、之间、之后都留有空白的容器内
<div class="so"> <!--类名为so的这个大盒子里面包裹着.a.b.c.d这四个大小一致的小盒子-->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</div>
* {
width: 100px;
height: 100px;
}
.so {
width: 300px;
height: 300px;
border: 2px solid black;
display: flex;
flex-wrap:wrap; /* 多行项目换行 第一行在上方 */
align-content: flex-end; /* 多行项目 项目元素位于容器的结尾 */
}
.a {
background-color: blue;
}
.b {
background-color: red;
}
.c {
background-color: yellow;
}
.d {
background-color: pink;
}
项目属性:
(1)order 定义项目的排列顺序。数值越小,排列越靠前,默认为0
属性值:数值
<div class="so">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
* {
width: 50px;
height: 50px;
}
.so {
width: 300px;
height: 300px;
border: 2px solid black;
display: flex;
}
.a {
background-color: blue;
order: 8;
}
.b {
background-color: red;
order: 2;
}
.c {
background-color: yellow;
order: 1;
}
(2)flex-grow 定义项目的放大比例
前提:要有剩余空间 若所有项目flex-grow属性都为1,则全都等量平分
数值越大,放大倍数越大。
属性值:数值
(3)flex-shrink 定义项目的缩小比例
前提:要无剩余空间. 如果空间不足,该项目将缩小。
数值越大,压缩越大。
属性值:数值
代码举例:
<div class="grow">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<br>
<div class="shrink">
<div class="d"></div>
<div class="e"></div>
<div class="f"></div>
</div>
*{
width: 100px;
height: 100px;
}
.grow{
width: 500px;
height: 100px;
border: 2px solid black;
display: flex;
}
.a{
background-color: red;
flex-grow: 1;
}
.b{
background-color: yellow;
flex-grow: 1;
}
.c{
background-color: purple;
flex-grow: 3;
}
.shrink{
width: 200px;
height: 100px;
border: 2px solid black;
display: flex;
}
.d{
background-color: red;
flex-shrink: 1;
}
.e{
background-color: yellow;
flex-shrink: 5;
}
.f{
background-color: purple;
flex-shrink:9;
}
第一行为项目的放大,第二行为项目的缩小:
(4)flex-basis 项目未设宽度时,主轴空间均分各项目的宽度(定义了在分配多余空间之前,项目占据的主轴空间)
属性值:数值
<div class="so">
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
.so {
width: 600px;
height: 100px;
border: 2px solid black;
display: flex;
}
div {
flex-basis: 200px; /* 各项目宽度均分为200px */
}
.a {
background-color: blue;
}
.b {
background-color: red;
}
.c {
background-color: yellow;
}
(5)flex 是flex-grow, flex-shrink 和 flex-basis的简写
默认值为0 1 auto。后两个属性可选。
属性值:flex-grow flex-shrink flex-basis
(6)align-self 个别元素的凸显
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
属性值:auto(和父元素的align-self值一致)/ flex-start(顶端对齐)/ flex-end(底端对齐)/ center(竖直方向上居中对齐)/ baseline(第一行文字的底部对齐)/ stretch(未设置高度时,item将和容器等高对齐)
<div class="so">
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</div>
* {
width: 100px;
height: 100px;
}
.so {
width: 600px;
height: 400px;
border: 2px solid black;
display: flex;
}
.a {
background-color: red;
}
.b {
background-color: gold;
align-self: flex-end; /* b盒子底端对齐单独凸显 */
}
.c {
background-color: fuchsia;
}