从0开始学习HTML5CSS3(三)

弹性布局

弹性（伸缩）布局：是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>