响应式的布局,跟着浏览器的变化而变化
1.给父元素设置flex布局
<section>
<div></div>
<div></div>
<div></div>
</section>
//CSS
section {
display: flex;
width:800px;
height: 100px;
}
section div:nth-child(1) {
flex: 1 ;//没有单位 占一份
}
section div:nth-child(2) {
flex: 2; //占父元素的两份
border: 5px;//可以设置,不会影响父盒子分出份数来
}
section div:nth-child(3) {
flex: 1;
}
/*
将section分成4份, 第一个div占一份 第二个两份 第三个一份
*/
因为是响应式布局,所以会随着浏览器进行变化,但是可以设置最小的变化到多大,最大变化到多大
//在父元素中 ,即使用了display: flex;的盒子
section {
display: flex;
width:800px;
height: 100px;
min-width: 280px; //不能小于280
max-width: 1200px;//不能大于1200
}
2.伸缩布局固定宽度
如果父盒子里有三个盒子,有一个盒子使用width: 300px; 没使用flex.则两个使用flex的盒子将剩下的宽度进行平分,第一个盒子的宽度是不变的而且不是响应式的。
3.伸缩布局的排列方式
排列方式默认是横向的,即沿x轴
flex-direction: row; //水平排列
flex-direction: column; //垂直排列
flex-direction: row-reverse; //水平翻转排列
flex-direction: column-reverse; //垂直翻转排列
4、伸缩的最小和最大,不能再响应变化
min-width 响应式,响应到最小多少像素的时候就停止,不再变化
max-width
以下的属性,在父元素中写
5.justify-content 水平布局
如果父元素使用flex,子元素不能填满盒子的话,使用这个属性,设置子元素排列的内容。
justify-content 属性的值
flex-start 默认值,项目位于容器的开头 让子元素从父元素的开头开始排序,但是盒子顺序不变
flex-end 项目位于容器的结尾。 让子元素从父容器的后面开始排序,但是盒子顺序不变
center 项目位于容器的中心 让子元素在父容器中间显示
space-around 项目位于各行之前,之间,之后都留有空白的容器内,相当于给每个盒子添加了margin 外边距
space-between 项目位于各行之间留有空白的容器内,左右盒子贴近父容器,中间的盒子平均分布空白间距,如图:
5.align-items 垂直对齐
如果子元素的高度比父盒子的高度小,单行情况下
属性值:
flex-start 上对齐
flex-end 底对齐
center 垂直中心对齐
stretch 默认值 如果子元素不给高度,就会被拉伸,适应父元素的高度
6.flex-wrap 控制是否换行
如果 子元素内容宽度超过父盒子的时候
nowrap 默认值 不拆行,不拆列 ,则压缩显示,强制一行显示
wrap 超过的自动换行
wrap-reverse 换行显示,翻转, 和wrap是相反的。
7.flex-flow
flex-flow是flex-direction 和flex-wrap的缩写
flex-flow: flex-direction flex-wrap;
或者
flex-flow: 排列方向 换不换行;
8.align-content
多行的情况下进行使用
必须在父元素中设置display: flex; 并且设置横向排列flex-direction: row; 并设置换行 flex-wrap: wrap; 否则align-content不起作用
flex-start 上对齐
flex-end 底对齐
center 垂直中心对齐
stretch 默认值 如果子元素不给高度,就会被拉伸,适应父元素的高度
space-around 项目位于各行之前,之间,之后都留有空白的容器内,相当于给每个盒子添加了margin 外边距
space-between 项目位于各行之间留有空白的容器内,左右盒子贴近父容器,中间的盒子平均分布空白间距
9.order属性,控制子项目的排列顺序,正序方式排列,从小到大
用css来控制盒子前后顺序,不用非得到结构里面,更改盒子的书写顺序
数字越小的排在最前面,,不写的话就默认都是0,可以给负数,比0小。
在子盒子的css中:
order: -1;