display: flex以及flex-direction,justify-content,align-items
若给一个div设置display:flex;这个div就可以成为flex容器,在flex容器中用flex-direction,justify-content,align-items等属性对子div进行布局是十分方便的。flex-direction· flex-direction: row; (默认)div是块级元素,默认一个div独占一行,可以通过在父级div(必须是flex容器)中设置fl...
若给一个div设置display:flex;这个div就可以成为flex容器,在flex容器中用flex-direction,justify-content,align-items等属性对子div进行布局是十分方便的。
flex-direction
· flex-direction: row; (默认)
div是块级元素,默认一个div独占一行,可以通过在父级div(必须是flex容器)中设置flex-direction: row;让其在一行显示。
<style>
#box-container {
height: 500px;
display: flex;
flex-direction: row;
}
#box-1 {
background-color: dodgerblue;
width: 100px;
height: 100px;
}
#box-2 {
background-color: orangered;
width: 100px;
height: 100px;
}
</style>
<div id="box-container">
<div id="box-1">div1</div>
<div id="box-2">div2</div>
</div>
· flex-direction: column;
设置flex-direction: row;则可以让字div变为一列。
#box-container {
height: 500px;
display: flex;
flex-direction: column;
}
· flex-direction: column;
flex-direction: column;让子元素反向一行显示:
#box-container {
height: 500px;
display: flex;
flex-direction: row-reverse;
border: 1px solid black;
}
· flex-direction: column;
让子元素反向一列显示
#box-container {
height: 500px;
display: flex;
flex-direction: column-reverse;
border: 1px solid black;
}
justify-content
justify-content的可选值包括:
- flex-start:从 flex 容器的前端开始排列项目。对行来说是把项目都靠左放,对于列是把项目都靠顶部放。
- flex-end:从 flex 容器的后端开始排列项目。对行来说是把项目都靠右放,对于列是把项目都靠底部放。
- center:可以让 flex 子元素排列在 flex 容器中间。
- space-between:项目间保留一定间距地在主轴排列。第一个和最后一个项目会被挤到容器边沿。例如,在行中第一个项目会紧贴着容器左侧,最后一个项目会紧贴着容器右侧,然后其他项目均匀排布。
- space-around:与space-between相似,但头尾两个项目不会紧贴容器边缘,空间会均匀分布在所有项目两边
· justify-content: center;
justify-content: center;可让子元素居中显示。
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: center;
border: 1px solid black;
}
若flex-direction:column;则为上下居中:
#box-container {
height: 300px;
display: flex;
flex-direction: column;
justify-content: center;
border: 1px solid black;
}
· justify-content: flex-start; (默认)
默认值
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: flex-start;
border: 1px solid black;
}
· justify-content: flex-end;
从父元素尾部开始排列
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: flex-end;
border: 1px solid black;
}
flex-direction: column;时的效果类似只不过从横向排列改为纵向排列,后面就不演示了。
· justify-content: space-between;
子元素均匀排列,紧贴父元素头尾两端。
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-between;
border: 1px solid black;
}
加入一个颜色为green的div3(其余属性和div1,div2完全一样),效果更明显:
· justify-content: space-around;
子元素完全均匀排列,不紧贴父元素头尾两端。
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: space-around;
border: 1px solid black;
}
align-items
align-items的可选值包括:
- flex-start:从 flex 容器的前端开始排列项目。对行来说是把项目都靠顶部放,对于列是把项目都靠左放。
- flex-end:从 flex 容器的后端开始排列项目。对行来说是把项目都靠底部放,对于列是把项目都靠右放。
- center:把项目的位置调整到中间。对于行,垂直居中(项目上下方空间相等)。对于列,水平居中(项目左右方空间相等)。
- stretch:拉伸项目,填满 flex 容器。例如,排成行的项目从容器顶部拉伸到底部.
- baseline:基线对齐地排列。基线是字体相关的概念,可以认为字体坐落在基线上。
· align-items: flex-start;(默认)
#box-container {
height: 300px;
display: flex;
flex-direction: row;
align-items: flex-start;
border: 1px solid black;
}
· align-items: flex-end;
#box-container {
height: 300px;
display: flex;
flex-direction: row;
align-items: flex-end;
border: 1px solid black;
}
· align-items: center;
#box-container {
height: 300px;
display: flex;
flex-direction: row;
align-items: center;
border: 1px solid black;
}
· align-items: stretch;
#box-container {
height: 300px;
display: flex;
flex-direction: row;
align-items: stretch;
border: 1px solid black;
}
#box-1 {
background-color: dodgerblue;
/*width: 100px;*/
/*height: 100px;*/
}
#box-2 {
background-color: orangered;
/*width: 100px;*/
/*height: 100px;*/
}
#box-3 {
background-color: green;
width: 100px;
height: 100px;
}
取消div1和div2的宽高设置,在没有设置大小的情况下,align-items: stretch;时子元素铺满父元素:
· align-items: baseline;
#box-container {
height: 300px;
display: flex;
flex-direction: row;
align-items: baseline;
border: 1px solid black;
}
用以上属性可以很容易的对子级div进行布局,例如让子级div上下左右居中:
<style>
#box-container {
height: 300px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
border: 1px solid black;
}
#box-1 {
background-color: dodgerblue;
width: 100px;
height: 100px;
}
</style>
<div id="box-container">
<div id="box-1">div1</div>
</div>
虽然这个很好实现布局,但还是要根据实际情况运用。
更多推荐
所有评论(0)