Flex 布局的小语法
布局的传统解决方案
由于盒状模型,依赖 display 属性 + position属性 + float属性。它对于那些特殊布局非常不方便,例如,垂直居中很难实现。
一、Flex 布局是什么?
Flex 是 Flexible Box 的缩写,意为"弹性布局",用来为盒状模型提供最大的灵活性。
.box{
display:flex;
}
行内元素也可以使用flex布局。
.box{
display:inline-flex;
}
注意 设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效。
二、基本概念
采用 Flex 布局的元素,称为 Flex 容器(flex container),简称容器。它的所有子元素自动成为容器成员,称为 Flex 项目(flex item),简称项目。
三、容器的属性
以下6个属性设置在容器上。
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
将上述的父容器 (container)属性 display属性 设置为 flex 布局
.container{
display:flex ;
}
3.1 flex-direction属性
flex-direction属性决定主轴的方向(即项目的排列方向)。
有4个值。
3.1.1 水平主轴布局 row (水平向右)
在 父容器设置 flex-direction的值
- flex-direction: row;
2. flex-direction: row-reverse; 延主轴反向
3.1.2 垂直侧轴布局 column (水平向下)
- flex-direction: column;
- flex-direction: column-reverse;
3.2 flex-wrap 属性,设置子元素是否换行
- flex-wrap: nowrap; 默认不换行
- flex-wrap: wrap; 会另起一行排列
默认情况下,flex 布局中默认是不换行的。如果排不下,会缩小盒子元素的宽度。
3.3 flex-flow复合属性,相当于同时设置了flex-direction和flex-wrap
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
3.4 Flex 中 justify-content 属性
这里把盒子的主轴设置为 row,如果想尝试多种效果的,可以自行修改主轴方向。
3.4.1 flex-start 左居中布局
给 父容器 justify-content 的属性设置 为 flex-start。
.container{
display:flex ;
flex-direction: row;
justify-content: flex-start;
}
3.4.2 flex-end 右居中布局
.container{
display:flex ;
flex-direction: row;
justify-content: flex-end;
}
3.4.3 center 水平居中布局
.container{
display:flex ;
flex-direction: row;
justify-content: center;
}
3.4.4 space-between 两端布局
.container{
display:flex ;
flex-direction: row;
justify-content:space-between ;
}
3.4.5 space-around (留空等分布局) 环绕布局
.container{
display:flex ;
flex-direction: row;
justify-content:space-around ;
}
3.4.6 space-evenly 等间距布局
.container{
display:flex ;
flex-direction: row;
justify-content:space-evenly ;
}
3.5 align-items属性
首先,我们需要修改一下 父容器的样式:
效果样式
3.5.1 使用 align-items 设置 flex-start
.container{
display:flex ;
flex-direction: row;
justify-content: center;
align-items: flex-start;
height: 300px;
width: 800px;
background-color: pink;
}
3.5.2 使用 align-items 设置 center
.container{
display:flex ;
flex-direction: row;
justify-content: center;
align-items: center;
height: 300px;
width: 800px;
background-color: pink;
}
总结设置盒子水平,垂直居中(justify-content 和 align-items 都设置为 center)
3.5.3 使用 align-items 设置 flex-end 低端对齐
.container{
display:flex ;
flex-direction: row;
justify-content: center;
align-items: flex-end;
height: 300px;
width: 800px;
background-color: pink;
}
3.5.4 使用 align-items 设置 baseline 第一行文字的基线对齐
.container{
display:flex ;
flex-direction: row;
justify-content: center;
align-items: baseline;
height: 300px;
width: 800px;
background-color: pink;
}
3.5.5 使用 align-items 设置 stretch(默认值)
如果项目未设置高度或设为auto,将占满整个容器的高度。
3.6 align-content 属性
先画8个格子,这种情况只适合多行
css部分
3.6.1 flex-start 属性 与交叉轴的起点对齐。
当我们设置父容器 align-content 为 flex-start 时,效果如下
3.6.2 flex-end属性 与交叉轴的终点对齐。
效果
3.6.3 center属性 与交叉轴的中点对齐。
效果
3.6.4 space-between属性 与交叉轴两端对齐,轴线之间的间隔平均分布。
效果
3.6.5 space-around属性 每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍
效果
3.6.6 stretch属性 轴线占满整个交叉轴。
效果
3.7 align-items 和 align-content 区别
- align-items适用于单行情况下,只有上对齐、下对齐、 居中和拉伸.
- align-content适应于换行(多行)的情况下(单行情况下无效),可以设置上对齐、下对齐、 居中、拉伸以及平均分配剩余空间等属性值。
- 总结单行找align-items多行找align-content
四、其他的属性
4.1 order属性
order属性定义项目的排列顺序。数值越小,排列越靠前,默认为0。
4.2 flex-grow属性
flex-grow属性定义项目的放大比例,默认为0,即如果存在剩余空间,也不放大。
如果所有项目的flex-grow属性都为1,则它们将等分剩余空间(如果有的话)。如果一个项目的flex-grow属性为2,其他项目都为1,则前者占据的剩余空间将比其他项多一倍。
4.3 flex-shrink属性
flex-shrink属性定义了项目的缩小比例,默认为1,即如果空间不足,该项目将缩小。
如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
4.4 flex-basis属性
flex-basis属性定义了在分配多余空间之前,项目占据的主轴空间(main size)。浏览器根据这个属性,计算主轴是否有多余空间。它的默认值为auto,即项目的本来大小。
4.5 flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写,默认值为0 1 auto。后两个属性可选。
4.6 align-self属性
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
可以·设置父亲属性为 align-items: flex-start ,给 6号各格子设置 align-self: flex-end; 就会出现如下效果