flex
写在父元素盒子里
justify-content:flex-start(默认)左对齐/flex-end右对齐/center水平居中/space-between两端对齐项目(盒子)间距离相等/space-around两端对齐项目两侧距离相等/space-evenly两端对齐两端距离与盒子间距离相等
align-items:stretch(默认当项目没有设置高度会默认为父元素高度)/flex-start(顶部对齐)/flex-end(底部对齐)/center垂直居中/baseline与第一行文字底部对齐/
flex-direction:roe水平方向起点在左侧(默认)/roe-reverse水平方向起点在右侧/column垂直方向起点在上侧/column-reverse垂直方向起点在下侧
flex-wrap:nowrap不换行(默认)/wrap换行/wrap-reverse换到上面
align-content:stretch 默认/flex-start顶部对齐/flex-end底部对齐/center垂直居中/space-between行间距离相等/space-around行两侧距离相等/space-evenly行两端距离与盒子间距离相等
项目属性
order:x; x值越小盒子越靠前 默认值0 盒子排列顺序
align-self：auto(默认继承父元素align-items属性)/flex-start(交叉轴起点 向上对齐)/flex-end(交叉轴终点 向下对齐)/center(交叉轴中心 垂直居中)
flex-grow：默认发大倍数0;
flex-shrink：默认缩小倍数1;
flex-basis：auto默认；项目实际大小
flex：flex-grow (flex-shrink) (flex-basis ) 0 1 auto ；(默认值)/1 1 auto；父元素空间有剩余，等比例放大，空间不足不缩小/none父元素空间有剩余，不放大，空间不足缩小;/1 自适应布局；
媒体查询
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
width: 500px;
height: 500px;
background-color: #ccc;
}
/* @media screen and (min-width(从小往大写):800px) {
.box{
background-color:#f00;
}
}
@media screen and (min-width:1200px) {
.box{
background-color:#ff0;
} */
@mediascreen and (max-width/*(从大到小写)*/: 1500px) {
.box{
width: 1200px;
}
}
@mediascreen and (max-width: 1000px) {
.box{
width: 970px;
}
}
@mediascreen and (max-width: 600px) {
.box{
width: 100%;
}
}
</style>
</head>
<body>
<divclass="box"></div>
</body>
</html>
box-sizing:content-box默认 标准盒子模型
box-sizing:border-box怪异盒子模型
扫一扫
3308
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
