指定元素的布局为 flexible
首先,我们需要选择将哪些元素将设置为柔性的盒子。我们需要给这些 flexible 元素的父元素 display 设置一个特定值。
section {
display: flex;
}
flex模型说明
- 主轴(main axis)是沿着 flex 元素放置的方向延伸的轴(比如页面上的横向的行、纵向的列)。该轴的开始和结束被称为 main start 和 main end。横轴
- 交叉轴(cross axis)是垂直于 flex 元素放置方向的轴。该轴的开始和结束被称为 cross start 和 cross end。纵轴
- 设置了 display: flex 的父元素被称之为 flex 容器(flex container)。container
- 在 flex 容器中表现为柔性的盒子的元素被称之为 flex 项(flex item)item
flex-direction
它可以指定主轴的方向(弹性盒子子类放置的地方)— 它默认值是 row
flex-direction: column
你会看到,这会将那些元素设置为列布局,就像我们添加这些 CSS 之前
flex-wrap
当你在布局中使用定宽或者定高的时候,可能会有一个问题出来即处于容器中的 弹性盒子子元素会溢出,破坏了布局
解决方法:
flex-wrap: wrap
flex-flow 缩写
flex-direction: row;
flex-wrap: wrap;
flex-flow: row wrap;
flex 项的动态尺寸
article {
flex: 1;
}
这是一个无单位的比例值,表示每个 flex 项沿主轴的可用空间大小。本例中,我们设置
您还可以指定 flex 的最小值。 尝试修改现有的 article 规则:
article {
flex: 1 200px;
}
article:nth-of-type(3) {
flex: 2 200px;
}
这表示“每个flex 项将首先给出200px的可用空间,然后,剩余的可用空间将根据分配的比例共享“。 尝试刷新,你会看到分配空间的差别。
flex: 缩写与全写
建议不要使用全写属性,除非你真的需要(比如要去覆盖之前写的)。使用全写会多些很多的代码,它们也可能有点让人困惑。
水平和垂直对齐
div {
display: flex;
align-items: center;//垂直居中
justify-content: center;//水平居中
}
flex 项排序
弹性盒子也有可以改变 flex 项的布局位置的功能,而不会影响到源顺序(即 dom 树里元素的顺序)。这也是传统布局方式很难做到的一点。
button:first-child {
order: 1;
}
- 所有 flex 项默认的 order 值是 0。
- order 值大的 flex 项比 order 值小的在显示顺序中更靠后。
- 相同 order 值的 flex 项按源顺序显示。所以假如你有四个元素,其 order 值分别是2,1,1和0,那么它们的显示顺序就分别是第四,第二,第三,和第一。
- 第三个元素显示在第二个后面是因为它们的 order 值一样,且第三个元素在源顺序中排在第二个后面。
你也可以给 order 设置负值使它们比值为 0 的元素排得更前面。比如,你可以设置 “Blush” 按钮排在主轴的最前面:
button:last-child {
order: -1;
}
flex 嵌套
参考:https://developer.mozilla.org/zh-CN/docs/Learn/CSS/CSS_layout/Flexbox