一真的小站

鳶飛魚躍,無處不是化境。

0%

二十、伸缩盒子

二十、伸缩盒子

伸缩布局

布局的传统解决方案,基于盒状模型,依赖 display 属性+position属性+float属性。

它对于那些特殊布局非常不方便。CSS3在布局方面做了非常大的改进,使得我们对块级元素的布局排列变得十分灵活,适应性非常强,其强大的伸缩性,在响应式开中可以发挥极大的作用。

样式:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<head>
<style>
* {
padding: 0;
margin: 0;
}

.box {
width: 900px;
height: 600px;
border: 1px solid red;
box-sizing: border-box;
margin: 0 auto;
/* 设置父容器为盒子;会使每一个子元素为伸缩项 */
display: flex;
/* 设置子元素排列方式 */
justify-content: space-around;
flex-wrap: wrap;
flex-direction: column;
}

.first {
width: 200px;
height: 200px;
background-color: red;
flex-grow: 1;
}
</style>
</head>

重要属性

a)display:flex:如果一个容器设置了这个属性,那么这个盒子里面的所有直接子元素都会自动的变成伸缩项(flex item)
b)justify-content:设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式,语法:justify-content:flex-start I flex-end I center I space-
between I space-around

flex-start:

弹性盒子元素将向行起始位置对齐。该行的第一个子元素的主起始位置的边界将与该行的主起始位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

flex-end:

弹性盒子元素将向行结束位置对齐。该行的第一个子元素的主结束位置的边界将与该行的主结束位置的边界对齐,同时所有后续的伸缩盒项目与其前一个项目对齐。

center:

弹性盒子元素将向行中间位置对齐。该行的子元素将相互对齐并在行中居中对齐,同时第一个元素与行的主起始位置的边距等同与最后一个元素与行的主结束位置的边距(如果剩余空间是负数,则保持两端相等长度的溢出)。

space-between:

左右对齐父容器的开始和结束,中间平均分页,产生相同的间距

space-around:

将多余的空间平均的分页在每一个子元素的两边margin:e auto.造成中间盒子的间距是左右两边盒子间距的两倍*/

常用属性

flex-flow:

是flex-wrap和flex-direction的综合

flex-wrap:控制子元素是否换行显示,默认不换行
nowrap:不换行–则收缩
wrap:换行
wrap-reverse:翻转,原来是从上到下,翻转后就是从下到上来排列

flex-direction:

设置子元素的排列方向:就是用来设置主轴方向,默认主轴方向是row(水平方向)

row:水平排列方向,从左到右
row-reverse:水平排列方向,从右到左
column:垂直排列方向,从上到下
column-reverse:垂直排列方向,从下到上*/

flow-grow:

可以来扩展子元素的宽度:设置当前元素应该占据剩余空间的比例值比例值计算:当前空间的flex-grow/所有兄弟元素的flex-grow的和flex-grow的默认是0,说明子元素并不会去占据剩余的空间

flow-grow:1;

flex-shrink:

定义收缩比例,通过设置的值来计算收缩空间比例值计算:当前空间的flex-shrink/所有兄弟元素的flex-shrink的和默认值为1

flex-shrink:2;

flex属性:

flex属性是flex-grow,flex-shrink和flex-basis的简写,默认值为0 1 auto。后两个属性可选
语法:

flex:[flex-grow][flex-shrink][flex-basis]:大多数情况下没必要使用这种语法,当使用flex缩写时,大多数情况下没必要使用这种语法

flex:[number]:这个语法指定了一个数字,代表了这个伸缩项目该占用的剩余空间比例

flex:auto:属性值被设为auto的伸缩项目,会根据主轴自动伸缩以占用所有剩余空间

其他属性

align-items:

设置子元素(伸缩项)在侧轴方向上的对齐方式center:设置在侧轴方向上居中对齐

flex-start:设置在侧轴方向上顶对齐flex:end:设置在侧轴方向上底对齐

stretch:拉伸:让子元素在侧轴方向上进行拉伸,填充满整个侧轴方向默认值

baseline:文本基线

align-items:center;

align-self:

设置单个子元素在侧周方向上的对其方式

align-self: flex-end