flex布局
image.png
在 flex 容器中默认存在两条轴，水平主轴(main axis) 和垂直的交叉轴(cross axis)，这是默认的设置，当然你可以通过修改使垂直方向变为主轴，水平方向变为交叉轴。
宽度和高度取决于主轴的方向。
flex容器：
实现flex布局需要一个flex容器。通常是在父元素中加上display:flex;
<div class="parent">
<div class="child">child1</div>
<div class="child">child2</div>
<div class="child">child3</div>
</div>
.parent{
border: 1px solid red;
}
.child{
border:1px solid black;
}
.child:nth-child(1) {
background:red;
}
.child:nth-child(2) {
background:green;
}
.child:nth-child(3) {
background:blue;
}
image.png
首先我们创建一个容器，里面有3个子元素。
.parent{
border: 1px solid red;
display:flex;
}
image.png
给父元素加上display:flex后元素变为1行。
有6种属性可以设置在元素上，分别是：
- flex-direction：主轴方向（即排列的方向）
- flex-wrap：决定容器内元素是否换行。
- flex-flow: flex-direction 和 flex-wrap 的简写形式。
- justify-content:元素在主轴的对齐方式。
- align-items：定义了项目在交叉轴的对齐方式。
- align-content: 定义了多根轴线的对齐方式，如果项目只有一根轴线，那么该属性将不起作用
flex-direction
默认值是row，主轴在水平方向，从左边开始。
row-reverse
主轴在水平方向，从右边开始，如下图：
image.png
column
主轴在垂直方向，从上而下。
image.png
column-reverse：
主轴在垂直方向，从下而上。
image.png
flex-wrap
默认情况下，元素都是排在主轴上，使用flex-wrap可以实现换行。
nowrap
默认情况下是nowrap，当主轴尺寸固定的时候，若空间不足，会稍微调整元素大小，使其在空间内。
.parent{
border: 1px solid red;
display:flex;
width: 400px;
}
.child{
border:1px solid black;
margin:40px;
height: 100px;
line-height: 100px;
width: 100px;
}
我们先将父元素width:400px;然后定义子元素的width:100px,margin:40px;由于宽度不够，子元素被压缩。
image.png
wrap
当我们使用wrap时，由于子元素加上margin的宽度超过了父元素的宽度，所以自动换行。
.parent{
border: 1px solid red;
display:flex;
width: 400px;
flex-wrap: wrap;
}
image.png
wrap-reverse:
第一行的出现在下方，如下图：
image.png
flex-flow
flex-flow是flex-direction和flex-wrap的组合。
flex-flow: <flex-direction> || <flex-wrap>;
justify-content
默认是建立在主轴为水平方向的情况。
flex-start
默认值，左对齐。
image.png
flex-end
右对齐
image.png
center
居中对齐
image.png
space-between
两端对齐，元素之间间隔相等，即生于的空间平分。
image.png
space-around
每个元素两侧的间隔相等。
image.png
align-items：
定义了交叉轴上元素的对齐方式。
stretch
默认是stretch，如果元素的高度未设置或者为auto，则自动延申到父元素的高度。
.parent{
border: 1px solid red;
display:flex;
width: 700px;
height:200px;
justify-content:center;
}
.child{
border:1px solid black;
line-height: 100px;
width: 100px;
}
我们首先定义parent的高度，然后去掉child的高度。
image.png
flex-start
交叉轴的起点对齐。我们首先将元素设置为60px，80px，100px。
image.png
flex-end
交叉轴终点对齐
image.png
center
交叉轴中点对齐。
image.png
baseline
以元素中的第一行文字的基线（通常为底部）为准，进行对齐。
image.png
align-content
定义多条轴线的对齐方式，当只有一根轴时（如flex-wrap设为nowrap时），此时align-content不起作用。
stretch
align-content的默认值，如果我们没有设置子元素的高度，子元素们会平分垂直方向的高度。
.parent{
border: 1px solid red;
display:flex;
width: 500px;
height:400px;
flex-wrap: wrap;
align-content: stretch;
}
.child{
border:1px solid black;
line-height: 100px;
margin:20px;
width: 100px;
}
image.png
flex-start
轴线全在交叉轴的起点对齐
image.png
flex-end
轴线全在交叉轴的终点对齐。
image.png
center
轴线在交叉轴的中间对齐。
image.png
space-between
两端对齐，平分中间剩余空间。
image.png
space-around
每个轴线两侧的间隔相等，所以轴线之间的间隔比轴线与边缘的间隔大一倍
image.png
网友评论