弹性布局
弹性（伸缩）布局：是C3里新出的一种布局方式
只是多一种布局的选择
特点： 1.用了弹性布局后，可以让子元素变成类似行内块元素的东西
2.如果父盒子不够放，会自动伸缩子元素的大小
3.给谁加display:flex，是代表让谁的子元素用弹性布局
使用
弹性布局会让子元素在主轴方向依次排列，默认主轴为x轴
display:flex;代表让子元素用弹性布局
justify-content:设置子元素在主轴方向的对齐方式
flex-start：默认值
center： 在主轴居中
flex-end：在主轴终点对齐
space-around: 两边有间距，元素和元素之间也有间距
space-between: 两边没有间距，元素和元素之间有间距
align-items: 设置子元素在副轴方向的对齐方式
flex-start：在副轴起点对齐，如果不给副轴方向大小，内容撑开
center： 在主轴居中
flex-end：在主轴终点对齐
stretch：默认值，在副轴起点对齐，如果不给副轴方向大小，会铺满父盒子的副轴方向
flex-direction: column;改变主轴方向,设置y轴为主轴
单独设置某个子元素在副轴的排列：
align-self：取值跟align-items是一样的
stretch：在副轴起点，但是如果妹给副轴大小，那么铺满父元素的副轴
flex-start：在副轴起点
flex-end：在副轴终点
center：在副轴居中
设置置某个子元素在主轴方向的占比
<style>
ul {
width: 600px;
height: 650px;
border: 1px solid #000;
padding: 0;
list-style: none;
display: flex;
}
li {
/* width: 100px; */
height: 100px;
background-color: yellowgreen;
}
li:nth-child(1){
/* 占3份 */
/* flex:3; */
width: 200px;
}
li:nth-child(2){
/* 占3份 */
flex:3;
/* width: 300px; */
}
li:nth-child(3){
/* 占2份 */
flex:2;
}
</style>
开启换行
弹性布局特点：永远不会超出父盒子的主轴方向，会自动伸缩
不要它自动伸缩，而是不够放就换一行
flex-wrap: wrap; 开启换行，如果主轴不够放不伸缩了，而是另起一
align-items 在自己那块空间的副轴对齐（有几行就有几块空间）
多媒体标签audio,video
audio,video的属性,方法一样
属性：
src:指定资源的路径
controls：显示控制条
width: 设置宽
height:设置高
跟img一样的宽高特点：不给宽高就是视频宽高，给宽就可以自动算出高
autoplay:
自动播放，谷歌以前能用，但是18年4月后谷歌为了从杜绝广告等之类的原因考虑，不允许带声音的自动播放
muted：静音
所有浏览器都支持mp4。利用格式问题，我们可以让不同浏览器放不同的视频
<video src="video/movie01.mp4" controls width="400" autoplay muted></video>
网友评论