flex弹性布局
概述: flex布局是css3中用的比较多的 比较实用,很多场景都能用到,而且比较简单,方便。
使用flex布局的容器(flex container),它内部的元素自动成为flex项目(flex item)。容器拥有两根隐形的轴,水平的主轴(main axis),和竖直的交叉轴。主轴开始的位置,即主轴与右边框的交点,称为main start;主轴结束的位置称为main end;交叉轴开始的位置称为cross start;交叉轴结束的位置称为cross end。item按主轴或交叉轴排列,item在主轴方向上占据的宽度称为main size,在交叉轴方向上占据的宽度称为cross size。
此外,需注意使用flex容器内元素,即flex item的float,clear、vertical-align属性将失效。
父容器属性:
- flex-direction
- flex-wrap
- flex-flow
- justify-content
- align-items
- align-content
1.flex-direction 主轴方向的排列规则
- row(默认值):主轴为水平方向,起点在左端。
- row-reverse:主轴为水平方向,起点在右端。
- column:主轴为垂直方向,起点在上沿。
- column-reverse:主轴为垂直方向,起点在下沿。
2.flex-warp 换行规则
- nowrap:默认 不换行
- wrap:换行,第一行在上方。
- wrap-reverse:换行,第一行在下方
3.flex-flow
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap。
4.justify-content 定义主轴的对齐方式 (我个人用这个用的比较多)
- flex-start(默认值):左对齐
- flex-end:右对齐
- center: 居中
- space-between:两端对齐,项目之间的间隔都相等。
- space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍。
5.align-items 定义在交叉轴上如何对齐 可以理解为即左右又上下
- flex-start:交叉轴的起点对齐。
- flex-end:交叉轴的终点对齐。
- center:交叉轴的中点对齐。
- baseline: 项目的第一行文字的基线对齐。
- stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
6.align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
- flex-start:与交叉轴的起点对齐。
- flex-end:与交叉轴的终点对齐。
- center:与交叉轴的中点对齐。
- space-between:与交叉轴两端对齐,轴线之间的间隔平均分布。
- space-around:每根轴线两侧的间隔都相等。所以,轴线之间的间隔比轴线与边框的间隔大一倍。
- stretch(默认值):轴线占满整个交叉轴。
项目(子容器)属性
- order
- flex-grow
- flex-shrink
- flex-basis
- flex
- align-self
不详细介绍啦 如果要用的时候自己查询 这里我个人用子容器属性用的比较少 一般情况的话不用,特殊的某几个项目需要单独排列的时候需要用到
扩展:垂直居中(例子)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pDiv{
display: flex;
flex-direction: column;
justify-content: center;
width: 500px;
height: 300px;
background: #1f9bb1;
}
.item{
/*flex:1表示平分父亲基于主轴对其方向的大小 如果是column 则是高度 row 则是宽度 设置了这个过后其他的宽高就会失效*/
/*flex: 1;*/
width: 50px;
height: 30px;
margin: 10px;
background: #fff;
}
</style>
</head>
<body>
<div class="pDiv">
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>