伸缩布局(CSS3新布局flex)
.box {
display: flex;/*使box盒子为伸缩布局*/
}
伸缩布局使得块级元素的布局排列变得十分灵活,适应性非常强,它对响应式开发起到很大作用。
采用伸缩布局的元素,称为伸缩容器,它的所有子元素自动成为容器成员,称为Flex项目。
伸缩容器中有两根轴,主轴(水平方向)和侧轴(垂直方向)。伸缩项目中默认是以主轴方向排列。
下面介绍伸缩布局的相关属性:(以下面为例)
<!-- 对box盒子设置伸缩布局,宽度为1000px,高度省略,居中显示 -->
<div class="box">
<!-- 对伸缩容器中的盒子,宽高均为200px,margin5px -->
<div>1</div>
<div>2</div>
<div>3</div>
</div>
.box {
width: 1000px;
border: 1px solid #000;
margin: 5px auto;
}
.box>div {
width: 200px;
height: 200px;
background-color: pink;
margin: 5px;
}
1. flex-direction:设置伸缩容器中成员的排列方式
flex-direction: row;/* 默认值--以主轴方向排列 水平方向排列 */
flex-direction: column;/* 以侧轴方向排列 垂直方向排列*/
flex-direction: row-reverse;/* 以主轴反方向排列 水平反方向排列*/
flex-direction: column-reverse;/* 以侧轴反方向排列 垂直反方向排列*/
2. justify-content:用来指定主轴的对齐方式
justify-content:flex-start; /* 容器成员水平方向左对齐 */
justify-content:flex-end; /* 容器成员水平方向右对齐 */
justify-content:center; /* 容器成员水平方向居中 */
justify-content:space-around; /* 容器成员水平方向自动平分间距*/
justify-content: space-between; /* 容器成员水平方向自动平分(两端对其)*/
3. align-items:用来指定侧轴的对齐方式 ————————–
align-items: flex-start; /* 容器成员垂直方向上对齐 */
align-items: flex-end;/* 容器成员垂直方向下对齐 */
align-items: center; /* 容器成员垂直方居中对齐 */
/*
注意:
使用该属性,需要配合高度设置为auto;
才会有拉伸效果
*/
align-items: stretch;
4. align-content:用来控制换行堆叠的元素
flex-start 起始点对齐
flex-end 终止点对齐
center 居中对齐
space-around 各行平均分布
space-between 两端对齐
stretch 拉伸
5. align-self:(用于处于伸缩布局的子元素,覆盖伸缩盒子的align-items属性)
使每一个成员的侧轴对齐方式都可以不一样
取值:
flex-start:控制成员的侧轴对齐方式为顶部对齐
flex-end:控制成员的侧轴对齐方式为底部对齐
center: 控制成员的侧轴对齐方式为居中对齐
stretch: 控制成员的侧轴对齐方式为拉伸,且高度要设为auto
如图,可以得到对应取值的效果:
6. flex伸缩比例
flex: x(x 为number)
flex: 2;
当伸缩容器中的成员处于设置了伸缩比例,那么会根据父盒子的宽度来设置设置陈冠的宽高。
然而,当其中某些容器成员没有设置伸缩比例时,会按原宽度显示,父盒子剩余长再对有伸缩比例的成员安排比例。
1.容器成员都设置了伸缩比例的情况
- 某些成员没有设置伸缩比例的情况
7. flex-wrap: 控制伸缩盒子里面的元素是否换行
- nowrap————不换行(默认值)
不换行情况下,当成员的总宽度超出容器的宽度时,成员的宽度会发生改变
- wrap——————换行
换行情况下,成员的总宽度超出容器的宽度时,会自动换行,不会影响成员的宽度
8. order: 用来控制伸缩布局盒子的子元素的顺序
order: number;(不能为负数)
1. number为非负整数 默认为0
2. number越大,越后面