文章目录
1.flex布局
flex布局是什么:
Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
- display:flex(块级元素)
- display:inline-flex(行内元素)
2. 容器
采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。
- 主轴(默认是水平方向,main axis)
- 交叉轴(默认是Y轴,cross axis)
- start(一条轴的开始位置)
- end(一条轴的结束位置)
3. 容器属性
3.1 flex-direction
flex-direction属性决定主轴的方向(即项目的排列方向)。
row(默认值): | 主轴水平方向,起点为左端。 |
---|---|
row-reverse | 主轴水平方向,起点为右端。 |
column | 主轴垂直方向,起点为上方。 |
column-reverse | 主轴垂直方向,起点为下方。 |
如果你选择了 row或者row-reverse ,你的主轴将沿着inline方向延伸。
选择column 或者column-reverse 时,你的主轴会沿着上下方向延伸 — 也就是block 排列的方向。
3.2 flex-wrap
默认情况下,项目都排在一条线(又称”轴线”)上。flex-wrap属性定义,如果一条轴线排不下,如何换行。
它可能取三个值。
(1)nowrap(默认):不换行。
(2)wrap:换行,第一行在上方。
(3)wrap-reverse:换行,第一行在下方。
3.3flex-flow
是上两个属性的简称,默认属性row nuwrap。
div {
flex-flow: <flex-direction> || <flex-wrap>;
}
3.4 justify-content属性
flex-start(默认值) | 左对齐 |
---|---|
flex-end | 右对齐 |
center | 居中 |
space-between | 两端对齐,项目之间的间隔都相等 |
space-around | 每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍 |
3.5align-items属性
align-items属性定义项目在交叉轴上如何对齐。
flex-start(默认值): 与交叉轴的起点对齐。
flex-end: 与交叉轴的终点对齐。
center: 与交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
<style>
div{
display: flex;
border: 1px solid #000;
height: 250px;
align-items: flex-start;
}
p