一,弹性盒模型
写法: dispaly:flex;
作用:主要用于手机和移动端布局,弹性是父级控制子集进行布局排序
特性
1.会将子元素均等的平排在一行,根据父级宽度自动分配空间
2.子元素宽度不写默认为0
3.子元素高度不写继承父元素的高度
代码如下:
<style>
ul{
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
显示样式
例1
二,主轴方向
什么是主轴呢?
主轴示意图
写法:
flex-direction:row;主轴向右(默认)
flex-direction:row-reverse;主轴向左
flex-direction:column;主轴向下
flex-direction:column-reverse;主轴向上
下面还是那上面的例子,用一个主轴向上来举一个例子.
ul{
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-direction:column-reverse; //主轴向上
}
主轴向上
三,主轴换行方向
前提条件:子元素之和大于父元素的宽度
写法:
flex-wrap:nowrap;不换行
flex-wrap:wrap;换行
flex-wrap:wrap-reverse;向上换行
下面用一个向下换行举一个例子
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-wrap:wrap; //加入向下换行
}
ul>li{
width: 250px; //将四个li设置宽度为250px 很明显超出了父级宽度
height: 200px;
font-size: 30px;
border: 1px solid red;
}
主轴向下换行
三,专属于主轴和换行的复合样式写法
写法:复合写法:flex-flow:row wrap; 主轴向右 向下换行
四,对齐方式
写法:
justify-content:flex-start;子元素左对齐
justify-content:flex-end;子元素右对齐
justify-content:center ;子元素居中对齐
justify-content:space-between;两端对齐(中间留有空隙)
子元素之间的空隙 = (父元素的宽度 - 子元素之和的宽度) / 元素的个数 - 1
justify-content:space-around;全部有空隙
子元素与父元素的宽度间隙 = (父元素的宽度 - 子元素的宽度之和 )/ 2 *子元素的个数
子元素与子元素的间隙 = (父元素的宽度 - 子元素宽度之和)/ 子元素的个数
子元素之间的是父级2倍!
样式很多 ,只演示上面粗体部分的代码和样式.
1.子元素居中对齐:justify-content:center;
ul{
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-wrap:wrap;
justify-content: center;
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
子元素居中对齐
2.子元素justify-content:space-around;全部有空隙这个很常用 也很便捷 比如各大网站上应用这种写法很便捷.
四周有空隙
ul{
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-wrap:wrap;
justify-content:space-around;//四周有空隙
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
四周有空隙
五,交叉轴
先解释一下什么是交叉轴
交叉轴就是主轴和换行的那个交点
1.单行控制.
写法:
align-items:flex-end;元素终点位置对齐
align-items:center; 元素居中对齐
align-items:baseline; 基线对齐
ul{
height: 400px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-flow:row wrap;
align-items:flex-end;//交叉轴终点对齐
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
元素终点对齐
2.多行控制
写法: align-content:flex-start; 起点位置对齐
align-content:flex-end;终点位置对齐
align-content:center; 居中对齐
<style>
body,div,p,h1,h2,h3,h4,h5,h6,ul,ol,p{margin:0;padding:0;list-style:none;}
ul,ol{padding:0; list-style:none;}
a{text-decoration:none;}
input{outline:none;}
ul{
height: 600px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-flow:row wrap;
align-content:flex-end;
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
交叉轴多行控制
六,弹性因子
通俗的来解释就是当一行之间有空隙,就会补充上空隙。
写法:
弹性因子:条件 一行必须有空隙
flex-grow:0; 默认不扩充
一行都没有弹性因子的时候 有一个元素设置了弹性因子 占所有剩余空间
flex:auto;
自动计算空余空间 有空间就扩大 没有就缩小
原样式
<style>
ul{
height: 600px;
width: 800px;
display:flex;
border: 2px solid blue;
flex-flow:row wrap;
}
ul>li{
width: 150px;
height: 200px;
font-size: 30px;
border: 1px solid red;
}
ul>li:nth-of-type(1){
flex:auto; //将第一个li自动计算空隙 并分配给第一个元素
}
</style>
效果图
网友评论