一、flex布局原理
flex是flexible box的缩写,意为“弹性布局”,用来为和盒状模型提供最大的灵活性,任何一个容器都可以指定为flex布局。
当我们为父盒子设置flex布局后,子元素的float,clear,vertical-align属性将失效
总结:就是给父盒子添加flex属性,来控制子盒子的位置和排列方式
二、常见父级属性
1.flex-direction设置主轴方向
默认主轴(x轴)水平向右,侧轴(y轴)垂直向下,可以通过下面的属性进行设置
如果把y轴设置为主轴,那么x轴就成为了侧轴
div {
display: flex;
flex-direction: column;
}
2.justify-content设置主轴上子元素的排列方式
注意是主轴上的子元素,一定要确定好主轴是哪个,主轴是x就横着排,是y就竖着排
3.align-items设置侧轴上的子元素排列方式(单行)
注意,在子项为单行的时候使用,如果有多行,那怎么实现居中呢?见第5条
4.flex-wrap设置子元素是否换行
默认情况下,项目都排在一条线上,默认是不换行的
5.align-content设置侧轴子元素排列方式(多行)
这个属性只能用于子项出现换行的情况下,也就是必须要多行,单行是没有效果的。
6.align-content和align-items的区别
7.flex-flow属性是flex-direction和flex-wrap属性的复合属性
比如下面这两个
flex-direction: row;
flex-wrap: wrap;
可以合在一起写,简写就是:
flex-flow: row wrap;
三、flex布局子项常见属性
1.分配剩余空间
语法 flex:number; 意思是占剩余部分的几份,如果是平均分,就是每个占1份(flex:1;),如果其中一个占的多点,可以flex:2;或者更大,但是注意这个比例一定是按照剩余的部分瓜分的
比如一个div里有三个span,第三个span固定的,前面剩余的部分,第一个span占2份,第二个span占1份
当然啊,这里flex:1,也可以写百分之多少,比如说一共5个盒子,每个占一份,就可以写flex:20%;
div {
display: flex;
width: 1000px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
div span:nth-child(1) {
flex: 2;
background-color: red;
}
div span:nth-child(2) {
flex: 1;
background-color: skyblue;
}
div span:nth-child(3) {
height: 100%;
width: 100px;
background-color: blue;
}
2.控制自己
3.order排列顺序
使用order属性来控制排列的顺序,数值越小越靠前,默认为0
四、常见flex布局思路
前面做上图下字这种效果一般会很麻烦,但是用到flex布局,就很简单了(而且flex布局不会出现外边距合并的问题)