CSS Flex中12个属性的总结
justify-content 定义元素沿主轴的对齐方式
- flex-start(默认值)
- flex-end
- center
- space-between
- space-around
部分主要css代码如下：
.justify-content{
display: flex;
justify-content: center;
/*align-items: flex-end;*/
width: 500px;
/*height: 100px;*/
margin: auto;
background: black;
}
.justify-content p{
/*margin: 0;*/
/*padding: 0;*/
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
.justify-content p.block1{
background: blue;
}
.justify-content p.block2{
background: gold;
}
.justify-content p.block3{
background: hotpink;
}
flex-start
flex-end
center
space-between
space-around
align-items 定义子容器在Flex容器中按照交叉轴排列的方式
- flex-start
- flex-end
- center
- baseline 项目的第一行文字的基线对齐
- stretch(默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度
css--baseline代码如下：
.justify-content{
display: flex;
/*justify-content: center;*/
align-items: baseline;
width: 500px;
height: 100px;
margin: auto;
background: black;
}
.justify-content p{
margin: 0;
padding: 0;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
.justify-content p.block1{
background: blue;
}
.justify-content p.block2{
background: gold;
height:20px;
}
.justify-content p.block3{
background: hotpink;
height:60px;
}
baseline
stretch
flex-start
flex-end
center
align-self 定义了自身元素在Flex容器中按照交叉轴排列对齐的方式,可覆盖align-item属性
- auto 表示继承父元素的属性(默认值)
- flex-start
- flex-end
- center
- baseline
- stretch
flex-direction 定义了元素在flexbox容器中的排序方式
- row(默认值)
- row-reverse
- column
- column-reverse
css
.justify-content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column-reverse;
width: 500px;
height: 160px;
margin: auto;
background: black;
}
row
row-reverse
column
clolumn-reverse
flex-basis 定义了弹性盒子模型flexbox的初始化大小
- auto(默认值)
- 具体值
css
.justify-content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-basis: 400px;
/*width: 500px;*/
height: 160px;
margin: auto;
background: black;
}
flex-wrap 定义了元素在flexbox容器中是显示一行还是多行
- nowrap(默认值)
- wrap
- wrap-reverse
容器css代码
.total{
display: flex;
width: 600px;
}
.justify-content{
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
flex-wrap: wrap-reverse;
flex-basis: 400px;
/*width: 500px;*/
height: 160px;
margin: auto;
background: black;
}
nowrap
wrap
wrap-reverse
align-content 定义了flex容器中每一行的对齐方式
- strecch(默认值)
- flex-start
- flex-end
- center
- space-between
- space-around
flex容器css
.justify-content{
display: flex;
/*justify-content: center;*/
/*align-items: center;*/
/*flex-direction: row;*/
flex-wrap: wrap;
flex-basis: 400px;
align-content: flex-end;
/*width: 500px;*/
height: 160px;
margin: auto;
background: black;
}
flex-start
flex-end
stretch
space-between
space-around
flex-grow 定义了当元素有其他可用空间时如何填充（int类型的值）
- 0(默认值)
0
1
flex-shrink 定义了当元素没有其他可用空间时如何压缩(int类型的值）
- 1(默认值)
css容器css
.justify-content{
display: flex;
/*justify-content: center;*/
/*align-items: center;*/
/*flex-direction: row;*/
/*flex-wrap: wrap;*/
/*flex-basis: 400px;*/
align-content: flex-start;
flex-grow: 2;
width: 500px;
height: 160px;
margin: auto;
background: black;
}
.justify-content p{
margin: 0;
padding: 0;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
}
.justify-content p.block1{
background: blue;
}
.justify-content p.block2{
flex-shrink: 22;
background: gold;
}
.justify-content p.block3{
background: hotpink;
}
22
order 定义元素在容器中排序位置
- 0(默认值) 数值约小越靠前
子项css
.justify-content p.block1{
background: blue;
order:1;
}
.justify-content p.block2{
flex-shrink: 22;
order:0;
background: gold;
}
.justify-content p.block3{
background: hotpink;
order: 3;
}
flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap
flex是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto