文章目录
说明
Flex是Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。
任何一个容器都可以指定为Flex布局。
注意
设为Flex布局以后,子元素的float、clear和vertical-align属性将失效。
设置在子元素上的属性
1.flex-grow:number (放大)
使用本属性会让flex盒子按所填写的比例占据父节点剩余的空间
.p{
width : 600px;
height : 100px;
display:flex;
}
.item{
width:100px;
flex-grow:1;
}
<div class = "p">
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
</div>
<!-- 三个div的宽度都为200px,按比例平分父元素空间-->
2.flex-shrink:number(缩小)
会让flex盒子按所填写的比例砍掉父节点不足的空间
.p{
width : 300px;
height : 100px;
display:flex;
}
.item{
width:200px;
flex-grow:1;
}
<div class = "p">
<div class = "item"></div>
<div class = "item"></div>
<div class = "item"></div>
</div>
<!--
三个div的宽度都为100px,按照子节点的大小,
父节点应该长度为600px,缺少300px,
缺失的部分,按比例均摊到各子节点中
-->
3.flex-basis(基准值)
盒子占主轴方向上的大小
权重比width,height等要高
主轴方向是行时,该值就是宽度的大小
主轴方向是列时,该值就是高度的大小
4.flex(简写方式)
是flex-grow , flex-shrink , flex-basis三种属性的简写
常用简写方式 flex : 1(flex-grow) 2(flex-shrink) 50%(flex-basis);
5.order:number(排序)
填写的值越小,排序时越靠前,默认值为0
6.align-self(对齐方式)
权重比align-items高
常用对齐方式:
属性值 | 效果 |
---|---|
auto | 默认值。元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。 |
stretch | 元素被拉伸以适应容器。如果指定侧轴大小的属性值为’auto’,则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸,但同时会遵照’min/max-width/height’属性的限制。 |
center | 位于容器的中心。在侧轴上居中放置。 |
flex-start | 位于侧轴的起始位置。 |
flex-end | 位于侧轴的结束边界。 |
baseline | 位于容器的基线上。如行内轴与侧轴为同一条与’flex-start’等效。否则将与基线对齐 |
设置在父元素上的属性
1.flex-direction(元素排列方式)
属性值 | 效果 |
---|---|
row | 默认值。水平显示,正如一个行一样。 |
row-reverse | 与 row 相同,但是以相反的顺序。 |
column | 垂直显示,正如一个列一样. |
column-reverse | 与 column 相同,但是以相反的顺序。 |
2.flex-wrap(换行)
属性值 | 效果 |
---|---|
wrap | 超出换行 |
wrap-reverse | 反方向换行 |
nowrap | 默认值.超出不换行 |
3.flex-flow(简写)
是flex-direction与flex-wrap的简写形式
flex-flow:row(lex-direction) wrap(flex-wrap)
4.justify-content(主轴上的排列方式)
属性值 | 效果 |
---|---|
flex-start | 默认值。项目位于主轴方向的开头. |
flex-end | 项目位于主轴方向的结尾。 |
center | 项目位于主轴方向的中心。 |
space-between | 项目位于主轴之间留有空白的容器内。 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
space-between
eg:边界 (元素一)空白 空白(元素二)空白 边界
space-around
eg:边界 空白(元素一)空白 空白(元素二)空白 边界
5.align-items(元素在侧轴上的排列方式)
属性值 | 效果 |
---|---|
flex-start | 默认值。项目位于侧轴方向的开头. |
flex-end | 项目位于侧轴方向的结尾。 |
center | 项目位于侧轴方向的中心。 |
space-between | 项目位于侧轴之间留有空白的容器内。 |
space-around | 项目位于各行之前、之间、之后都留有空白的容器内。 |
space-between
eg:边界 (元素一)空白 空白(元素二)空白 边界
space-around
eg:边界 空白(元素一)空白 空白(元素二)空白 边界
6.align-content(多根轴线的对齐方式)
如果项目只有一根轴线,该属性不起作用
属性值 | 效果 |
---|---|
flex-star | 与交叉轴的起点对齐。 |
flex-end | 与交叉轴的终点对齐。 |
center | 与交叉轴的中点对齐。 |
space-between | 与交叉轴两端对齐,轴线之间的间隔平均分布。 |
space-around | 每根轴线两侧的间隔都相等。 |
stretch | 默认值,轴线占满整个交叉轴。 |