Flexbox-弹性盒子
Flexbox布局
基本说明:
- 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(有可能是横向的行,也有可能是纵向的列)
- 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。
更改flex的方向(行还是列?)
- 选择哪些元素将设置为柔性的盒子,给这些元素的父元素
display
设置一个特定的值。 - 弹性盒子提供了
flex-direction
这样的属性,它可以指定主轴的方向
flex-direction: column;
此外,row-reverse 和 column-reverse 值反向排列 flex 项目。
元素溢出怎么办?换行!
使用定宽或者定高的时候,可能处于容器中的 弹性盒子子元素会溢出,破坏了布局。
flex-wrap: wrap;
缩写:flex-direction: row;
和 flex-wrap: wrap;
替换为flex-flow: row wrap
flex项的动态尺寸
注意:这里需要设置的元素是之前准备设为flex的元素,不是父元素!
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
假设现在有3个article
元素,那么第1个和第2个article各占一个单位,而第3个article占两个单位,所以三者之间的所占大小比例为,1:1:2。
后面的200px表示“每个flex 项将首先给出200px的可用空间,然后,剩余的可用空间将根据分配的比例共享“。
无单位的比例还可以使用单独全写flex-grow
属性的值。而上面的200px最小值可以用flex-basis
全写代替。
水平和垂直居中
先看一段代码:
div {
display: flex;
align-items: center;
justify-content: space-around;
}
align-items
控制flex项在交叉轴上的位置。默认的属性值是stretch
justify-content
控制flex项在主轴上的位置。
以上2个属性的属性值,均可使用以下值:center, flex-start, flex-end
justify-content
还可以使用space between
,它和 space-around
非常相似,只是它不会在两端留下任何空间。
还可以用align-self
覆盖align-items
的行为。
flex项排序
div {
order: 1;
}
所有 flex 项默认的 order
值是 0。
order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
flex嵌套
弹性盒子也能创建一些颇为复杂的布局。设置一个元素为flex项目,那么他同样成为一个 flex 容器,它的直接子节点也表现为 flexible box 。