flex布局子项常见属性
属性 | 说明 |
---|---|
flex | 子项目占的份数 |
align-self | 控制子项自己在侧轴的排列方式 |
order | 属性定义子项的排列顺序(前后顺序) |
具体用法
1. flex
flex属性定义子项目分配剩余空间,用flex来表示占多少份数。默认为0
.item {
flex: <number>;/* default o*/
}
圣杯布局和双飞翼布局达到的效果基本相同,都是侧边两栏宽度固定,中间栏宽度自适应
圣杯布局:先设置父盒子display为 flex 属性,然后左侧盒子右侧盒子固定宽度,中间自适应(flex:1) 即可,例:
section {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 0 auto;
}
section div:nth-child(1) {
width: 100px;
height: 150px;
background-color: red;
}
section div:nth-child(2) {
flex: 1;
background-color: green;
}
section div:nth-child(3) {
width: 100px;
height: 150px;
background-color: blue;
}
<section>
<div></div>
<div></div>
<div></div>
</section>
双飞翼布局:先设置父盒子display为 flex 属性,然后内部盒子都设置为flex为1(即各占一份,此时三等分),中间盒子再进行调整宽度(flex:2/3/4等等) 即可,例:
p {
display: flex;
width: 60%;
height: 150px;
background-color: pink;
margin: 100px auto;
}
p span {
flex: 1;
//p 里面的span 都各占一份
}
p span:nth-child(2) {
flex: 2;
background-color: purple;
//设置第二个盒子占两份(也就是第二个盒子稍大一些)
}
<p>
<span>1</span>
<span>2</span>
<span>3</span>
</p>
不需要flex的双飞翼布局:
- left、center、right三种都设置
float:left
- 设置center宽度为100%
width:100%
- 设置负边距,left设置负边距为100%:
margin-left: -100%;
,right设置负边距为自身宽度margin-left: -自身宽度;
- 设置content的margin值为左右两个侧栏留出空间,margin值大小为left和right宽度
2. align-self 控制子项自己在侧轴上的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。(注意是侧轴)
默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。
span:nth-child(2){
/*设置自己在侧轴上的排列方式*/
align-self: flex-end;
}
3. order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0。
注意:和z-index不一样。z-index是控制前后顺序(相当于叠罗汉的效果),这个是控制左右的顺序