全称为 “Flexible Box Layout
”,即 “弹性盒布局”,旨在提供一种更有效的方式来布局、对齐和分配容器中项目之间的空间,即使它们的大小未知或动态变化
声明定义
容器里面包含着项目元素,使用 display:flex
或 display:inline-flex
声明为弹性容器
.container {
display: flex | inline-flex;
}
采用 flex
布局的区域,称为 “容器”( container
),应用元素 display: flex
,容器内部的元素,称为 “项目”( item
)
.container{
display: flex;
}
<div class="container">
<div class="item"> div>
<div class="item">
<p class="sub-item"> p>
div>
<div class="item"> div>
div>
上面代码中, 最外层的 div
就是容器,内层的三个 div
就是项目。
注意:项目只能是容器的顶层子元素(直属子元素),不包含项目的子元素,比如上面代码的
p
元素就不是项目。flex
布局只对项目生效。
flex
布局内的容器元素将按照主轴 main axis
或交叉轴 cross axis
排列。
主轴(main axis)
沿其布置子容器的从 main-start
开始到 main-end
,请注意,它不一定是水平的;这取决于 flex-direction
属性(见下文), main size
是它可放置的宽度,是容器的宽或高,取决于 flex-direction
交叉轴(cross axis)
垂直于主轴的轴称为交叉轴,它的方向取决于主轴方向,是主轴写满一行后另起一行的方向,从 cross-start
到 cross-end
, cross size
是它可放置的宽度,是容器的宽或高,取决于 flex-direction
容器container
的属性如下
1. flex-direction 主轴方向
2. flex-wrap 主轴一行满了换行
3. flex-flow 1和2的组合
4. justify-content 主轴元素对齐方式
5. align-items 交叉轴元素对齐方式//单行
6. align-content 交叉轴行对齐方式//多行
定义主轴的方向,也就是子项目元素排列的方向
row
(默认):从左到右 ltr
;从右到左 rtl
row-reverse
:从右到左 ltr
;从左到右 rtl
column:
相同, row
但从上到下column-reverse:
相同, row-reverse
但从下到上.container {
flex-direction: row | row-reverse | column | column-reverse;
}
设置子容器的换行方式,默认情况下,子项目元素都将尝试适合一行 nowrap
nowrap
(默认)不换行wrap
一行放不下时换行wrap-reverse
弹性项目将从下到上换行成多行.container {
flex-wrap: nowrap | wrap | wrap-reverse;
}
flex-direction
和 flex-wrap
属性的简写,默认值为 row nowrap
.container {
flex-flow: column wrap;
}
justify-content
决定子元素在主轴方向上的对齐方式,认是 flex-start
.container {
justify-content: flex-start | flex-end | center | space-between | space-around | space-evenly | start | end | left | right ... + safe | unsafe;
}
align-items
决定子元素在交叉轴方向上的对齐方式,默认是 stretch
.container {
align-items: stretch | flex-start | flex-end | center | baseline | first baseline | last baseline | start | end | self-start | self-end + ... safe | unsafe;
}
当容器内有多行时,align-content
定义多行的对齐方式
.container {
align-content: flex-start | flex-end | center | space-between | space-around | space-evenly | stretch | start | end | baseline | first baseline | last baseline + ... safe | unsafe;
}
设置容器内项目之间的间距,只控制项目与项目的间距,对项目与容器的间距不生效
.container {
display: flex;
...
gap: 10px;
gap: 10px 20px; /* row-gap column gap */
row-gap: 10px;
column-gap: 20px;
}
这设置的是最小间距,因为
just-content
导致的间距变大
1. order 排序
2. flex-grow 长大
3. flex-shrinik 缩小
4. align-self 覆盖container 的 align-items 属性
5. flex-basis 宽度
order
属性默认为0
order
属性值,改变子容器的排列顺序.item1 {
order: 3; /* default is 0 */
}
在容器主轴上存在剩余空间时, flex-grow才有意义
定义的是可放大的能力,0
(默认)禁止放大,大于 0
时按占的比重分放大,负数无效
.container{
border-left:1.2px solid black;
border-top:1.2px solid black;
border-bottom: 1.2px solid black;
width: 100px;
height: 20px;
display: flex;
}
.item{
border-right:1.2px solid black;
width: 20px;height: 20px;
}
.item1{
/* 其他的都是0,这一个是1,1/1所以能所有剩下的空间都是item1的 */
flex-grow: 1; /* default 0 */
}
<div class="container">
<div class="item item1" style="background-color: #7A42A8;">div>
<div class="item" style="background-color: #8FAADC;">div>
<div class="item" style="background-color: #DAE3F3;">div>
div>
当容器主轴 “空间不足” 且 “禁止换行” 时, flex-shrink才有意义
定义的是可缩小的能力,1
(默认)等大于 0
的按比例权重收缩, 0
为禁止收缩,负数无效
.container{
width: 100px;
height: 20px;
display: flex;
flex-wrap: nowrap;
}
.item{
width: 50px;height: 20px;
}
.item1{/*收缩权重1/3,总空间50,所以它占33.33,为原本的2/3*/
flex-shrink: 1; /* default 1 */
}
.item2{/*收缩权重2/3,总空间50,所以它占16.67,为原本的1/3*/
flex-shrink: 2; /* default 1 */
}
.item3{
flex-shrink: 0; /* default 1 */
}
<div class="container">
<div class="item item1" style="background-color: #7A42A8;">div>
<div class="item item2" style="background-color: #8FAADC;">div>
<div class="item item3" style="background-color: #DAE3F3;">div>
div>
flex-basis
指定了 flex
元素在主轴方向上的初始尺寸,它可以是长度(例如 20%
、 5rem
等)或关键字。felx-wrap
根据它计算是否换行,默认值为 auto
,即项目的本来大小。它会覆盖原本的width
或 height
.item {
flex-basis: | auto; /* default auto */
}
flex-grow
, flex-shrink
和 flex-basis
组合的简写,默认值为 0 1 auto
.item {
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}
建议您使用此速记属性,而不是设置单个属性。速记智能地设置其他值。
这允许为单个弹性项目覆盖默认的交叉轴对齐方式 align-items
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
注意:
flexbox
布局和原来的布局是两个概念,部分css
属性在flexbox
盒子里面不起作用,eg:float
,clear
和vertical-align
等等
点击查看兼容性
点击查看源码
开发中会用到的百分比布局
点击查看源码
圣杯布局是指两边盒子宽度固定,中间盒子自适应的三栏布局,这是一种非常常见的布局方式
点击查看源码
问题
有时我们既希望just-content: space-between
,又希望最后一行可以按序排列而不是空间环绕
<div class="box">
<div class="item">div> * 8
div>
<style>
.box {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
width: 520px;
height: 220px;
}
.item {
background-color: blueviolet;
width: 100px;
height: 100px;
}
style>
<div class="box">
<div class="item">div> * 8
<i>i><i>i><i>i><i>i><i>i><i>i><i>i><i>i><i>i><i>i><i>i>
div>
<style>
i{
width: 100px;
}
style>
参考资料
flex1
flex2
视频
在线测试地址