CSS3 FLEX 弹性盒模型
声明弹性盒子的几种方法
- 块级弹性盒子:display:flex;
- 行级弹性盒子:display:inline-flex;
- Webkit 内核的浏览器,必须加上-webkit前缀
- 注意,设为 Flex 布局以后,子元素的float、clear和vertical-align属性将失效
- 宽度、高度正常设置
改变弹性元素方向容器的属性
- 默认水平排列
- 改变内容方向:
- flex-direction:
- row从左边排列
- row-reverse从右边排列,反转
- column从上到下
- column-reverse从下到上,反转
- 装不下,元素内容溢出怎么办
- 折下来,换行
- 按行排列
- flex-wrap
- nowarp默认不换行
- wrap换行
- wrap-reverse第一行在下边,反向折行;
- 按列排列(方向变)
- 从左往右折flex-wrap:wrap;
- 反向折同理
- 一起设置排列方向和折行方式
轴
- 主轴、交叉轴(垂直于主轴)
- 主轴中元素的排列
- 设置内容的对齐方式
- 对齐主轴开始:justify-content
- flex-star;
- 主轴结束felx-end;
- 注意:反转后主轴的开始结束也变方向
- 所有元素都在中间:center;
- 平均分布:space-between(eg:三个元素一个紧贴左边一个中间一个紧贴右边)
- 元素左右两边有等距,所以两个元素间有两倍的间距:space-around;
- 完全平均:space-evenly;
- 交叉轴元素排列
- align-items
- flex-start从交叉轴的起点对齐
- flex-end;
- center从交叉轴的中点对齐
- baseline: 项目的第一行文字的基线对齐
- stretch;拉伸指定大小的优先级高于拉伸
- 多行元素在交叉轴的排列方式
- align-content定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
- lex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
- 注:对单一元素控制,弹性元素
- 通过选择器
- article:first-child
- nth-child(2)
弹性元素对空间的分配元素的属性
- 放大比例:
- flex-grow:1;平均分配,占满盒子(可以对所有元素设置,也可以对单一元素设置)
- flex-grow:0;原来多大就多大;
- 加了box-sizing:border-box;这个属性border和padding大小都算在盒子里面了,方便计算
- 计算方法:用剩下的空间/总份数*某一元素的份数
- 缩小比例:
- 如果所有项目的flex-shrink属性都为1,当空间不足时,都将等比例缩小。如果一个项目的flex-shrink属性为0,其他项目都为1,则空间不足时,前者不缩小。
- eg:flex-shrink:3;
width:200px; - 计算方法:width=200-(200/(2001+2003)*3)*200
- 主轴的基准尺寸的定义
- 默认值auto
- 优先级 :最大/最小>主轴基准尺寸>宽度
- flex-basis:100px;
- max-height
- 弹性元素组规则和定义
- flex-grow:1;
- flex-shrink:2;
- flex-basis:100px;
- 等价于 flex:1 2 100px;//组合属性
- 该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto)。
- align-self
- align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}
<style>
*{
padding:0;
margin:0;
}
body{
height:100vh;视口大小
display:flex;
flex-direction:column;
justify-content:space-between;
}
header{
height:60px;
background:blueviolet;
}
main{
flex-grow:1;中间大小自动延申
background:#ccc;
}
footer{
height:60px;
}
</style>
改变元素的顺序
article section{
flex:1 0 100px;
background:blue;
background-clip:content-box;
padding:10px;
text-align:center;
display:flex;
flex-direction:column;
}
弹性布局移动端通用菜单
<style>
body{
height:100vh;视口大小
display:flex;
flex-direction:column;
}
main{
flex:1;
background:#f3f3f3;
}
footer{
height:50px;
background:#eee;
display:flex;
flex-direction:row;
justify-content:space-between;
border-top:solid 1px #ccc;
}
footer section{
flex:1;
border-right:solid 1px #ccc;
display:flex;
flex-direction:column-reverse;
}
footer section:last-child{
border-right:none;
}
footer section h4{
flex:0 0 50px;
display:flex;
flex-direction:column;
justify-content:center;
text-align:center;
cursor:pointer;
}
footer section ul{
display:flex;
flex-direction:column;
border:solid 1px #ccc;
text-align:center;
margin-bottom:5px;
}
footer section li{
flex:1 0 50px;
display:flex;
flex-direction:column;
border-bottom:solid 1px #ccc;
justify-content :center;
cursor:pointer;
}
</style>
<body>
<main></main>
<footer>
<section>
<h4>教程</h4>
<ul>
<li>PHP</li>
<li>CSS</li>
</ul>
</section>
<section>
<h4>直播</h4>
<ul>
<li></li>
</ul>
</section>
<section>
<h4>软件</h4>
<ul>
<li>
</li>
</ul>
</section>
</footer>
</body>
使用margin自动撑满空间技巧