flex布局
如果做PC端页面布局,我们还是传统布局。
如果是移动端或者不考虑兼容性问题的PC端页面布局,我们还是使用flex弹性布局
flex布局原理
通过给父盒子添加flex属性,来控制子盒子的位置和排列方式
- 任何一个元素都可以指定flex布局
- 当我们设定flex布局以后,子元素的float,clear,vertical-align属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用flex布局的元素,称为flex容器(flex container),简称’容器‘。它的所有子元素自动成为容器成员,称为flex项目(flex item),简称项目。
父项常见属性
flex-direction 设置主轴的方向
在flex布局中,是分为主轴和侧轴两个方向,同样的叫法有:行和列,x轴和y轴
默认主轴方向就是x轴方向,水平向右
默认侧轴方向就是y轴方向,水平向下
我们的元素是跟着主轴去排列的
属性:
flex-direction: row;从左到右排列
flex-direction: row-reverse;从右到左排列
flex-direction: column;从上到下
我们可以把主轴设置为Y轴,那么x轴就成了侧轴
flex-direction: column-reverse;从下到上
<style>
div{
/* 给父级添加flex属性 */
display: flex;
width: 80%;
height: 300px;
background-color: pink;
/* 默认的主轴是x轴 row 所以Y轴就是侧轴*/
/* 我们的元素是跟着主轴去排列的 */
/* flex-direction: row; */
/* flex-direction: row-reverse; */
/* 我们可以把主轴设置为Y轴,那么x轴就成了侧轴 */
flex-direction: column-reverse;
}
div span{
width: 150px;
height: 100px;
background-color: rgb(252, 192, 115);
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
</div>
</body>
justify-content:是设置主轴上子元素的排列方式
注意:使用这个属性之前一定要确定好主轴是哪个
justify-content: flex-start;从头部开始
justify-content: flex-end;从尾部开始
只是右边对齐。但是子元素顺序不改变
justify-content: center;居中对齐
justify-content: space-around;平分剩余空间
justify-content: space-between;先两边贴边,再平分剩余空间
flex-wrap子元素是否换行
默认情况下,项目都排列在一行上,flex-wrap默认不换行。
align-items:设置侧轴上的子元素排列方式(单行)
flex-start 默认值从上到下
flex-end从下到上
center居中对齐
div{
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 默认主轴是x轴 row 主轴居中对齐*/
justify-content: center;
/* 侧轴局中 */
align-items: center;
}
stretch拉伸
拉伸,子盒子不要给宽度
div{
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 默认主轴是x轴 row 主轴居中对齐*/
justify-content: center;
/* 侧轴局中 */
align-items: center;
/* 拉伸,子盒子不要给宽度 */
align-items: stretch;
}
align-content设置侧轴上子元素的排列方式(多行)
在单行下没有效果
<style>
div{
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 换行 */
flex-wrap: wrap;
/* 因为有了换行,此时我们侧轴上控制子元素的对齐方式我们用align-content */
/* align-content: flex-start; */
/* align-content: flex-end; */
/* align-content: center; */
/* align-content: space-between; */
align-content: space-around;
}
div span{
width: 150px;
height: 100px;
background-color: rgb(252, 192, 115);
color: aliceblue;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>11</span>
<span>22</span>
<span>33</span>
</div>
align-item,align-content的区别
flex-flow是flex-direction和flex-wrap的总和
<style>
div{
/* 给父级添加flex属性 */
display: flex;
width: 600px;
height: 400px;
background-color: pink;
/* 第一种写法 */
/* flex-direction: column;
flex-wrap: wrap; */
/* 把以上两句话合写 */
flex-flow: column wrap;
}
div span{
width: 150px;
height: 100px;
background-color: rgb(252, 192, 115);
color: aliceblue;
margin-right: 5px;
}
</style>
</head>
<body>
<div>
<span>1</span>
<span>2</span>
<span>3</span>
<span>11</span>
<span>22</span>
<span>33</span>
</div>
子项常见属性
flex属性
flex属性定义子项目分配剩余空间,用flex来表示占多少份数
默认为0
<style>
section{
display: flex;
width: 60%;
height: 150px;
background-color: #abcdef;
margin: 0 auto;
}
section div:nth-child(1){
width: 100px;
height: 150px;
background-color: rgb(245, 213, 145);
}
section div:nth-child(2){
flex: 1;
background-color: rgb(168, 243, 154);
}
section div:nth-child(3){
width: 100px;
height: 150px;
background-color: rgb(245, 145, 145);
}
</style>
</head>
<body>
左侧固定,右侧固定,中间自适应
<section>
<div></div>
<div></div>
<div></div>
</section>
</body>
align-self控制子项自己在侧轴的排列方式
align-self允许单个项目和其他项目有不一样的对齐方式,可覆盖align-item属性。
默认值为auto,表示继承父元素的align-item属性,如果没有父元素,则等同于stretch
div span:nth-child(3){
align-self: flex-end;
}
order属性定义项目的排列顺序
数值越小,排列越靠前,默认为0.
注意和z-index不一样
div span:nth-child(2){
order: -1;
}