弹性布局
- 弹性容器:设置了属性display=flex 这个元素为弹性容器
- 弹性子元素:设置了属性display=flex 弹性容器的直接子元素
弹性主轴方向(默认主轴方向是从左到右row)
通过设置弹性容器的flex-direction属性修改主轴方向。若直接子元素的组成的全部宽度超过父元素的宽度时,直接子元素宽度就会按比例缩小。
/*主轴从左到右*/
flex-direction: row;
/*主轴从上到下*/
flex-direction: column;
/*主轴从右到左*/
flex-direction: row-reverse;
/*主轴从下到上*/
flex-direction: column-reverse;
设置主轴内容分布(默认向主轴的开始位置靠拢flex-start)
通过设置弹性容器的justify-content属性修改主轴的内容分布。
/*向主轴的开始位置靠拢*/
justify-content: flex-start;
/*向主轴的结束位置靠拢*/
justify-content: flex-end;
/*space开头的都是平均分布*/
/*内容两边有间隔,内容中间也有间隔,两边间隔是中间间隔宽度的一半*/
justify-content: space-around;
/*内容两边没有间隔,中间有间隔*/
justify-content: space-between;
/*两边有间隔,中间有间隔,间隔都是相同的 这是新的属性*/
justify-content: space-evenly;
设置侧轴的内容分布单行(默认是拉伸stretch)
通过设置弹性容器的align-items属性修改子元素侧轴的内容分布单行
/*子元素在弹性布局的当前行的侧轴方向的对齐方式*/
/*居中对齐*/
align-items: center;
/*对齐起始边界*/
align-items: flex-start;
/*对齐结束边界*/
align-items: flex-end;
/*拉伸*/
align-items: stretch;
弹性布局换行(默认是不换行nowrap)
在前面已经说过:若直接子元素的组成的全部宽度超过父元素的宽度时,直接子元素宽度就会按比例缩小。
所以可以通过修改弹性容器的flex-wrap属性修改子元素是否可以换行
flex-wrap: wrap;
flex-wrap: nowrap;
设置侧轴的内容分布多行
首先若想修改多行分布 必须将换行属性设为flex-wrap: wrap;
通过设置弹性容器的align-content属性修改子元素侧轴的内容分布多行
/*多行内容居中对齐*/
align-content: center;
/*侧轴开始位置靠拢*/
align-content: flex-start;
/*侧轴结束位置靠拢*/
align-content: flex-end;
/*平均分布,内容两边有间隔,内容中间也有间隔,两边间隔是中间间隔宽度的一半*/
align-content: space-between;
/*内容两边没有间隔,中间有间隔*/
align-content: space-around;
/*两边有间隔,中间有间隔,间隔都是相同的 这是新的属性*/
align-content: space-evenly;
弹性子元素的空间分布
当我想实现左边是侧边栏,中间是主要内容,右边是广告内容。而侧边栏宽度是主要内容宽度的一半,广告内容的宽度是200px的效果时。可以设置弹性子元素的flex属性
<style type="text/css">
.parent{
width: 800px;
height: 800px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.c1{
flex: 1;
background: #889291;
}
.c2{
flex:2;
background: green;
}
.c3{
width: 200px;
background: red;
}
</style>
<div class="parent">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
</div>
弹性子元素的排序
通过设置弹性资源的order值,修改子元素的排序,从小到大。
<style type="text/css">
.parent{
width: 800px;
height: 800px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.c1{
flex: 1;
background: #889291;
order: 3;
}
.c2{
flex:2;
background: green;
order: 2;
}
.c3{
width: 200px;
background: red;
order: 1;
}
</style>
<div class="parent">
<div class="c1">1</div>
<div class="c2">2</div>
<div class="c3">3</div>
</div>
单个弹性子元素的侧轴设置
通过设置子元素的align-self修改单个子元素的侧轴分布
.c1{
flex: 1;
background: #889291;
align-self: stretch;
}
.c2{
flex:2;
background: green;
}
.c3{
width: 200px;
background: red;
}
继承
在网页右键点击检查查看网页源代码时,有些元素会有默认的继承。
但是继承默认仅继承文字相关属性,不继承盒子相关属性。